Question

我正在注册我的服务工作者，并在注册的回调中，加载一些缓存的文件

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个缓存命中数。

为什么关闭然后重新打开浏览器标签会导致针对相同的几个文件触发越来越多的获取事件，而不是后续刷新？

整个swRoot.js位于

之下

{{1}}

Answer 1

因此，第一次安装服务工作者时，我看到3个缓存命中，我加载了3个文件。如果我关闭并重新打开，我会得到6，然后是9，等等。无论如何，只需刷新页面就会显示原始的3个缓存命中率。

最有可能是您看到以前的日志。要验证，您可以显示每个日志的时间表。

转到控制台内的开发工具设置F1或点击图标（img1）
选中显示时间戳（img2）选项。
或者在您的获取事件处理程序中添加console.log(new Date());。

IMG1

IMG2

现在，您将能够识别来自先前请求的日志。您的 sw 没有提出额外请求，只是控制台保留旧日志。

要解决此问题，请在控制台内右键单击，然后单击清除控制台历史记录
希望这有帮助。

Answer 2

它不应该存在，因为安装事件只被调用一次。我认为问题出在你的chrome浏览器强制更新服务工作者被检查。在chrome上打开开发者控制台 - ＆gt;转到应用程序选项卡 - ＆gt;服务工作者并取消选中重新加载时更新。

未更改的服务工作者正在重新安装和重新缓存

2 个答案:

IMG1

IMG2