正在等待 window 加载事件以注册 Service Worker

Question

我在 Google Workbox documentation 中偶然发现了这个片段：

<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>

在没有 window load 事件处理程序的情况下，页面加载性能究竟如何降低？

Service Worker 尽早连接通常不是更可取的吗，因为它在 PWA 中的主要用途之一是缓存？

Answer 1

不是加载事件侦听器的阻塞。

您无论如何都需要加载所有资源，然后 service worker 将它们存储在浏览器中。

下次用户访问应用程序时，Service Worker 已经在那里了。准备从浏览器的缓存中传送资源。

service worker 不是运行主线程。

Answer 2

请注意，Service Worker 不仅仅是一些作为 Web 应用程序的一部分下载的 JS 文件。也是一个browser implementation as an API。 Web 应用程序中的 SW JS 代码将与浏览器的 SW 实现通信以缓存加载的文件 before/after SW JS 文件已加载。当涉及到 SW 的缓存能力时，以什么顺序加载文件的顺序或时间并不重要。

这就是原因，即使您的 Web 应用程序兼容 PWA，不支持 SW 的浏览器也不会缓存。

Answer 3

Service workers 在主线程的后台加载，但它们仍然消耗计算机资源，如果有预缓存，还会消耗网络资源。如果当前渲染页面需要 500KB 来渲染，而你想要预缓存页面以完全脱机工作，则 service worker 还必须下载这 500KB。这与正在呈现的当前页面竞争，因此建议延迟注册服务工作者，直到当前页面为用户准备好之后。

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

正在等待 window 加载事件以注册 Service Worker

Waiting for window load event to register service worker

javascript

service-worker

progressive-web-apps

workbox