未更改的服务工作者正在重新安装和重新缓存 [英] Unchanged service worker is re-installing and re-caching
问题描述
我正在注册我的服务工作者，并在注册的回调中，加载一些缓存的文件
I'm registering my service worker, and in the registered callback, loading some cached files
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('swRoot.js').then(() => {
console.log('registered');
System.import('react');
System.import('react-dom');
System.import('a').then(({ a }) => console.log('value from a', a));
}, err => console.log(err));
}
它有效，但似乎关闭了浏览器标签，并重新打开它导致安装事件重新触发，这会导致越来越多的提取/缓存命中（见下文）记录。页面打开后，后续的软刷新行为符合预期;我只看到我正在加载的少数文件的缓存命中。
It works, but it seems closing the browser tab, and re-opening it is causing the install event to re-fire, which somehow results in a growing number of fetches / cache hits (see below) to log. Once the page is open, subsequent soft refreshes behave as expected; I only see cache hits for the few files I'm loading.
因此，第一次安装服务工作者时，我看到3个缓存命中，对于3个文件我正在加载。如果我关闭并重新打开，我会得到6，然后是9，等等。无论如何，只需刷新页面就会显示原始的3个缓存命中数。
So the very first time the service worker is installed, I see 3 cache hits, for the 3 files I'm loading. If I close and re-open, I get 6, then 9, etc. In any case, simply refreshing the page shows the original 3 cache hits as expected.
为什么关闭然后重新打开浏览器选项卡会导致为相同的几个文件触发越来越多的获取事件，但不会在后续刷新时触发？
整个swRoot.js低于
The entirety of swRoot.js is below
self.addEventListener('install', function(event) {
console.log('INSTALLED');
console.log('ADDING CACHE FILES');
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll([
'/react-redux/node_modules/react/dist/react-with-addons.js',
'/react-redux/node_modules/react-dom/dist/react-dom.js',
'/react-redux/a.js'
]).then(function(){ console.log('cache filling success'); }).catch(function(){ console.log('cache filling failure') });
})
);
});
console.log('ADDING FETCH at root level');
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
console.log('cache hit', event.request);
return response;
}
return fetch(event.request);
})
);
});
self.addEventListener('activate', function(event) {
console.log('ACTIVATE');
});
推荐答案
所以第一次安装服务工作者的时间，我看到3个缓存命中，我正在加载的3个文件。如果我关闭并重新打开，我会得到6，然后是9，等等。无论如何，只需刷新页面就会显示原始的3个缓存命中率。
So the very first time the service worker is installed, I see 3 cache hits, for the 3 files I'm loading. If I close and re-open, I get 6, then 9, etc. In any case, simply refreshing the page shows the original 3 cache hits as expected.
最有可能的是你看到以前的日志。要验证，您可以显示每个日志的时间线。
Most probably is that you are seeing previous logs. To verify, you can show the timeline of every log.
- 在控制台内转到开发工具设置F1或点击icon（img1）
- 选中显示时间戳（img2）选项。
- 或者简单地添加
console.log（new Date（））;在你的fetch事件处理程序中。
- Go to dev tools settings F1 inside console or click on the icon (img1)
- Check the option Show timestamps (img2).
- Or simple add a
console.log(new Date());inside your fetch event handler.
Img1
Img1
$
现在，您将能够识别以前请求中的日志。您的 sw 没有提出额外请求，只是控制台保留旧日志。
Now you will be able to identify logs that are from previous requests. Your sw is not making extra request, just the console is keeping old logs.
修复它，在控制台内右键单击，然后单击清除控制台历史记录。
希望此帮助。
To fix it, do right click inside the console and click on clear console history.
Hope this help.
这篇关于未更改的服务工作者正在重新安装和重新缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
