渐进式Web应用程序上的缓存版本控制

Question

What is the current best practice for service worker caching?

After using service workers and caching for a number of projects, we are having a bit of a maintenance headache to manage the cached assets for the project.

In most cases we are using a static cache (most likely the cause of our headache) and our sw.js code is pretty standard and looks as follows:

var cacheName = 'v1:static';

// cache static assets during install phase
self.addEventListener('install', function (e) {
    e.waitUntil(
        caches.open(cacheName).then(function (cache) {
            return cache.addAll([
                './',
                './css/style.css',
                './css/vendor.css',
                './js/build/script.min.js',
                './js/build/vendor.min.js'
            ]).then(function () {
                self.skipWaiting();
            });
        })
    );
});

self.addEventListener('fetch', function (event) {        
    event.respondWith(
        caches.match(event.request).then(function (response) {
            if (response) {
                // retrieve from cache
                return response;
            }
            // fetch as normal
            return fetch(event.request);
        })
    );
});

The problems begin once we release a new version of our app and we need to invalidate the cache for the user.

What methods are recommended to update the cache? I am aware of sw-precache or developers who manually update the cacheName variable (or perhaps through a task-runner). Are there other alternatives? Is there a way to only invalidate one file instead of the entire cache?

Thanks

Answer 1

I suggest that you do an assets assessment of your project(s). Determine the static assets from the dynamic ones. Once you have determined the pure static ones, precache it.

There are 2 ways of doing this. 1) use sw-toolbox or 2) manually update the version number of the service worker file for the browser to update it.

I know the pain that you are experiencing with invalidating the cache and everything. You might want to try/implement sw-toolbox .

sw-toolbox method

const OFFLINE_URL = '/pages/offline/';

importScripts('sw-toolbox.js');

self.toolbox.precache([
    <PATH_TO_STATIC_ASSET>
    'manifest.json',
    OFFLINE_URL,
    '/'
]);

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;
        });
    });

Google Service Worker Boilerplate - link

This one too is pretty straight forward. The only down side of this is that at every deployment, you have to update the CACHE_VERSION for the service-worker installed to update automatically.

Take note also that there is Workbox also. I havent played around with it that much yet so my methods could be outdated. They say that this is the descendant to precache and toolbox

Answer 2

我认为最简单的方法是更新服务工作者JS文件中的CACHE_NAME，以便再次安装。