服务工作者:Fetch事件侦听器仅在页面重新加载后才起作用

Question

我已经在我的页面中添加了一个服务工作者,其代码如下.一旦重新加载页面并且已经安装了工作程序,它就能很好地工作.但在看到"SW INSTALL"日志后,在重新加载页面之前似乎没有捕获到任何获取事件.

app.js

navigator.serviceWorker.register('/worker.js').then((registration) =>
{
    console.log('ServiceWorker registration successful with scope: ', 
registration.scope);
}, (err) =>
{
    console.log('ServiceWorker registration failed: ', err);
});

worker.js

self.addEventListener('install', function (event)
 {
    console.log("SW INSTALL");
 });

self.addEventListener('fetch', function (event)
{
    console.log("FETCHING", event);
    event.respondWith(
            caches.match(event.request)
                    .then(function (response, err)
                            {
                                // Cache hit - return response
                                if (response)
                                {
                                    console.log("FOUND", response, err);
                                    return response;
                                }
                                console.log("MISSED", event.request.mode);
                                return fetch(event.request)
                            }
                    )
    );
});

Answer 1

解决方案:将以下内容添加到worker.js;

self.addEventListener('activate', function (event)
{
    event.waitUntil(self.clients.claim());
});

服务工作人员不会立即"声明"加载它们的会话,这意味着在您的用户刷新页面之前,您的服务工作人员将处于非活动状态.

这样做的原因是一致性,因为如果服务工作者在网页的初始化过程中活跃起来,你可能会以一半的网页资产进行缓存,一半不缓存.如果您不需要此安全措施,可以调用clients.claim并强制您的服务工作人员开始接收事件

阅读更多@ service-workers