雖然 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
執行個體。這類測試的常式為:
- 開啟私密瀏覽視窗。
- 前往註冊 Service Worker 的頁面。
- 確認 Service Worker 是否如預期運作。
- 關閉無痕式視窗。
- 樂趣無限循環
透過這項程序,您即可充分模擬 Service Worker 生命週期。
Chrome 開發人員工具應用程式面板中提供的其他測試工具 可以透過某些方式修改 Service Worker 的生命週期。
應用程式面板有個標示為 Service Workers 的子麵板, 顯示目前頁面的有效 Service Worker。 每個運作中的 Service Worker 都可以手動更新,甚至可以完全取消註冊。 此外,畫面頂端有三個切換按鈕,可協助進行開發。
- 離線會模擬離線情況。這有助於測試運作中的服務工作人員是否正在提供離線內容。
- 重新載入時更新:切換鈕後,每次重新載入網頁時,都會重新擷取並取代目前的 Service Worker。
- 略過網路:切換時,系統會規避 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 開發人員工具中的「應用程式」面板會有「儲存空間」子麵板,可讓您瞭解頁面目前的儲存空間配額使用量。 也能以 MB 為單位指定自訂配額。 生效後,Chrome 會強制執行自訂儲存空間配額,以便進行測試。
除此之外,這個子麵板還包含一個「清除網站資料」按鈕,以及一系列相關聯的核取方塊,供使用者按一下按鈕時應清除哪些項目。
這些項目包括任何開啟的 Cache
執行個體,以及能夠取消註冊控管網頁的任何執行中 Service Worker。
開發更輕鬆,工作效率更高
開發人員可以因為缺乏彈性的工作模式,更有信心地完成工作,進而提升效率。 由服務工作人員進行本機開發可能有些複雜,但不必太痛苦。 有了這些提示與秘訣,與活躍的服務工作人員進行開發作業應該更加透明且可預測。 進而提升開發人員體驗