TJohns.co

Details

Written by Timothy Johns

Category: Progressive Web Apps (PWA)

Published: 19 March 2018

Last Updated: 19 March 2018

Hits: 2672

• pwa

The script below, when added to your PWA, will prompt users to install update when available.

<script>
    window.isUpdateAvailable = new Promise(function(resolve, reject) {
        navigator.serviceWorker.register('sw.js')
            .then(reg => {
            reg.onupdatefound = () => {
            const installingWorker = reg.installing;
            installingWorker.onstatechange = () => {
                switch (installingWorker.state) {
                    case 'installed':
                        if (navigator.serviceWorker.controller) {
                            resolve(true);
                        } else {
                            // no update available
                            resolve(false);
                        }
                        break;
                }
            }
        }
    })
        .catch(err => console.error('[SW ERROR]', err));
    });
</script>​

You'll need to replace 'sw.js' with the name of your service worker file.

Details

Written by Timothy Johns

Category: Progressive Web Apps (PWA)

Published: 01 March 2018

Last Updated: 19 March 2018

Hits: 2353

• pwa
• progressive web app

Intro

A Progressive Web App (will be called PWA from now on) is, in simple terms, a way that you can make your website feel and look like an app without having to actually build an app.  Currently it supports 'Add to Home' and notifications.  I'll start with Add to Home functionality.

Add to Home Button

The add to home functionality has some benefits such as:

• Works offline or when the device isn't connected to the internet.
• Works on every browser and every device.
• Loads much faster since much of the design is stored locally.  Instantly in most cases.
• Looks and feels like an app.
• More secure, using https only to prevent snooping.

Implementing
You'll need to generate multiple images (favicons) in different sizes.  A great tool for that is realfavicongenerator.net.
Also, to simplify things, here's a javascript library that will need to be added to your site: UpUp.js library

realfavicongenerator.net will not only generate the icons needed, but also will create your manifest.json file.  All images and the manifest file are easier to implement, many sources say, by putting them in your home folder.

So there are a few parts that are needed for a PWA to function. You'll need the extra icons and a manifest file, mentioned previously. Then you'll need your service worker file, which you can get from using UpUp (it will generate the service worker file and another javascript file that registers and loads it).

[code & further instructions to come]