显示服务工作人员状态的消息

Question

上周我一直在使用Service Worker，目前安装了用于脱机缓存文件和推送通知的优秀安装。

还有最后一两件事，我希望能够以显示对服务人员的某些状态的UI消息，目前我对激活状态下面的代码：

if ('serviceWorker' in navigator) { 
navigator.serviceWorker.addEventListener('controllerchange',function(event) { 
    navigator.serviceWorker.controller.addEventListener('statechange', function() { 
if (this.state === 'activated') { 
    document.getElementById('offlineNotification').classList.remove('hidden'); 
} 
}); 
}); 
} 

现在我想为安装状态创建一条消息，允许我显示类似于“脱机服务正在更新”的消息，如果有人正在处理此问题并知道如何操作，请告诉我。

我已经尝试过同样的代码，但与 “如果（this.state === '安装'）”

和

“如果（this.state === '安装'”

既不似乎工作。

Answer 1

服务工作者有一个生命周期是从你的网页完全分开的。 要安装服务人员为您的网站，你需要注册。

self.addEventListener('install', function(event) { 
    // Perform install steps 
}); 

当我们安装后，激活步骤将随之而来，这是处理旧缓存管理的好机会。

self.addEventListener('activate', function(event) { 
    // Perform activate steps, Typically cache management. 
}); 

激活步骤后，服务人员将控制在其范围下跌的所有页面，但直到它再次加载已注册的第一次服务工作者的页面将无法控制。

一旦服务人员处于控制之下，它将处于以下两种状态之一：either the service worker will be terminated以节省内存，或it will handle fetch and message events发生在网页请求或消息从您的页面发出时。 您也可以尝试像，

if ('serviceWorker' in navigator) { 
     navigator.serviceWorker.register('/sw.js').then(function(reg) { 
     // updatefound is fired if service-worker.js changes. 
     reg.onupdatefound = function() { 
      var installingWorker = reg.installing; 

      installingWorker.onstatechange = function() { 
      switch (installingWorker.state) { 
       case 'installed': 
       if (navigator.serviceWorker.controller) { 
        // At this point, the old content will have been purged and the fresh content will have been added to the cache. 
        // It's the perfect time to display a "New content is available; please refresh." 
        console.log('New or updated content is available.'); 
       } else { 
        // At this point, everything has been precached. 
        // It's the perfect time to display a "Content is cached for offline use." message. 
        console.log('Content is now available offline!'); 
       } 
       break; 

       case 'redundant': 
       console.error('The installing service worker became redundant.'); 
       break; 
      } 
      }; 
     }; 
     }).catch(function(e) { 
     console.error('Error during service worker registration:', e); 
     }); 
    } 

Answer 2

看看在live flowchart demo上ServiceWorker食谱，并在使用电报通知用户当有更新的code snippet。