改善 Service Worker 的開發體驗

雖然 Service Worker 生命週期可確保安裝與更新程序符合預期, 它可以讓本機開發週期變得更加複雜。

在一般的本機開發週期中,開發人員會將變更儲存到文字編輯器中的檔案, 然後切換到瀏覽器驗證變更,系統就會重複此程序。 當服務工作處理程序混合使用時,這個週期大致上會相同。 但也可能與開發人員預期的不同。

本機開發的例外狀況

一般來說,Service Worker API 僅適用於透過 HTTPS、 但有些例外狀況下可透過 HTTP 使用。 有一個明顯的例外是透過 localhost 提供的網頁,這種網頁很適合本機開發。

不過,一般而言,開發人員不必在 localhost 的 「hosts file」。 如果在本機開發環境中有多個專案需要不同主機名稱,則此為必填屬性。 在這類情況下,佈建自行簽署的憑證。

更便利的解決方法,是指示瀏覽器將 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 最有效的方式是依賴私密瀏覽視窗 (例如 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. 離線會模擬離線情況。這有助於測試運作中的服務工作人員是否正在提供離線內容。
  2. 重新載入時更新:切換鈕後,每次重新載入網頁時,都會重新擷取並取代目前的 Service Worker。
  3. 略過網路:切換時,系統會規避 Service Worker 的 fetch 事件中的任何程式碼,並一律從網路擷取內容。

這些實用的切換鈕特別實用,特別是略過網路。 當您使用有效的 Service Worker 開發專案時,這項功能就非常實用 也希望在沒有 Service Worker 的情況下,確保體驗正常運作。

Firefox 的開發人員工具中有類似的應用程式面板 但功能僅限顯示已安裝的 Service Worker 以及能夠手動取消註冊目前頁面上任何運作中的 Service Worker。 這同樣實用,但在本機開發週期中需要更多手動操作。

Shift 並重新載入

使用運作中的服務工作站在本機開發時,不需要在重新整理時更新略過網路提供的功能,您也可以按住 Shift 鍵並按下重新整理按鈕。

這就是所謂的「強制重新整理」,會略過網路的 HTTP 快取。 當 Service Worker 處於運作狀態時,強制重新整理也會完全略過 Service Worker。

假如無法確定特定快取策略是否如預期運作,這項功能就非常實用 從網路擷取所有內容,就能比較服務工作處理程序的相關行為,對您很有幫助。 更棒的是,這是指定行為,因此支援 Service Worker 的所有瀏覽器都會觀察到。

檢查快取內容

如果不檢查快取,很難確認快取策略是否正常運作。 沒問題,系統「可以」檢查程式碼中的快取。 但只要視覺工具更適合該工作,這個程序就會包含偵錯工具和/或 console 陳述式。 Chrome 開發人員工具中的「應用程式」面板提供子麵板,可用來檢查 Cache 執行個體的內容。

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

這個子麵板提供下列功能,讓 Service Worker 的開發作業變得更簡單:

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

透過這個圖形化使用者介面,您可以更輕鬆地檢查 Service Worker 快取,瞭解項目是否已從 Service Worker 快取新增、更新或移除。Firefox 提供本身的快取檢視器,但功能類似,不過仍處於獨立的「儲存空間」面板。

模擬儲存空間配額

在含有大量靜態素材資源 (例如高解析度圖片) 的網站上 可能導致儲存空間配額用盡發生這種情況時 瀏覽器會從快取中移除過時的項目,或為犧牲空間來存放新的資產。

處理儲存空間配額應是 Service Worker 開發作業的一部分 和 Workbox 能簡化作業流程 不必親自管理, 無論是否使用 Workbox,模擬自訂儲存空間配額來測試快取管理邏輯,或許會有幫助。

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

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

除此之外,這個子麵板還包含一個「清除網站資料」按鈕,以及一系列相關聯的核取方塊,供使用者按一下按鈕時應清除哪些項目。 這些項目包括任何開啟的 Cache 執行個體,以及能夠取消註冊控管網頁的任何執行中 Service Worker。

開發更輕鬆,工作效率更高

開發人員可以因為缺乏彈性的工作模式,更有信心地完成工作,進而提升效率。 由服務工作人員進行本機開發可能有些複雜,但不必太痛苦。 有了這些提示與秘訣,與活躍的服務工作人員進行開發作業應該更加透明且可預測。 進而提升開發人員體驗