javascript - 硬刷新后注册服务工作者

Question

每当在硬刷新后重新加载带有 service worker 的 web 应用程序时（Ctrl + F5例如对于 Chrome），service worker 之后就无法注册。

根据W3C的文档

注意：如果请求是强制刷新（shift+refresh），则 navigator.serviceWorker.controller 返回 null。从这个属性 getter 返回的代表同一个 service worker 的 ServiceWorker 对象是相同的对象。

那么问题来了：硬刷新之后就真的不可能注册Service Worker吗？我正在使用navigator.serviceWorker.controller. 请参阅随附的 GIF，其中显示了与https://googlechrome.github.io/samples/service-worker/basic/页面的交互

标签： javascriptgoogle-chromeservice-workerofflineapps

Answer 1

使服务工作者即使在硬重新加载后也能工作的解决方案是通过下面的代码片段取消注册和注册服务工作者脚本。

   if ('serviceWorker' in navigator) {
      if (navigator.serviceWorker.controller) {
        navigator.serviceWorker.getRegistration(navigator.serviceWorker.controller.scriptURL).then(function (sw) {
          if (sw) {
            sw.unregister().then(() => {
              navigator.serviceWorker.register('service-worker.js');
            });
          }
        });
      } else {
        const url = window.location.protocol + '//' + window.location.host + '/service-worker.js';
        navigator.serviceWorker.getRegistration(url).then(function (sw) {
          if (sw) {
            sw.unregister().then(() => {
              navigator.serviceWorker.register('service-worker.js');
            });
          }
        });
      }
    }