How to cache swust toolbox?

Question

I worked with service workers and sw-toolbox. Both are great methods, but seem to have their flaws.

My project began with the use of Google service workers ( link ). As I see this, you need to manually update the version number to iterate over the cache. I am also mistaken, but I do not think that the pages visited by users will not be cached.

Compared to the sw-toolbox method, all I need to add is the following code:

self.toolbox.router.default = self.toolbox.networkFirst;

self.toolbox.router.get('/(.*)', function (req, vals, opts) {
    return self.toolbox.networkFirst(req, vals, opts)
        .catch(function (error) {
            if (req.method === 'GET' && req.headers.get('accept').includes('text/html')) {
                return self.toolbox.cacheOnly(new Request(OFFLINE_URL), vals, opts);
            }
            throw error;
        });
});

Then the problem of page caching will be solved. Here is my problem: after applying sw-toolbox in my project, the old worker of the service is not cleared or replaced with the new one, unless I go to dev tools to clear it.

Any ideas how to get around this?

Answer 1

: sw-toolbox , , dev, .

, . , . dev, , , .

, (, ), .

, self.skipWaiting(); install. .

, Jake Arichbald.

, , sw-toolbox, . Workbox - , sw-toolbox sw-precache. - ( /).

, , Workbox, . - , , , .

, .

P.S. skipWaiting , , . Chrome dev > , -.

Answer 2

, sw_toolbox . , , .

- sw. -, , :

self.addEventListener("activate", event => {

console.log("service worker activated");

//on activate
event.waitUntil(caches.keys()
    .then(function (cacheNames) {

        cacheNames.forEach(function (value) {

            if (value.indexOf(config.version) < 0) {

                caches.delete(value);

            }

        });

        return;

    })
);

});