等待窗口加載事件來注冊服務工作者

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支持的瀏覽器也不會緩存。