Derek O' Reilly's DKIT lecture notes. Derek O' Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O' Reilly DKIT Dundalk Louth Ireland

Progressive Web Apps (PWA)

A Progressive Web App (PWA) uses HTML/CSS/JavaScript to build a web application that can run on mobile devices (as well as computers). PWAs have the same look-and-feel as native mobile device apps.

PWAs are HTML/CSS/JavaScript websites that have some additional features. A PWA can:

A PWA can only run on secure HTTPS websites or from localhost. The localhost is only included to allow developers to test their PWA locally before uploading it to a HTTPS server.

A PWA should be responsive. They should display properly on mobile devices, laptops and PCs.

A PWA is more discoverable than a native app because it is available on the www rather than an app store. A PWA can be easily shared by sending a link.

Manifest

In order to turn a webpage into a PWAr, it must link to a manifest file. A manifest file is a JSON file that defines how a PWA will behave when it is installed on a mobile device or computer.

A manifest file can be of type .json or .webmanifest. We shall use .json in these notes.

manifest.json

The code below needs to be added at the top of the index.html file. As well as linking to the manifest.json file, the code below also includes some other links that are needed when installing a PWA on an iPhone or iPad.

Service Workers

In order to use a service worker, the landing webpage (index.html) needs to register a service worker, as shown below. In the code below, the service worker called sw_offline_first.js will be loaded.

A complete index.html file that includes the manifest, ios support, and registers a service worker is shown below:

index.html

Service workers must be placed in the root folder, so that their scope includes your entire website.

sw_offline_first.js

const cacheName = 'offline_pwa_example_version_1.0'

The cacheName allows for updates to be made at a later date to the PWA.

const filesToCache =
        ['manifest.json',
            'index.html',
            'offline_message.html',
            'css/style.css',
            'icons/icon_small_red.png',
            'icons/icon_medium_green.png',
            'icons/icon_large_blue.png']

The filesToCache holds the list of files that we want to store in the browser's cache.

// Install the service worker and cache the files in the array filesToCache[] 
self.addEventListener('install', e =>
{
    e.waitUntil(caches.open(cacheName)
            .then(cache =>
            {
                cache.addAll(filesToCache)
                return true
            }))
})

When the service work first installs, it saves the filesToCache in the browser's cache.

Whenever the user opens the PWA in future, the saved files in the browser's cache will be used. This means the files only have to be downloaded once.

// Delete old versions of the cache when a new version is first loaded 
self.addEventListener('activate', event =>
{
    event.waitUntil(caches.keys()
            .then(keys => Promise.all(keys.map(key =>
                {
                    if (!cacheName.includes(key))
                    {
                        return caches.delete(key)
                    }
                }))))
})

If the cacheName is changed, then the old set of cached files will be deleted and the new set of files in filesToCache will be downloaded. This allows us to update the content of the PWA.

// Fetch offline cached first, then online, then offline error page 
self.addEventListener('fetch', function (e)
{
    e.respondWith(caches.match(e.request)
            .then(function (response)
            {
                if (response) // file found in cache
                {
                    return response
                } 
                else // file found online
                {
                    return fetch(e.request)
                }
            })
            .catch(function (e)
            {
                // offline and not in cache
                return caches.match('offline_message.html')
            })
            )
})

With an offline-first approach, the browser will firstly try to load files from the browser cache (using caches.match(e.request)). If this fails, it will download the file from the server (using fetch(e.request)). If this fails, then it will load the file offline_message.html

The above example implements an offline-first policy. When a user goes to run the PWA, the service worker will try to retrieve files from the browser's cache. It will only download files if they are not in the browser's cache.

A complete offline-first PWA example that uses the code described above can be found at this this link.

Lighthouse

The Chrome Lighthouse tab can be used to test if a website is a valid PWA. We can use the Lighthouse to check how compliant our app is to the PWA requuirements. Lighthouse is accessed via the inspect (F12) option. It is on the same menu as the the Console tab.

Application

The Chrome Application tab can be used to test if a website is a PWA. We can use the Application tab to check is a PWA is registered, to unregister a PWA, view all registered PWAs and simulate the browser being offlie. The Application tab is accessed via the inspect (F12) option. It is on the same menu as the the Console tab.