Workbox setup to alert your users that a new version of your PWA is available on their device

app.js

function checkForNewVersions() {
    if( ! 'BroadcastChannel' in window) return;
    const assetsUpdates = new BroadcastChannel('precache-updates');
    const dataUpdates = new BroadcastChannel('data-updates');
    assetsUpdates.addEventListener('message', (event) => {
        /*alert the user to reload the page to get the new app version*/
    });
    dataUpdates.addEventListener('message', (event) => {
        /*alert the user to reload the page to get the new app data*/
    });
}




if ('serviceWorker' in navigator) {
    navigator.serviceWorker
        .register('./sw.js')
        .then((reg) => {
            console.log('Service Worker Registered');
        });
}

workbox-sw-generator.js

/* Create the service worker as the last step of your build */
const workboxBuild = require('workbox-build');

workboxBuild.generateSW({
    globDirectory: './public/',
    globPatterns: ['**\/*.{html,js,css}'], /*to be served from the cache*/
    swDest: './public/sw.js',
    runtimeCaching: [{
        urlPattern: '/api', /*serve data from the cache but also update it with the new payload fetched from the network*/
        handler: 'staleWhileRevalidate',
        options: {
            cacheName: 'data-cache',
            cacheExpiration: {
                maxEntries: 2
            },
            broadcastCacheUpdate: {
                channelName: 'data-updates'
            }
        }
    }],
    skipWaiting: true
})
.then(() => {
    console.log('Service worker generated.');
});