未更改的 Service Worker 正在重新安装和重新缓存

Question

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

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));
}

它有效，但似乎关闭浏览器选项卡并重新打开它会导致安装事件重新触发，这会以某种方式导致越来越多的提取/缓存命中（见下文）记录。打开页面后，后续的软刷新将按预期运行；我只看到我正在加载的几个文件的缓存命中。

因此，第一次安装 Service Worker 时，我看到 3 次缓存命中，用于我正在加载的 3 个文件。如果我关闭并重新打开，我得到 6，然后 9，等等。在任何情况下，只需刷新页面就会显示预期的原始 3 缓存命中。

为什么关闭然后重新打开浏览器选项卡会导致为相同的几个文件触发越来越多的获取事件，但不会在后续刷新时触发？

下面是swRoot.js的全部

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');
});

Answer 1

它不应该存在，因为只调用了安装事件 once.I 认为问题出在您的 chrome 浏览器强制更新服务工作者是 checked.Open [=16] 上的开发人员控制台=] -> 转到应用程序选项卡 -> 服务工作者并取消选中 重新加载更新。

Answer 2

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.

很可能是您看到的是以前的日志。为了验证，你可以显示每个日志的时间线。

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

Img1

Img2

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

要修复它，请在控制台内右键单击并单击清除控制台历史记录。

希望这有帮助。

未更改的 Service Worker 正在重新安装和重新缓存

Unchanged service worker is re-installing and re-caching

javascript

service-worker

Img1

Img2