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:
To support these capabilities, PWAs use emerging browser standards and APIs, including the application manifest and service workers.
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.
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.
This is a standard web app: it only works while connected to the internet and doesn’t provide browser-level caching of assets.
Click here to run the progressive web app version of the same application. You should see the same list of contacts.
Try this:
Let’s explore the application in the Google Developer Tools to understand how this works:
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.
On mobile devices, you can install the app on your home screen where it will appear just like a native app:
On Mac or Windows, you can install the app on your desktop:
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.
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:
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' } ] })
The source code for the application is available in this GitHub repository.
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.