JavaScript (PWA) - 初始化 service-worker 的正确方法是什么？

Question

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

方法一:我希望在这种情况下将安装新的 SW 实例。我想这不是必需的，我想重新激活已经在浏览器中运行的现有软件——我说得对吗？

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

方法 2:在这种情况下，我正在检查是否已经注册了 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 事件是为了让 service worker 下载的 Assets 不会占用带宽和设备资源来呈现当前请求的页面。参见 improving the boilerplate .

对于您的注册问题，请使用简单的第一个版本。

Unless you change the URL of the service worker script, navigator.serviceWorker.register() is effectively a no-op during subsequent visits.

subsequent visits

如果 service worker 没有注册，register 会注册它。如果 service worker 已经注册，register 基本上不会做任何事情。