本程式碼研究室將說明如何在網頁應用程式中註冊 Service Worker，並使用 Chrome 開發人員工具觀察其行為。本節也將介紹一些偵錯技巧，這些技巧在處理服務工作站時可能會很實用。
熟悉範例專案
範例專案中與本程式碼研究室最相關的檔案如下：
register-sw.js一開始是空白的，但會包含用來註冊服務 worker 的程式碼。系統已透過專案index.html中的<script>標記載入該模型。service-worker.js也是空的，這個檔案會包含此專案的服務工作者。
新增服務工作者註冊程式碼
除非先註冊，否則系統不會使用 Service Worker (即使是空的，像是目前的 service-worker.js 檔案)。您可以透過以下呼叫來執行此操作：
navigator.serviceWorker.register(
'/service-worker.js'
)
在 register-sw.js 檔案中。
不過，在新增程式碼之前，請先考量幾點。
首先，並非所有瀏覽器都支援服務工作者。這對於不會自動更新的舊版瀏覽器尤其重要。因此，最佳做法是在檢查是否支援 navigator.serviceWorker 後，有條件地呼叫 navigator.serviceWorker.register()。
其次，當您註冊服務工作者時，瀏覽器會執行 service-worker.js 檔案中的程式碼，並可能開始下載網址來填入快取，這取決於服務工作者 install 和 activate 事件處理常式中的程式碼。
執行額外的程式碼和下載素材資源可能會佔用瀏覽器可能用來顯示目前網頁的寶貴資源。為避免這種干擾，建議您延後註冊服務工作者，直到瀏覽器完成目前網頁的轉譯作業為止。如要簡單模擬這個情況，請等到 window.load 事件觸發為止。
將這兩個點放在一起，請將以下一般用途的 Service Worker 註冊程式碼新增至 register-sw.js 檔案：
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
新增一些服務工作者記錄程式碼
在一般情況下，Service Worker 實作的所有邏輯都會在 service-worker.js 檔案上發揮作用。您可以搭配使用 Service Worker 生命週期事件、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 Workers」面板
程式碼已新增至 register-sw.js 和 service-worker.js 檔案，現在您可以前往範例專案的 Live 版本，觀察服務工作者執行的情形。
- 如要預覽網站，請按下「View App」，然後按下「Fullscreen」
。 - 按下 `Control+Shift+J` 鍵 (在 Mac 上為 `Command+Option+J` 鍵) 開啟開發人員工具。
- 再按一下「Console」(控制台) 分頁標籤即可。
您應該會看到類似以下的記錄訊息，顯示服務工作者已安裝及啟用：
接著，前往「應用程式」分頁，然後選取「Service Workers」面板。畫面上應會顯示類似以下內容：
這表示針對網頁應用程式 solar-donkey.glitch.me，有一個來源網址為 service-worker.js 的 Service Worker，目前正在啟用及執行。它也會告訴您，目前有一個由 Service Worker 控管的用戶端 (開啟分頁)。
您可以使用這個面板上的連結 (例如 Unregister 或 stop)，針對目前註冊的服務工作者進行變更，以便進行偵錯。
觸發 Service Worker 更新流程
使用服務工作站進行開發時，必須瞭解的其中一項重要概念是更新流程的概念。
使用者造訪已註冊服務工作者的網頁應用程式後，就會在本機瀏覽器上安裝目前的 service-worker.js 副本程式碼。不過，如果您更新網路伺服器上儲存的 service-worker.js 版本，會發生什麼情況？
當回訪訪客返回位於 Service Worker 範圍內的網址時，瀏覽器會自動要求最新的 service-worker.js 並檢查是否有任何變更。如果服務工作者指令碼中的任何內容有所不同，則新服務工作者將有機會安裝、啟用，並最終接管。
如要模擬這項更新流程，請返回專案的程式碼編輯器，然後對程式碼進行「任何」變更。有一個簡單的變更是
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
套用後
self.addEventListener('install', (event) => {
console.log('Inside the UPDATED install handler:', event);
});
變更完成後，請返回範例應用程式的即時版本，並重新載入頁面，同時開啟「開發人員工具」應用程式分頁。畫面應如下所示：
這表示目前已安裝兩個服務工作者版本。已啟用的舊版正在執行，並控制目前的網頁。更新後的服務工作者版本列於下方。它處於 waiting 狀態，並會持續等待，直到所有由舊服務工作者控制的已開啟分頁都關閉為止。
這個預設行為可確保當新的 Service Worker 對舊行為的行為有根本差異時 (例如 fetch 處理常式回應的資源與舊版網頁應用程式不相容)，必須等到使用者關閉所有先前網頁應用程式的執行個體後，才會生效。
總結
您現在應該熟悉註冊服務工作者，以及使用 Chrome 的 DevTools 觀察服務工作者的行為。
您現在已準備就緒，可以開始實作快取策略，以及所有有助於確保 Web 應用程式可靠且快速載入的實用功能。