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

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的主要用途之一就是缓存？

Answer 1

服务工作者在主线程的后台加载，但它们仍然消耗计算机资源，如果预先缓存，则消耗网络资源。 如果当前呈现页面需要500KB进行渲染，并且您希望将页面预先缓存为完全脱机工作，则服务工作者还必须下载该500KB。 这与正在呈现的当前页面竞争，因此建议延迟注册服务工作者，直到当前页面为用户准备好。

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

Answer 2

这不是阻塞加载事件监听器。

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

下次用户访问应用程序时，服务工作者已经在那里。 准备从浏览器的缓存中提供资源。

服务工作者没有使用主线程运行。

Answer 3

请注意，服务工作者不仅仅是作为Web应用程序的一部分下载的一些JS文件。 它也是一个API的浏览器实现 。 Web应用程序中的SW JS代码将与浏览器的SW实现进行通信，以缓存在加载SW JS文件之前/之后加载的文件。 在SW的缓存能力方面，以什么顺序加载哪个文件的顺序或时间并不重要。

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