Question

初始化用于PWA缓存的service-worker的更好方法是什么？

方法1：我希望在这种情况下将安装新的SW实例。我想那是没有必要的，我想重新激活浏览器中已经在运行的现有软件-是吗？

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('sw.js').then(registration => {
      // Registration success
    }, function(err) {
      // Registration failed
    });
  });
}

方法2：在这种情况下，我要检查是否已经注册了SW，并且仅当尚未注册时才安装新的SW。

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.getRegistrations().then(registrations => {
      const isServiceWorkerNotRegistered = registrations.length === 0;

      if (isServiceWorkerNotRegistered) {
          navigator.serviceWorker.register('sw.js').then(registration => {
              // Registration success
          }).catch(error => {
              // Registration failed
          });
      } else {
          console.log('Service worker already registered.');
      }
    });
  });
}

最重要的是...是否真的有必要等待窗口加载（第2行）？由于SW在浏览器中异步运行，我想我不需要完全加载该应用程序。

Answer 1

等待load事件是为了让服务工作者下载的资产不会占用呈现当前请求页面的带宽和设备资源。参见improving the boilerplate。

关于注册问题，请使用简单的第一版。

除非您更改服务工作者脚本的URL，否则navigator.serviceWorker.register（）实际上是在后续访问期间的禁止操作。

subsequent visits

如果未注册服务工作者，则register将对其进行注册。如果已经注册了服务工作者，则register基本上不会做任何事情。

JavaScript（PWA）-初始化服务人员的正确方法是什么？

1 个答案: