Question

我想从离线功能中受益，因此我确保在自己安装页面时缓存以及其他资源，如css和js

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

    self.skipWaiting();
});

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

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文件仍然很旧，这个星座可能不能很好地协同工作。

Answer 2

虽然使用vanilla JS实现缓存过期可能有点挑战，但您可以尝试使用Google的Workbox。它有cache expiration这个概念。

一个超级基本的例子：

const cacheExpirationPlugin = new workbox.cacheExpiration.CacheExpirationPlugin({
  maxEntries: 50,
  maxAgeSeconds: 24 * 60 * 60
});

您可以阅读更多相关信息here。

ServiceWorker刷新加载工作的页面

2 个答案: