本程式碼研究室說明如何從網路註冊 Service Worker 應用程式，並使用 Chrome 開發人員工具觀察應用程式行為。此外， 其中涵蓋了一些偵錯技術，在您處理工作負載時 Service Worker。
熟悉範例專案
與本程式碼研究室最相關的範例專案中的檔案如下：
register-sw.js一開始為空白，但會包含使用的程式碼 註冊 Service Worker。已由<script>載入 該檔案就在專案index.html內。service-worker.js也是空的，這個檔案會包含 為此專案的 Service Worker
新增 Service Worker 註冊代碼
Service Worker (甚至是空的，像是目前的 service-worker.js 檔案)
除非
已註冊
首先。呼叫方式如下：
navigator.serviceWorker.register(
'/service-worker.js'
)
在 register-sw.js 檔案中。
不過，在新增該程式碼前，請先考量 讓他們使用服務帳戶
首先，並非所有瀏覽器
支援
Service Worker。這對於不會自動更新的舊版瀏覽器尤其重要。所以最佳做法是
已確認 navigator.serviceWorker.register() 是否符合條件
系統支援 navigator.serviceWorker。
其次，當您註冊 Service Worker 時，瀏覽器會在
service-worker.js 個檔案，可能會開始下載要填入資料的網址
快取速度，取決於 Service Worker 中程式碼的
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.js 檔案是 Service Worker 的所有邏輯的位置
導入作業Service Worker 必須混合使用
生命週期事件
這個
Cache Storage API
並掌握網頁應用程式的網路流量資訊，
Service Worker 已準備好處理所有網頁應用程式的要求。
不過，這部分會在稍後的學習中介紹。這個階段的重點在於觀察 各種 Service Worker 事件，以及熟悉 Chrome 開發人員工具的使用方法 對 Service Worker 狀態進行偵錯。
為瞭解決這個問題，請將下列程式碼加進 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」面板。 畫面應如下所示：
這表示有一個服務工作者，其來源網址為 service-worker.js，目前已啟用並執行網頁應用程式 solar-donkey.glitch.me。此外，這也會指出目前有一個用戶端 (開啟中)
標籤)，這些元件會由 Service Worker 控管。
你可以使用這個面板中的連結 (例如「Unregister」或「stop」)
以便偵錯。
觸發 Service Worker 更新流程
使用服務工作處理程序進行開發時，必須瞭解的其中一個重要概念是 構想 更新流程。
使用者造訪註冊 Service Worker 的網頁應用程式後，使用者會
取得目前安裝的 service-worker.js 驗證碼
在本機瀏覽器中操作。更新
service-worker.js 是否儲存在您的網路伺服器上？
當重複造訪者返回服務工作者範圍內的網址時，瀏覽器會自動要求最新的 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
預設行為可以確保
Service Worker 的行為與舊裝置之間有根本差異，例如
fetch 處理常式回應了與舊版不相容的資源
的網頁應用程式版本，要等到使用者將所有版本關閉後才會生效
先前的網頁應用程式執行個體
正在總結
您現在應已熟悉服務工作處理程序的註冊程序 ，並使用 Chrome 開發人員工具觀察 Service Worker 的行為。
您現在可以開始導入快取策略了！ 確保網頁應用程式能穩定可靠地載入 快速