Home / Questions / 271833
Accepted
Eduardo Munizaga
Asked: 2020-06-14 06:46:42 +0800 CST 2020-06-14 06:46:42 +0800 CST

How to update a progressive web (PWA) correctly, so that the user detects the changes?

  • 772

I am working with a very simple mobile progressive web (the application is very simple and it is not enough to make an app). Correspondingly, this mobile website installs a Service Workers (sw.js) to cache offline elements and their corresponding manifest.json. At the beginning of the Service Workers indicate the following:

var cacheName = 'v1.0.3.0:static';

In what I thought that every time the version value changed as indicated in the Google Developers post , the user would receive the new update, but this does not work. The user keeps his old version without receiving the changes and the only way, so far, is for users to delete the history from their mobile (and in some cases reinstall the PWA).

Is there a way to do this automatically or notify the user (without using push notifications) of new changes? I attach my sw.js in case it is useful for analysis.

var cacheName = 'v1.0.3.0:static';

self.addEventListener('install', function(e) {   
    e.waitUntil(
        caches.open(cacheName).then(function(cache) {
            return cache.addAll([
                'https://www.......com',
                'https://www.......com/js/app.js',
                ....
                ....

            ]).then(function() {
                self.skipWaiting();
            });
        })
    );
});

self.addEventListener('fetch', function(event) {   
    event.respondWith(
        caches.match(event.request).then(function(response) {
            if (response) {              
                return response;
            }          
            return fetch(event.request);
        })
    );
});
javascript

1 Answers

  1. Best Answer

    You need to clear the old versions of the cache at the time of updating the service worker.

    self.addEventListener('activate', function(event) {
    event.waitUntil(caches.keys().then(function(names) {
        return Promise.all(
            names.filter(function(name) {
                return name !== cacheName;
            }).map(function(name) {
                return caches.delete(name);
            })
        );
    }).then(function() {
        return self.clients.claim();
    }));
});

    What this code does is run a function when the new service worker becomes active. So, it gets all the names of the created caches and iterates through them to remove all the ones that don't have the same name as the "cacheName" constant.

    Note: To see the changes it is necessary to reload the page.

    • 0