javascript - 无法向服务 worker 发布消息，因为 Controller 值为空

Question

我正在尝试制作 website在 Service Worker 的帮助下离线可用，以缓存页面所需的文件。我试图让用户控制他希望缓存哪些图像。

为此，我使用了函数sendMessage

 function sendMessage(msg){
  navigator.serviceWorker.controller.postMessage(msg);
}

其中消息包含与用户希望缓存或取消缓存的图像相关的数据。

Service Worker 包含消息事件的事件监听器:

this.addEventListener('message', function(event){
var data = event.data;
caches.open('v1').then(function(cache){
    if(data.add==1)
        return cache.add(data.url);
    else
        cache.delete(data.url).then(function(response)      
    {
     console.log(response)});
     console.log(event);
    }
 )})

我面临的问题是 Controller 总是null。

Answer 1

问题是您的 service worker 已注册，但它未激活且尚未控制您的页面。

如果你想让你的 service worker 变得活跃，你可以调用函数 skipWaiting在 install 事件处理程序中。

如果您希望您的服务人员在页面激活后立即控制该页面，您可以使用 Clients.claim activate 事件处理程序中的函数。

您可以在 ServiceWorker Cookbook Immediate Claim recipe 中查看示例.