服务工作进程从磁盘缓存缓存资源

Question

我正在创建一个需要离线支持和更新的 Web 应用程序。当我更新应用程序时，新的服务工作进程开始从磁盘缓存缓存文件，并且不更新应用程序。这会导致新缓存获取旧文件。 Chrome 网络去抖截图。

const STATICCACHE = 'v9';
const DYNCACHE = 'dv2';
//v9
const assets = [
// All my assets
];
// install
self.addEventListener('install', event => {
event.waitUntil(
caches.open(STATICCACHE).then(cache => {
console.log("caching assets");
cache.addAll(assets);
})
);
});
// activate event
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(keys => {
return Promise.all(keys
.filter(key => key !== STATICCACHE && key !== DYNCACHE)
.map(key => caches.delete(key))
)
})
)
});
//fetch event
self.addEventListener('fetch', event => {
if (event.request.url.indexOf('firestore.googleapis.com') === -1) {
event.respondWith(
caches.match(event.request).then(cacheRes => {
return cacheRes || fetch(event.request).then(fetchRes => {
return caches.open(DYNCACHE).then(cache => {
cache.put(event.request.url, fetchRes.clone());
return fetchRes;
})
});
})
);
}
});

它不适用于 android 的 chrome 和 iOS 上的 safari。

感谢您的帮助

Answer 1

发生这种情况是因为您的资产名称在您更新它们时不会更改，例如.app.js无论文件的内容如何.js始终是 app。从浏览器的角度来看，文件没有改变。

您有两个主要选项来处理此问题：

1. 确保您的服务器对所有静态资产使用正确的 HTTP 标头，例如。ETag 或缓存：重新验证时过时等。这样，即使资产的名称未更改，您也可以强制浏览器检查服务器是否有新版本。

当文件以任何方式更改

2. 时，请始终更改文件的名称。

第二种选择是大多数人在开发 Web 应用程序时使用的选项。通常，工具，JS捆绑器等确保文件名更改。文件名通常分为两部分，包括文件内容的哈希：例如app.8927349789adf8.js和styles.329789dfs89sigjg.css。当然，您不想手动执行此操作，而是使用Webpack或Parcel等。

您还可以使用一些解决方法，例如使浏览器请求例如。app.js?XXXXXXXXXXX是当前时间或类似的东西。此外，如果要合并一些服务工作者库(如Workbox(，即使名称保持不变，它也支持跟踪文件内容更改。基本上，Workbox计算文件的哈希值，然后使用查询参数技巧缓存它们，例如。styles.css?_HASH_OF_THE_FILE.您还可以将相同的技巧合并到手写的软件文件中 - 当您的缓存名称更改时，只需从服务器请求文件并将类似?current_time的内容附加到所有请求中。这将强制浏览器执行网络请求。