本程式碼實驗室將說明如何在網路應用程式中註冊服務工作者，並使用 Chrome 開發人員工具觀察其行為。本節也將介紹一些偵錯技巧，這些技巧在處理服務工作站時可能會很實用。
熟悉範例專案
範例專案中與本程式碼研究室最相關的檔案如下：
register-sw.js一開始是空白的，但會包含用來註冊服務 worker 的程式碼。系統已透過專案index.html中的<script>標記載入該模型。service-worker.js也同樣為空值。這個檔案會包含此專案的服務工作者。
新增服務工作者註冊程式碼
服務工作者 (即使是空白的服務工作者，例如目前的 service-worker.js 檔案) 必須先註冊，才能使用。您可以透過以下呼叫來執行此操作：
navigator.serviceWorker.register(
'/service-worker.js'
)
在 register-sw.js 檔案中。
不過，在新增程式碼之前，請先考量幾點。
首先，並非所有瀏覽器都支援服務工作者。這對於不會自動更新的舊版瀏覽器尤其重要。因此，最佳做法是在確認是否支援 navigator.serviceWorker 後，有條件地呼叫 navigator.serviceWorker.register()。
其次，當您註冊服務工作者時，瀏覽器會執行 service-worker.js 檔案中的程式碼，並可能開始下載網址來填入快取，這取決於服務工作者 install 和 activate 事件處理常式中的程式碼。
執行其他程式碼和下載素材資源可能會耗用瀏覽器用來顯示目前網頁的寶貴資源。為避免這種干擾，建議您延後註冊服務工作者，直到瀏覽器完成目前網頁的轉譯作業為止。如要簡單模擬這個情況，請等到 window.load 事件觸發為止。
將這兩點結合起來，將這個通用服務工作者註冊程式碼新增至 register-sw.js 檔案：
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
新增一些服務工作者記錄程式碼
service-worker.js 檔案通常會用於服務介面程式實作作業的所有邏輯。您可以結合服務介面程式生命週期事件、快取儲存空間 API，以及網路應用程式的網路流量相關知識，建立完美打造的服務介面程式，隨時處理所有網路應用程式要求。
不過，這部分會在稍後的學習中介紹。在這個階段，我們將著重於觀察各種服務工作程式事件，並熟悉如何使用 Chrome 的 DevTools 來偵錯服務工作程式的狀態。
為此，請將下列程式碼新增至 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」面板。畫面應如下所示：
這表示有一個服務工作者，其來源網址為 service-worker.js，目前已啟用並執行網頁應用程式 solar-donkey.glitch.me。它也會告訴您，目前有一個由 Service Worker 控管的用戶端 (開啟分頁)。
您可以使用這個面板上的連結 (例如 Unregister 或 stop)，針對目前註冊的服務工作者進行變更，以便進行偵錯。
觸發服務工作程更新流程
使用服務工作站進行開發時，必須瞭解的其中一個重要概念是更新流程的概念。
使用者造訪已註冊服務工作者的網頁應用程式後，就會在本機瀏覽器上安裝目前的 service-worker.js 副本程式碼。不過，如果您更新網路伺服器上儲存的 service-worker.js 版本，會發生什麼情況？
當重複造訪者返回服務工作者範圍內的網址時，瀏覽器會自動要求最新的 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 狀態，並會持續等待，直到所有由舊服務工作者控制的已開啟分頁都關閉為止。
這項預設行為可確保，如果新服務工作者與舊服務工作者的行為有重大差異 (例如 fetch 處理常式會回應與舊版網頁應用程式不相容的資源)，則必須等到使用者關閉所有舊版網頁應用程式執行個體後，新服務工作者才會生效。
總結
您現在應該熟悉註冊服務工作者，以及使用 Chrome 的 DevTools 觀察服務工作者的行為。
您現在已準備就緒，可以開始實作快取策略，以及所有有助於確保 Web 應用程式可靠且快速載入的優質內容。