javascript - Service Worker 更新，但旧文件仍被缓存

Question

当我更新 Service Worker 时，我关闭并重新打开页面，我得到控制台日志，表明新的 Service Worker 已安装并激活，并且旧的缓存已被删除。但是，列出的要添加到缓存中的文件不会再次从服务器获取，它们是数小时前的陈旧版本。如果没有清除 Chrome 开发工具中的存储空间，就无法让它更新文件。

安装新版本时，如何让我的 Service Worker 用新文件填充它的缓存？

例如，“stylesheet.css”在 service worker 更新时仍然是旧版本:

let cacheName = "abc_web_v1_15";

self.addEventListener('install', (event) => {
    console.log('[Service Worker] Install');
    event.waitUntil(
        caches.open(cacheName).then(function (cache) {
            return cache.addAll([
                "/".
                "/stylesheet.css",
                ...
            ]);
        })
    );
});
self.addEventListener('fetch', (e) => {
    e.respondWith(
        caches.match(e.request).then(function (r) {
            console.log('[Service Worker] Fetching resource: ' + cacheName + ' ' + e.request.url);
            if (r) {
                console.log(cacheName + ' returning cached  ' + e.request);
                return r;
            } else {
                console.log(cacheName + ' returning fetched  ' + e.request);
                return fetch(e.request);
            }
        })
    )
});

self.addEventListener('activate', (e) => {
    console.log('[Service Worker] Activate');
    e.waitUntil(
        caches.keys().then((keyList) => {
            return Promise.all(keyList.map((key) => {
                if (cacheName.indexOf(key) === -1) {
                    console.log(`[Service Worker] Removing Cached Files from Cach-${key}`);
                    return caches.delete(key);
                }
            }));
        })
    );
});

Answer 1

问题很简单:当您的 Service Worker 请求"new"文件时，fetch请求通过常规浏览器 HTTP 缓存。如果在那里找到资源，浏览器会自动返回该资源并且不会进入网络。

如果您从代码中查看此代码段:

return cache.addAll([
                "/".
                "/stylesheet.css",
                ...
            ]);

您会看到无论内容如何，​​您的样式表的名称始终相同。换句话说，当您的样式表更新时，文件名仍然相同。出于这个原因，该文件已经在浏览器的 HTTP 缓存中，因此 SW 在请求时会获取它。

你应该版本你的文件。通常使用文件内容的散列。使用哈希命名，您最终会得到类似 stylesheet.iudfirio132.css 的名称。每次文件更改一个字符时，该名称都会更改。这样你的应用程序的新版本总是使用不同名称的资源。您还应该使用 Workbox 预缓存等构建工具来更新 Service Worker 文件中的资源列表，这样您就无需手动执行此操作。更多: https://developers.google.com/web/tools/workbox/modules/workbox-precaching

彻底掌握这里的主题我建议您阅读这篇博文，“缓存最佳实践和最大年龄问题” https://jakearchibald.com/2016/caching-best-practices/