本程式碼研究室將說明如何在網頁應用程式中註冊 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 事件後。
將這兩個點放在一起，請將以下一般用途的 Service Worker 註冊程式碼新增至 register-sw.js 檔案：
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
新增部分 Service Worker 記錄程式碼
在一般情況下，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 檔案後，接著請前往範例專案的即時版本，並觀察 Service Worker 的實際運作情形。
- 如要預覽網站，請按下「View App」，然後按下「Fullscreen」
。 - 按下 Control+Shift+J 鍵 (或在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
- 再按一下「Console」(控制台) 分頁標籤即可。
您應該會看到類似以下的記錄訊息，顯示已安裝並啟用 Service Worker：
接著前往「Applications」分頁，然後選取「Service Workers」面板。畫面應如下所示：
這表示針對網頁應用程式 solar-donkey.glitch.me，有一個來源網址為 service-worker.js 的 Service Worker，目前正在啟用及執行。它也會指出目前一個用戶端 (開啟的分頁) 目前由 Service Worker 控管。
您可以使用這個面板中的連結 (例如 Unregister 或 stop)，對目前註冊的 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 處理常式回應的資源與舊版網頁應用程式不相容)，必須等到使用者關閉所有先前網頁應用程式的執行個體後，才會生效。
正在總結
您現在應熟悉如何註冊 Service Worker，並使用 Chrome 開發人員工具查看 Service Worker 的行為。
您現在可以開始導入快取策略，以及有助於網頁應用程式穩定且快速地載入所有優質功能。