等待窗口加载事件以注册服务工作者

Question

我在Google Workbox文档中发现了这个片段:

<script>
// Check that service workers are registered
if ('serviceWorker' in navigator) {
  // Use the window load event to keep the page load performant
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js');
  });
}
</script>

没有 load 事件处理程序，页面加载为何会变得不够快？

因为 PWA 中 service worker 的一个主要用途是缓存，所以一般来说最好尽早将其挂钩。

- Estus Flask

Answer 1

Service workers（服务器工作者）在主线程后台加载，但它们仍然会消耗电脑资源，如果预加载，也会消耗网络资源。如果当前渲染页面需要500KB才能呈现，而您希望将页面预缓存以完全离线工作，服务工作者也必须下载那500KB。这与当前正在呈现的页面竞争，因此建议延迟注册服务工作者，直到当前页面对用户准备就绪。

您可以在web fundamentals上阅读更多有关注册服务工作者的信息。

- abraham

---

谢谢，你提供的Google关于用户首次访问的解释在这个情境下很有道理。考虑将这句话添加到答案中。 - Estus Flask

Answer 2

这并不是使用加载事件监听器来阻止。

你需要无论如何加载所有资源，然后服务工作者会在浏览器中存储它们。

下一次用户访问应用程序时，服务工作者已经存在。可以随时从浏览器缓存中提供资源。

服务工作者不会在主线程上运行。

- André Kelling

---

请澄清您的意思。这并不是使用load事件监听器阻塞的问题 - 为什么会阻塞呢？正如您已经提到的，SW在另一个线程中运行。无论如何，您都需要加载所有资源，然后服务工作者将在浏览器中存储它们 - 但是如果SW直到页面加载后才启动，它将仅在第二次访问后存储它们，而不是在第一次访问后。 - Estus Flask

安装部分当然是在主线程中进行的。在 SW 激活时，服务工作者会自行启动以缓存所有所需资产。在第二次访问时，它们可以从浏览器（离线）中获取服务。但这也可能取决于您如何将文件存储到缓存中：使用 fetch 事件侦听器，它们将在获取后存储，这可能会在第二次访问时发生... - André Kelling

Answer 3

请注意，Service Worker 不仅仅是作为 Web 应用程序的一部分下载的一些 JS 文件。它还是一个浏览器实现的 API。您 Web 应用程序中的 SW JS 代码将与浏览器的 SW 实现进行通信，以缓存在加载 SW JS 文件之前/之后加载的文件。当涉及到 SW 的缓存能力时，文件加载的顺序或时间不重要。

这就是为什么没有 SW 支持的浏览器即使您的 Web 应用程序兼容 PWA，也无法缓存的原因。

- Anand