由于控制器值为空，因此无法向服务人员发布消息

Question

我试图在服务人员的帮助下使网站脱机，以缓存页面所需的文件。我正在尝试让用户控制他希望缓存的图像。

为此，我正在使用功能sendMessage

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

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

服务工作者包含消息事件的事件侦听器：

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

我面临的问题是控制器始终为null。

Answer 1

问题是您的服务工作者已注册，但尚未激活，并且尚未控制您的页面。

如果您希望服务人员处于活动状态，则可以在事件处理程序中调用函数skipWaitinginstall。

如果希望服务工作者在页面变为活动状态时立即对其进行控制，则可以在事件处理程序中使用Clients.claim函数activate。

您可以在ServiceWorker Cookbook立即索赔食谱中看到一个示例。