Scofield Idehen

Posted on Feb 16, 2023 • Edited on Feb 19, 2023 • Originally published at blog.learnhub.africa

How to Build Offline Web Applications

#webdev #javascript #tutorial #programming

With the increasing prevalence of mobile devices and unreliable network connections, it’s more important than ever to ensure that web applications can function even when a user is offline.

Additionally, users expect web applications to be reliable and fast, with minimal downtime and interruptions.

One way to achieve this is by building Progressive Web Applications (PWAs), web applications that can be installed on a user’s device and work offline.

This article will explore the techniques and technologies used to create offline-capable and reliable web applications.

I. Introduction

Today, people rely on web applications for various tasks, from ordering food to managing finances.

As such, these applications must be available to users even when they don’t have an internet connection. Additionally, users expect web applications to be fast, responsive, and available at all times.

PWAs are web applications that can be installed on a user’s device and work offline, providing an experience similar to that of a native mobile app.

II. Offline Capability

One of the key features of PWAs is their ability to work offline. This is accomplished by caching static assets (such as HTML, CSS, and JavaScript files) and data on the user’s device. There are several ways to store this information, including LocalStorage and IndexedDB.

LocalStorage is a simple key-value store that can store small amounts of data, such as user preferences or authentication tokens. It’s easy to use and well-suited for small amounts of data, but it has a limited capacity and can’t store larger data sets.

IndexedDB, on the other hand, is a more powerful data store that allows storing large amounts of structured data. It uses an object-oriented data model, making it more complex than LocalStorage, but also more powerful.

Service workers, a scriptable network proxy, allow you to control how the browser handles network requests, including serving assets and data from the cache when the network is unavailable.

It runs separately from the web application and can operate on a separate thread, allowing for more efficient management of assets and data.

III. Reliability

PWAs provide a reliable offline experience by using service workers to control how network requests are handled. Service workers can intercept network requests and check for a cached response before requesting data from the network.

Additionally, they can queue requests when the network is unavailable and send them when the connection is restored. This allows the web application to continue functioning even when the user’s device is offline.

Push notifications and background sync are other features that can be used to improve the reliability of a PWA. Push notifications allow the application to notify the user of new content or updates even when the app is not open. In contrast, background sync allows the app to perform tasks like uploading data when the device is connected to the internet.

IV. PWA implementation

Various libraries and frameworks are available to help with the development of PWAs.

One popular choice is Workbox, a set of libraries and Node modules created by Google that makes it easier to add service workers and other PWA features to your web application.

When designing and implementing a PWA, it’s essential to keep in mind best practices such as designing for offline functionality, ensuring fast load times, and using appropriate storage options. It’s also essential to test the PWA on different devices and network conditions to ensure it works correctly.

Examples of successful PWAs:

Twitter Lite is a lightweight version of the Twitter app that uses a PWA to provide an offline-capable and fast user experience.
Alibaba is a popular e-commerce platform that uses a PWA to provide shoppers a fast and reliable offline experience.
Spotify is a music streaming app that uses a PWA to provide an offline listening experience for users.
Forbes is a business and financial news website that uses a PWA to provide readers a fast and offline-capable experience.
Trivago, a hotel and travel price comparison website, the PWA offers an improved user experience and faster load time.
Google Maps Go is a lightweight app that uses a PWA to provide an offline-capable and fast user experience.

These are only a few examples of the many PWAs available today. Across various industries and use cases, PWAs are becoming more popular and widely adopted by companies to improve user experience and provide the offline capability.

Best Practices for Designing and Implementing a PWA:

Use a Service Worker to cache static assets and handle network requests
Use a web manifest file to specify the start URL, display mode, and other PWA features
Use HTTPS to ensure that the PWA is secure and that service workers can be used
Use responsive design techniques to ensure that the PWA works well on different devices and screen sizes
Use push notifications and background sync to provide a reliable experience even when the user is offline
Test the PWA on different devices and network conditions to ensure that it works correctly
Keep the PWA’s initial load time as short as possible
Use appropriate storage options: consider using both LocalStorage and IndexedDB
Optimize the performance using techniques such as code splitting, preloading and pre-caching
Continuously monitor and measure the performance

Use case:

A weather PWA app that allows users to check the current weather in their location or any other location they search for. The app will cache the weather data and allow the user to access the data even when offline.

To implement this PWA, we will use the following technologies:

HTML and CSS for the app layout and styling
JavaScript for the app logic and interacting with the API
Geolocation API for getting the user’s location
OpenWeatherMap API for getting weather data
Workbox for caching the weather data and assets

Here’s an example of how the app’s code might look like:

<!DOCTYPE html>
<html>
<head>
<title>Weather PWA</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<header>
<h1>Weather PWA</h1>
</header>
<main>
<div id="location"></div>
<div id="weather"></div>
</main>
<footer>
<p>Copyright 2021</p>
</footer>
</body>
</html>
CSS:
body {
font-family: sans-serif;
padding: 0;
margin: 0;
}
header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
text-align: center;
}
footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}


// Get the user's location
navigator.geolocation.getCurrentPosition(getWeather);
function getWeather(position) {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
// Make an API request to OpenWeatherMap
fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=<your-api-key>`)
.then(response => response.json())
.then(data => {
const location = data.name;
const temperature = data.main.temp;
// Display the weather data on the page
const locationElem = document.getElementById('location');
locationElem.innerHTML = `Location: ${location}`;
const weatherElem = document.getElementById('weather');
weatherElem.innerHTML = `Temperature: ${temperature}`;
})
.catch(err => console.log(err));
// Register the service worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/serviceWorker.js')
.then(() => console.log('Service worker registered'))
.catch(err => console.log(err));
}
serviceWorker.js

// Import Workbox
importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');
// Use the precaching module to cache the app's static assets
workbox.precaching.precacheAndRoute([
{url: '/index.html', revision: '1'},
{url: '/styles.css', revision: '1'},
{url: '/script.js', revision: '1'},
]);
// Use the caching module to cache the weather data
workbox.routing.registerRoute(
/^https:\/\/api\.openweathermap\.org/,
new workbox.strategies.StaleWhileRevalidate(),
);
}

Geolocation API: This API allows web applications to access the user’s location information. In the example above, we used the navigator.geolocation.getCurrentPosition() method to get the user’s current location and passed that information to the getWeather() function.

OpenWeatherMap API: This API is used to get weather data for a specific location. In the example above, we requested the API to get the current weather data for the user’s location. We used the returned data to display the location and temperature on the page.

Workbox: Workbox is a set of libraries and Node modules created by Google that makes it easy to add service worker features to your web application. In the example above, we used Workbox’s precaching module for caching the app’s static assets and its caching module for caching the weather data. This way, the PWA can access this data even when the user is offline.

Using these technologies, the example of a PWA capable of obtaining user location, fetching weather data and caching it to provide an offline experience is implemented.

Please note that the API key and endpoint URL may differ, and you will have to acquire one from the OpenWeatherMap service and use it in the app.

Conclusion

In conclusion, building a Progressive Web Application (PWA) allows web applications to provide an offline-capable and reliable user experience.

PWAs can continue functioning even when the user is offline by utilising service workers to cache assets and data. Additionally, by utilizing the Geolocation API and OpenWeatherMap API, the PWA can gather information from the users and provide a personalized experience.

Furthermore, by utilizing Workbox, developers can quickly implement service worker features such as offline caching and background sync.