使用 Workbox 預先快取

Service Worker 的其中一項功能是,在安裝 Service Worker 時,將檔案儲存到快取中。這稱為「預先快取」。 預先快取可讓您在不流入網路的情況下,為瀏覽器提供快取檔案。針對網站需要的重要素材資源,即使離線,建議您進行預先快取:主頁面、樣式、備用圖片和重要指令碼。

為什麼要使用 Workbox?

您可以選擇是否要使用 Workbox 進行預先快取。您可以自行撰寫程式碼,在安裝 Service Worker 時預先快取重要資產。使用 Workbox 的主要優點是可以立即控管版本。使用 Workbox 更新預先快取資產的麻煩,比您自行管理這些檔案的版本管理與更新要來得更低。

預先快取資訊清單

快取是由一份網址清單,以及各網址的相關版本管理資訊驅動。這些資訊統稱為預先快取資訊清單。資訊清單是針對特定網頁應用程式版本需要預先快取的所有內容狀態的「可靠來源」。預先快取資訊清單,格式為 Workbox 使用的格式,如下所示:

[{
  url: 'app.abcd1234.js'
}, {
  url: 'offline.svg',
  revision: '7836745f'
}, {
  url: 'index.html',
  revision: '518747aa'
}]

安裝 Service Worker 後,系統會針對列出的三個網址,在快取儲存空間中建立三個快取項目。第一個資產的網址中已包含版本管理資訊 (app 是實際檔案名稱,.abcd1234 則在副檔名 .js 之前) 包含版本管理資訊。Workbox 的建構工具可以偵測這個問題並排除修訂版本欄位。其他兩個資產的網址不含任何版本管理資訊,因此 Workbox 的建構工具會建立單獨的 revision 欄位,其中包含本機檔案內容的雜湊。

提供友善快取資源

將資產新增至快取只是預先快取的一環,資產快取之後,他們必須回應傳出要求。在這種情況下,您需要在 Service Worker 中使用 fetch 事件監聽器,查看哪些網址已預先快取,並穩定傳回這些快取的回應,不必在過程中略過網路。由於 Service Worker 會檢查快取是否含有回應 (並在網路前面使用回應),因此稱為「快取優先策略」

有效率地更新

預先快取資訊清單可明確呈現預期的快取狀態;如果資訊清單中的網址/修訂版本組合有所變更,服務工作處理程序會「知道」先前的快取項目已失效且需要更新。系統只會接受單一網路要求,而該要求是由瀏覽器在 Service Worker 的更新檢查中自動提出,用來判斷需要重新整理哪些預先快取網址。

友善快取資源更新

逐步發布新版網頁應用程式時,需要將先前預先快取的網址保持在最新狀態、預先快取新資產,並刪除過時項目。只要您每次重新建構網站時都持續產生完整的預快取資訊清單,該資訊清單就會隨時做為預快取狀態的「可靠來源」。

如果現有的網址有新的修訂版本欄位,或是已從資訊清單中新增或捨棄任何網址,即代表服務工作站需要執行更新,做為 installactivate 事件處理常式的一部分。例如,假如您對網站做出了部分變更並重新建構,最新的預先快取資訊清單可能會進行下列變更:

[{
  url: 'app.ffaa4455.js'
}, {
  url: 'offline.svg',
  revision: '7836745f'
}, {
  url: 'index.html',
  revision: '518747aa'
}]

這些變更都會通知 Service Worker 需要建立新要求,才能更新之前快取的項目 ('offline.svg''index.html') 以及快取新網址 ('app.ffaa4455.js'),以及刪除不再使用的網址 ('app.abcd1234.js')。

真正的「應用程式商店」安裝體驗

預先快取的另一項優點是,您可以為使用者提供原本難以在「應用程式商店」安裝外完成的體驗。使用者首次造訪您網頁應用程式的任何頁面後,即可預先快取「所有」需要顯示網頁應用程式檢視畫面的「任何」網址,而不必等到使用者每次進入個別檢視畫面。

使用者安裝應用程式時,會期望每個部分都能快速顯示,而不只是他們過去的檢視畫面。預先快取可為網頁應用程式提供相同的體驗。

應該預先快取哪些資產?

請返回找出正在載入的內容指南,進一步瞭解哪些網址最適合預先快取。一般而言,所有可能早載入的 HTML、JavaScript 或 CSS 都是預先快取,因此顯示特定網頁的基本結構至關重要。

建議您避免預先快取會在稍後載入的媒體或其他資產 (除非網頁應用程式的功能需要這麼做)。請改用執行階段快取策略,確保這些資產都是以即付即用的方式快取。

請注意,預先快取涉及在使用者的裝置上會使用網路頻寬和儲存空間 (就像從應用程式商店安裝應用程式一樣)。身為開發人員,您可以自行決定是否要預先快取,避免產生過多的預先快取資訊清單。

Workbox 的建構工具會顯示預先快取資訊清單中的項目數量,以及友善快取酬載的總大小。

重複訪客造訪您的網頁應用程式,長期下來就受益於預先快取費用,因為這樣可避免網路隨時間快速產生節省的頻寬。