Service Worker 部署作業的預期情況

部署 Service Worker 可能會以非預期的方式變更網站行為。由於 Workbox 可讓您輕鬆編寫及部署 Service Worker,因此完成部署後,可能會更容易忽略服務工作站在網站上存在的一些影響。

這並不代表使用 Workbox 會導致結果不佳,只是當有人不知道部署 Service Worker 時,使用 Workbox 提供的便利性可能有助於您陷入一些陷阱。

預先快取陷阱

預先快取已在這些文件中介紹,但並未完整說明這項練習如何恢復運作。如果套用預先快取至太多資產,或是服務工作站在頁面可能完成載入重要資產之前就完成註冊,則可能會遇到問題。

由於 workbox-webpack-plugin 的預設行為是指示服務工作站自動快取產生的資產,由於採用的障礙較低,因此容易遺漏,因此可能造成問題。

終端機輸出內容。
workbox-webpack-plugin. 的終端機輸出內容 在這個範例中,系統會預先快取目前專案中的 14 項資產,總量為 352 KB。

當 Service Worker 在安裝期間預先快取資產時,會有一或多個網路要求同時啟動。如果時間未及時,可能會對使用者體驗造成困擾。即使預先快取的資產數量沒有限制,即便是如此,時間還是有可能浪費資料。

敬請把握時機

如果 Service Worker 會預先快取任何項目,註冊時間就會很重要。Service Worker 通常是以內嵌 <script> 元素註冊。這表示 HTML 剖析器可能會在網頁的重要資產載入之前,找出 Service Worker 註冊代碼。

這成為令人擔心的問題服務工作站在理想情況下應具有效能中立性,而不是導致效能惡化。請使用者在網頁的 load 事件觸發時註冊 Service Worker。這樣可以降低預先快取會幹擾頁面的重要資產載入的可能性,進而加快網頁的互動速度,而不用處理後續可能不需要的資產的網路要求。

留意數據用量

無論時間為何,預先快取都需要分派網路要求。如果要預先快取的資產資訊清單沒有經過謹慎規劃,可能會導致大量廢棄物。

浪費的資料是預先快取的潛在取捨,但並非所有人都可存取高速網際網路,甚至無限的數據資料方案!預先快取時,請考慮縮減特別大型的資產,並透過執行階段快取來擷取,而非耗用高昂的假設。

Service Worker 啟動可能會延遲網路要求

Service Worker 的程序與其他網站程式碼不同。這項程序經常啟動及停止,如果服務工作站在閒置後需要處理擷取事件,瀏覽器必須先花費時間啟動 Service Worker。比起從網路 (而非網路) 提供回應的好處,那麼在處理要求之前這種額外負擔並不容易。

如果您使用的策略無法從快取提供,並且必須前往網路 (尤其是處理導覽要求時),啟動時間一律會增加一些延遲。視裝置功能和/或 CPU 壓力而定,導航要求可能會因為服務工作站啟動速度緩慢而產生明顯延遲。如果部署 Service Worker 時沒有留意此延遲情形,使用者可能會遇到意外的效能問題。

我們已透過導覽預先載入解決這個問題,但目前並非所有瀏覽器都支援這項功能。 但您仍應考量這點,我們會在這份說明文件的後續說明中說明。

快取優先策略可以恢復運作

先查詢快取的快取策略 (或「僅」諮詢快取) 對於離線存取和效能都很有幫助。不過,在某些情況下,常常會造成問題。

未版本化靜態資產的執行階段快取

一般來說, Bundler 會在檔案名稱中加入以內容型雜湊為基礎的靜態資產 (例如 styles.a4edf38c.css)。在採用快取策略的服務工作人員中,如果會先針對靜態資產諮詢快取,再使用網路優先策略處理網頁標記,由於標記中會參照更新過的資產,因為標記一律會從網路擷取,所以不應發生快取問題。

如果使用下列策略在執行階段快取未版本化的靜態資產,就會發生問題。如果網站的功能是由 app.js 提供,且使用快取優先執行階段策略,則 app.js 後來會在檔案名稱未變更的情況下更新,系統會繼續透過快取提供最初快取版本,而非更新。

解決方式是使用網路優先或過時的重新驗證等諮詢網路的策略。此外,建構工具也可以為這些資產產生預先快取資訊清單,因為 Workbox 的預先快取邏輯會讓資產保持在最新狀態。

無論如何,強烈建議您考慮管理靜態素材資源的版本,無論資產名稱或查詢字串中的雜湊都一樣。 對於針對靜態資產使用快取優先執行階段策略的服務工作站,這樣可以避免發生過時資產的問題。

Mind 儲存空間配額

不時發布 Service Worker 更新很常見,且發布更新時,名稱過期的舊版快取通常會在新 Service Worker 啟用時刪減。

但有些 Service Worker 疊代會長期存在,而快取名稱可能無法在更新時更新。此時,舊的靜態資產會在發布更新時迅速儲存在快取中。瀏覽器設定儲存空間配額,上限可能有所不同。請謹記這一點!

Workbox 可為您減少這些問題,但您可能還是超過儲存空間配額。您可以使用 Workbox 到期時間模組進一步控制快取。

不用擔心

部署 Service Worker 的過程非常簡單,然而,透過 Workbox 部署 Service Worker 需要一點時間規劃和正念冥想。這份說明文件可協助您安心地應對這些疑慮。