使用 Workbox 預先快取

服務工作站的一項功能,就是在服務工作站安裝時,將檔案儲存至快取。這就是所謂的「預先快取」。 預先快取可讓瀏覽器在未連上網路的情況下,提供快取檔案。針對網站即使在離線時也需要的重要素材資源,使用預先快取功能,例如主要網頁、樣式、備用圖片和必要指令碼。

您可以選擇是否要使用 Workbox 進行預快取。您可以自行編寫程式碼,在服務工作者安裝時預先快取重要資產。使用 Workbox 的主要優勢在於其即用型版本控制功能。相較於自行管理這些檔案的版本控制和更新作業,使用 Workbox 更新預快取的素材資源,會讓您遇到的麻煩減少許多。

預先快取資訊清單

預先快取功能會根據網址清單和每個網址的相關版本資訊運作。這些資訊合稱為預快取資訊清單。資訊清單是「可靠來源」,可用於表示特定網頁應用程式版本中預先快取的所有內容狀態。預先快取資訊清單的格式與 Workbox 所使用的格式類似,如下所示:

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

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

提供預先快取的資源

將素材資源加入快取只是預先快取作業的一部分,因為素材資源快取後,就必須回應傳出的要求。這需要在服務工作者中加入 fetch 事件事件監聽器,以便檢查哪些網址已預先快取,並可靠地傳回這些快取的回應,在過程中略過網路。由於 Service Worker 會檢查快取的回應 (並在網路之前使用這些回應),因此這稱為快取優先策略

有效更新

預先快取資訊清單會提供預期快取狀態的確切呈現方式;如果資訊清單中的網址/修訂版本組合有所變更,服務工作程式會知道先前的快取項目已失效,需要更新。這項作業只需要單一網路要求,瀏覽器會在服務工作者更新檢查時自動提出這項要求,以判斷需要重新整理哪些已快取的網址。

預先快取資源的更新

隨著時間推移,您需要發布新版的網路應用程式,並確保先前快取的網址保持最新狀態、快取新的素材資源,以及刪除過時的項目。只要每次重建網站時,您都會繼續產生完整的預先快取資訊清單,該資訊清單就會成為任何時間點預先快取狀態的「可靠來源」。

如果現有網址含有新的修訂版欄位,或是資訊清單中新增或刪除任何網址,這表示 Service Worker 需要執行更新,做為 installactivate 事件處理常式的一環。舉例來說,如果您對網站進行一些變更並重新建構網站,最新的預快取資訊清單可能會經歷以下變更:

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

每項變更都會告知服務工作者,需要建立新要求來更新先前快取的項目 ('offline.svg''index.html') 和快取新網址 ('app.ffaa4455.js'),以及刪除不再使用的網址 ('app.abcd1234.js')。

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

預先快取的另一個好處是,您可以為使用者提供「應用程式商店」安裝程序以外的體驗,使用者第一次造訪您的網路應用程式中的任何網頁時,您可以預先快取所有網址,以便提前顯示網路應用程式的任何檢視畫面,而無須等到使用者造訪個別檢視畫面時才顯示。

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

哪些素材資源應預先快取?

請參閱「找出正在載入的內容」指南,瞭解哪些網址最適合預先快取。一般規則是預先快取任何在前端載入的 HTML、JavaScript 或 CSS,這些資源對於顯示特定網頁的基本結構至關重要。

建議您避免預先快取媒體或其他稍後才會載入的素材資源 (除非對網頁應用程式的功能至關重要)。請改用執行階段快取策略,確保這些素材資源會在使用時快取。

請務必記住,預先快取會使用使用者裝置上的網路頻寬和儲存空間 (就像從應用程式商店安裝應用程式一樣)。開發人員必須謹慎預先快取,避免產生龐大的預先快取資訊清單。

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

網站應用程式的回訪者長期下來會從預先快取的初始成本中受益,因為預先快取可快速避免網路連線,並在一段時間內節省頻寬,因此能快速回本。