Question

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

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

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

1 个答案: