How to Build Progressive Web Apps with Offline Support using Lightning Web Components
Tags: pwa, lwc, offline
Published: 2020-07-30 20:55:22

---
title: How to Build Progressive Web Apps with Offline Support using Lightning Web Components
published: true
description: How to create a Progressive Web App (PWA) with Lightning Web Components and the Workbox toolkit.
tags: PWA, LWC, Offline
canonical_url: https://developer.salesforce.com/blogs/2020/04/how-to-pwa-offline-lwc.html
//cover_image: https://direct_url_to_image.jpg
---

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](https://developers.google.com/web/tools/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](https://lwc.dev/).

### Regular web app example

Now let’s dive right in and take a look at a simple contact management application. Click [here](https://lwc-contacts.herokuapp.com/) to run the regular web app version. You should see a simple list of contacts.

![Simple list of contacts](https://dev-to-uploads.s3.amazonaws.com/i/9hgusuu77c16dohcvl6g.png)

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.

1. Open the Developer Tools
2. 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)
3. Reload the page: you should see the **No Internet** page
4. 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](https://lwc-pwa-demo.herokuapp.com/) to run the progressive web app version of the same application. You should see the same list of contacts.

Try this:

1. 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)
2. On the **Network** tab, click the **Online** dropdown in the toolbar and select **Offline** to simulate offline mode
3. Reload the page. The page is reloaded (from the cache) including static assets and runtime data
4. 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:

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

![Google Developer Tools view](https://dev-to-uploads.s3.amazonaws.com/i/bssxnd5lorlobffam8jt.png)

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**

![Menu to install the LWC PWA Demo](https://dev-to-uploads.s3.amazonaws.com/i/mp5wsx74044b4iape2hz.png)

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

![App on your desktop](https://dev-to-uploads.s3.amazonaws.com/i/5ww6hxtai3nwcc1so8vy.png)

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](https://github.com/muenzpraeger/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:

1. 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
2. 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](https://github.com/ccoenraets/lwc-pwa-demo) 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.