javascript - ServiceWorker刷新加载工作的页面

Question

我希望受益于离线功能，因此我确保在安装页面时缓存其本身以及其他 Assets (例如 css 和 js)

self.addEventListener('install', function (event) {
    event.waitUntil(caches.open(cacheName).then(cache => cache.addAll([
        "/",
        self.location.href
    ])));

    self.skipWaiting();
});

由于安装只会为工作人员运行一次，我如何确保这些 Assets 在每次运行时或至少不时刷新？

Answer 1

您还可以通过在每次部署新版本网站时定义新的缓存名称来实现此目的:

//change cache name with each deploy
var staticCacheName = 'NewWithEachDeploy';

self.addEventListener('install', function (event) {
  event.waitUntil(
    caches.open(staticCacheName).then(function (cache) {
      return cache.addAll([
        'index.html',
        '...'
      ]);
    })
  );
});

然后在激活时删除所有旧缓存。

self.addEventListener('activate', function (event) {
    event.waitUntil(caches.keys().then(function (keyList) {
        return Promise.all(keyList.map(function (cacheKey) {
            //delete all caches which do not equal with the current cache name (staticCacheName)
            if (cacheKey !== staticCacheName) {
                console.log('[ServiceWorker] Removing old cache', cacheKey);
                return caches.delete(key);
            }
        }));
    }));
});

这样您就可以确保所有资源立即更新。否则你可能会遇到麻烦。例如，您的缓存 html 已更新到最新版本，但 JS 文件仍然是旧的，并且这个星座可能无法很好地协同工作。