本程式碼研究室將說明如何在網頁應用程式中註冊 Service Worker，並使用 Chrome 開發人員工具觀察其行為。並介紹一些偵錯技巧，您在處理服務工作站時可能會很實用。
熟悉範例專案
範例專案中與本程式碼研究室最相關的檔案如下：
register-sw.js一開始是空白的，但其中會包含用來註冊 Service Worker 的程式碼。已在專案index.html內的<script>標記載入。service-worker.js也同樣空白。這個檔案將包含這項專案的 Service Worker。
新增 Service Worker 註冊代碼
除非事先註冊，否則不會使用 Service Worker (甚至是空白檔案，例如目前的 service-worker.js 檔案)。方法是呼叫：
navigator.serviceWorker.register(
'/service-worker.js'
)
位於 register-sw.js 檔案中。
不過，在新增程式碼前，需要考量以下幾點。
首先，並非所有瀏覽器都支援服務工作站。這對不會自動更新的舊版瀏覽器來說尤其重要。因此，在確認過 navigator.serviceWorker 是否支援後，建議您有條件地呼叫 navigator.serviceWorker.register()。
其次，當您註冊 Service Worker 時，瀏覽器會在 service-worker.js 檔案中執行程式碼，且可能會開始下載網址來填入快取，視服務工作站 install 和 activate 事件處理常式中的程式碼而定。
執行其他程式碼及下載資產可能會耗用寶貴資源，瀏覽器可能會使用這些資源來顯示目前的網頁。為了避免受到這類幹擾，建議您將註冊 Service Worker 的時間延後到瀏覽器完成目前頁面轉譯為止。最簡單的做法是等待 window.load 事件觸發。
統整這兩點後，請在 register-sw.js 檔案中新增以下一般用途的 Service Worker 註冊程式碼：
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
新增一些 Service Worker 記錄程式碼
服務工作站實作的所有邏輯都會在 service-worker.js 檔案中找到。您會混合使用服務工作站生命週期事件、Cache Storage API 和網頁應用程式的網路流量相關知識，建立精心打造的 Service Worker，以便處理所有網頁應用程式的要求。
但這些都只是供稍後學習使用。這個階段的重點是觀察各種 Service Worker 事件，並熟悉使用 Chrome 的開發人員工具對服務工作站狀態進行偵錯。
為此，請在 service-worker.js 中加入下列程式碼，讓開發人員工具控制台回應各種事件 (但不會記錄更多事件)：
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
self.addEventListener('activate', (event) => {
console.log('Inside the activate handler:', event);
});
self.addEventListener(fetch, (event) => {
console.log('Inside the fetch handler:', event);
});
熟悉開發人員工具中的 Service Worker 面板
您已將程式碼新增至 register-sw.js 和 service-worker.js 檔案，接著要造訪範例專案的即時版本，並觀察服務工作站的實際運作情形。
- 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示
。 - 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
- 再按一下「Console」(控制台) 分頁標籤即可。
您應該會看到類似下列的記錄訊息，表示已安裝並啟用 Service Worker：
接著，前往「Applications」分頁，然後選取「Service Workers」面板。您看到的畫面應如下所示：
這可讓您知道，目前已啟用且正在執行網頁應用程式 solar-donkey.glitch.me 的來源網址為 service-worker.js 的 Service Worker。也會告知服務工作站目前控制著一個用戶端 (開啟分頁)。
您可以使用此面板中的連結 (例如 Unregister 或 stop) 變更目前已註冊的 Service Worker，以便進行偵錯。
觸發 Service Worker 更新流程
透過 Service Worker 進行開發時，必須瞭解的其中一個重要概念就是「更新流程」。
使用者造訪註冊 Service Worker 的網頁應用程式後，系統會提供目前安裝於本機瀏覽器之 service-worker.js 副本的程式碼。但是，如果更新儲存在網路伺服器上的 service-worker.js 版本，會發生什麼情況？
當回訪者返回位於 Service Worker 範圍內的網址時，瀏覽器會自動要求最新的 service-worker.js，並檢查是否有任何變更。如果 Service Worker 指令碼中的任何項目不同，新的 Service Worker 將有機會安裝、啟用，最終掌控工作負載。
如要模擬這個更新流程，請返回專案的程式碼編輯器，然後對程式碼進行「任何」變更。有一個簡單的變更方式
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
同時
self.addEventListener('install', (event) => {
console.log('Inside the UPDATED install handler:', event);
});
完成變更後，請返回範例應用程式的即時版本，並重新載入開發人員工具應用程式分頁。如下所示：
這表示目前已安裝兩個版本的 Service Worker。之前已啟用的舊版本正在執行，且可控制目前的頁面。以下為 Service Worker 的更新版本。處於 waiting 狀態，並會保持等待，直到舊版 Service Worker 控管的所有開啟分頁關閉為止。
這個預設行為可確保新的服務工作站行為與舊服務工作站的行為存在根本差異 (例如，利用與舊版網頁應用程式不相容的資源回應的 fetch 處理常式)，只有在使用者關閉網頁應用程式先前的所有執行個體後才會生效。
總結內容
您現在應該瞭解如何使用 Chrome 的開發人員工具註冊 Service Worker，以及觀察服務工作站的行為。
您現在已經可以開始導入快取策略了，還有一切可以幫助您網頁應用程式穩定載入的優質內容。