How to Build Progressive Web Apps with Offline Support using Lightning Web Components

Christophe Coenraets — Thu, 30 Jul 2020 20:55:22 +0000

In this blog post, I’ll guide you through an existing Progressive Web App (PWA) hosted online, and show you how it uses caching, works offline, and can be installed on your desktop. I’ll then walk you through the simple steps to create your own PWA with Lightning Web Components and the Workbox toolkit.

Before we start, let’s quickly describe the terminology and libraries we use in this blog post.

Progressive Web Apps are regular web applications that are augmented with “native app”-like capabilities. For example, progressive web apps:

Work offline
Support web-push notification
Can be installed on your desktop or the home screen of your mobile device

To support these capabilities, PWAs use emerging browser standards and APIs, including the application manifest and service workers.

The application manifest is a JSON file that describes the application: name, start URL, icons, etc.
A service worker is a script that the browser runs in the background, separately from the main browser thread, and can handle tasks like receiving web push notifications or intercepting network requests to support caching and offline mode. Caching and versioning assets is a nontrivial task. You can write your own logic in your service worker or you can use a library like Workbox to simplify the process.

Lightning Web Components is a lightweight open source UI framework based on the latest web standards. The framework makes it easy and fast to build web applications using web components. More information here.

Regular web app example

Now let’s dive right in and take a look at a simple contact management application. Click here to run the regular web app version. You should see a simple list of contacts.

Try this:

Note: We use Google Chrome to examine the application in the steps below. You should be able to achieve the same results using any browser supporting PWAs.

Open the Developer Tools
On the Network tab, click the Online dropdown in the toolbar and select Offline to simulate offline mode (you can also turn off your wifi or unplug your network cable if you prefer)
Reload the page: you should see the No Internet page
On the Network tab, select Online to go back online

This is a standard web app: it only works while connected to the internet and doesn’t provide browser-level caching of assets.

PWA example

Click here to run the progressive web app version of the same application. You should see the same list of contacts.

Try this:

If it’s the first time you access the PWA, refresh the page to allow the service worker (that has now been registered) to cache the configured runtime resources (like REST service calls)
On the Network tab, click the Online dropdown in the toolbar and select Offline to simulate offline mode
Reload the page. The page is reloaded (from the cache) including static assets and runtime data
On the Network tab, select Online to go back online

Let’s explore the application in the Google Developer Tools to understand how this works:

In the Google Developer Tools, select the Application tab
Click Service Workers in the sidebar. Note that a service worker (sw.js) has been registered
Expand Cache Storage in the sidebar: You should see two entries: workbox-precache-… and workbox-runtime-…
Click workbox-precache-..: You should see all the static assets that have been precached
Click workbox-runtime-…: You should see the cached runtime REST service invocation

Note: You can use the Offline checkbox at the top of the Application panel to simulate offline mode without having to go back to the Network panel.

Installing a PWA on your home screen or desktop

On mobile devices, you can install the app on your home screen where it will appear just like a native app:

On iOS, access the app in Safari, tap the Share button, scroll down, tap Add to Home Screen, and tap Add
On Android, access the app in Chrome, tap Settings (upper right corner), slide down and tap Add to Home Screen

On Mac or Windows, you can install the app on your desktop:

Click Settings (three vertical dots in the upper right corner)
Select Install LWC PWA Demo

The application is then available on your desktop like any other native app.

Now that we’ve seen the PWA in action, let’s see how to create it.

Creating a PWA with Lightning Web Components

The easiest way to create a Lightning Web Components application is to use the create-lwc-app CLI. Use the -t pwa parameter to specify you want to create a PWA application. For example:

`npx create-lwc-app my-contacts -t pwa`

This will do two things:

Create a custom webpack-config.js file in the scripts folder and register the workbox plugin which will automatically generate a service worker (sw.js) during the build process
Register the service worker in index.html

With that default configuration, the static assets manipulated during the build process will automatically be precached when the application is loaded. You can fine-tune the default configuration. For example, let’s take a look at the registration of the workbox plugin in scripts/webpack-config.js for the contact-manager we just looked at. Note that we added a rutimeCaching entry to cache calls to the api/contacts REST service.

new GenerateSW({
    swDest: 'sw.js',
    clientsClaim: true,
    skipWaiting: true,
    runtimeCaching: [
        {
            urlPattern: new RegExp('api/contacts$'),
            handler: 'StaleWhileRevalidate'
        }
    ]
})

Source Code

The source code for the application is available in this GitHub repository.

Summary

PWAs blur the line between web apps and native apps. They work offline, support push notifications and can be installed on your desktop or mobile device home screen. The Lightning Web Components CLI provides a fast and easy way to create PWAs that leverage the Workbox toolkit.