本頁面由 Cloud Translation API 翻譯而成。

使用 Workbox 預先快取

Jeff Posnick

Service Worker 的其中一項功能是，可在執行快取時將檔案儲存到快取正在安裝 Service Worker這稱為「預先快取」。預先快取可將快取檔案提供給瀏覽器，而不必傳送到網路使用預先快取處理網站需要的重要資產例如主要頁面、樣式、備用圖片和重要指令碼

為什麼要使用 Workbox？

您可以選擇是否要使用 Workbox 進行預先快取。您可以編寫自己的程式碼在服務工作站安裝時預先快取重要資產。使用 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 欄位，其中包含本機儲存的單一檔案的內容

提供友善快取資源

將資產新增至快取只是預先快取的一環都會快取這些資產，必須回應傳出的要求。這需要 fetch 事件監聽器，可檢查哪些網址並穩定地傳回這些快取的回應建立多個網路層因為 Service Worker 會檢查快取是否含有回應 (在網路前方使用) 稱為 快取優先策略。

有效率地更新

預先快取的資訊清單可完整呈現所需的快取 state;如果資訊清單中的網址/修訂版本組合有所變更，Service Worker 已知先前的快取項目已失效，且需要已更新。您只需傳送一項網路要求 (由做為 Service Worker 的一部分更新檢查，，判斷需要重新整理哪些友善快取網址。

友善快取資源更新

隨著您持續發布新版網頁應用程式，您必須更新先前預先快取的網址、預先快取新資產，並刪除過時內容項目。只要持續產生完整的友善快取資訊清單您重新建構網站，資訊清單將做為「可靠資料來源」適用於隨時進行預先快取狀態

假如已有網址包含新的修訂版本欄位，或已有網址資訊清單就會對 Service Worker 進行更新完成後，更新作業必須屬於 install敬上和 activate。事件處理常式。例如，假設您對網站做了某些變更最新的預先快取資訊清單可能會進行以下動作變更：

[{
  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 的建構工具會回報友善快取中的項目數量清單，以及預載酬載的總大小。

回訪者造訪您網頁應用程式的長期效益，因為一開始預先快取，因為這樣可避免網路快速支付費用讓軟體應用程式得以逐步節省頻寬