改善 Service Worker 的開發體驗

雖然服務工作站生命週期可確保安裝和更新程序的可預測性,但可讓本機開發週期稍微更動。

在常見的本機開發週期中,開發人員會在文字編輯器中儲存檔案變更,然後切換至瀏覽器來驗證變更,然後重複執行相關程序。如果服務工作處理程序混用,這個週期大致相同,但開發人員預期的功能和瀏覽器行為可能有所不同。

本機開發的例外狀況

一般而言,Service Worker API 僅適用於透過 HTTPS 提供的網頁,但這項規則有例外情形:可透過 HTTP 提供。需要注意的例外狀況是透過 localhost 提供的網頁,適用於本機開發作業。

不過,除了在主機檔案中,除了 localhost 以外,開發人員還要指定本機主機名稱並不常見。 如果多個專案需要獨立主機名稱,則本機開發環境需要這項資訊。在這種情況下,佈建自行簽署的憑證就會執行。

我們建議的解決方法是指示瀏覽器針對 Service Worker 測試設定例外狀況。 如果是 Chrome,請前往 chrome://flags/#unsafely-treat-insecure-origin-as-secure 並指定不安全來源,將這類來源視為安全來源。 Firefox 可讓您透過 about:config 中的 devtools.serviceWorkers.testing.enabled 設定,在不安全的來源上測試 Service Worker。

Service Worker 開發輔助工具

如果本機開發並混合使用 Service Worker,可能會導致非預期的行為。 舉例來說,假設有個靜態快取策略適用於未版本化的靜態資產,或是預計會在變更後重新載入的「你離線」頁面。 由於這些資產的過時版本始終是透過 Cache 執行個體提供,因此看起來沒有更新!令人沮喪的是,Service Worker 只會執行實際的工作,但有一些方法可以簡化測試。

要測試 Service Worker 最有效的方式,就是依賴私密瀏覽視窗,例如 Chrome 的無痕式視窗,或 Firefox 的私密瀏覽功能。 每次開啟私密瀏覽視窗,都會重新開始。 沒有運作中的服務工作站,以及沒有開啟的 Cache 執行個體。這類測試的處理常式如下:

  1. 開啟私密瀏覽視窗。
  2. 前往註冊 Service Worker 的頁面。
  3. 確認 Service Worker 是否如預期運作。
  4. 關閉無痕式視窗。
  5. 樂趣無限循環

使用這個程序時,您自然會模擬 Service Worker 的生命週期。

Chrome 開發人員工具「應用程式」面板中的其他測試工具可協助您透過某些方式修改 Service Worker 的生命週期,

Chrome 開發人員工具應用程式面板。

應用程式面板有一個標示「Service Workers」的子麵板,當中顯示目前頁面處於啟用中的 Service Worker。每個啟用中的 Service Worker 可以手動更新,甚至完全取消註冊。頂端還有三個切換按鈕,可協助您進行開發。

  1. 離線:模擬離線狀況。這有助於測試有效的 Service Worker 是否提供離線內容。
  2. 重新載入時更新:一旦關閉,每當網頁載入時,就會重新擷取並取代目前的 Service Worker。
  3. 略過網路時,如果切換這項設定,便會規避服務工作站 fetch 事件中的任何程式碼,並一律從網路擷取內容。

這些是實用的切換鈕 (尤其是「略過網路」)。如果您使用有效的 Service Worker 來開發專案,這項功能相當實用,但您還想在沒有 Service Worker 的情況下,確保體驗正常運作。

Firefox 在開發人員工具中也有類似的應用程式面板,但這項功能只能顯示已安裝的 Service Worker,此外也能夠手動為目前網頁取消註冊任何作用中的 Service Worker。 這同樣有幫助,但在本機開發週期中需要較多手動操作。

Shift 並重新載入

在使用重新整理時更新略過網路提供的功能的情況下,在本機使用中的 Service Worker 進行開發時,建議您按住 Shift 鍵並按下重新整理按鈕。

這稱為「強制重新整理」,可以略過網路的 HTTP 快取。 Service Worker 啟用時,強制重新整理也會完全略過 Service Worker。

如果不確定特定快取策略是否正常運作,這項功能就非常實用。另外,您也可以擷取來自網路的所有內容,藉此比較使用及沒有 Service Worker 的行為。更棒的是,這是指定行為,因此支援 Service Worker 的所有瀏覽器都會觀察這個行為。

檢查快取內容

如果無法檢查快取,難以判斷快取策略是否正常運作。 沒問題,您可以在程式碼中檢查快取,但這個過程包含偵錯工具和/或 console 陳述式,因為視覺工具更適合用於工作。Chrome 開發人員工具的「應用程式」面板提供子麵板,可讓您檢查 Cache 執行個體的內容。

在開發人員工具中檢查快取

這個子麵板提供下列功能,簡化服務工作站的開發作業:

  • 查看 Cache 執行個體的名稱。
  • 可檢查快取資產的回應主體及其相關回應標頭。
  • 從快取中刪除一或多個項目,甚至是刪除整個 Cache 執行個體。

這個圖形使用者介面可讓您輕鬆檢查 Service Worker 的快取,以便確認是否已從 Service Worker 快取中加入、更新或移除項目。Firefox 在獨立的「儲存空間」面板中提供自己的快取檢視器,但功能類似。

模擬儲存空間配額

在含有大量大型靜態資產的網站 (例如高解析度圖片) 中,可能會達到儲存空間配額。發生這種情況時,瀏覽器會從快取中移除已認定過時的項目,或以其他方式刪除可犧牲新資產的空間。

處理儲存空間配額時,應在服務工作站開發作業中成為一環,而 Workbox 簡化整個流程,而非自行管理。不過,無論是否有 Workbox,建議您模擬自訂儲存空間配額來測試快取管理邏輯。

儲存空間用量檢視器。
Chrome 開發人員工具「應用程式」面板中的儲存空間用量檢視器。在此設定自訂儲存空間配額。

Chrome 開發人員工具的「應用程式」面板上顯示「儲存空間」子麵板,可讓您瞭解頁面目前的儲存空間配額用量。 也能讓您以 MB 為單位指定自訂配額。 啟用後,Chrome 會強制執行自訂儲存空間配額,以便進行測試。

值得一提的是,這個子麵板還會包含「清除網站資料」按鈕和一連串相關聯的核取方塊,指出使用者點選按鈕時應清除哪些內容。 這些項目包括任何開啟的 Cache 執行個體,您可以取消註冊任何正在控管該網頁的 Service Worker。

開發更容易,工作效率更高

有了開發人員的適應期,開發人員就能更有自信地工作和生產力。使用 Service Worker 的本機開發作業可能會繁雜,但不必很麻煩。 只要參考這些提示和秘訣,就能讓使用中的 Service Worker 更透明且容易預測,進而改善開發人員體驗。