在 Service Worker 中,「預先快取」是最常執行的之一,而 Workbox 可讓管理員靈活地完成這項重要工作,而無論您選擇的 Workbox 建構工具為何。在本指南中,您將學習如何使用 generateSW
和 injectManifest
預先快取資產,以及哪些方法可能最適合您的專案。
使用 generateSW
預先快取
如要在 Workbox 中預先快取資產,最簡單的方法就是使用 generateSW
。最重要的是,generateSW
的原因是,您並非自行編寫 Service Worker,而是要求 Workbox 為您產生一個 Service Worker。不過,您「可以」透過各種設定選項來影響應用程式行為。
generateSW
預設會執行不同操作,具體視您使用的建構工具而定。使用 workbox-webpack-plugin
時,您無須指定任何設定選項。根據預設,外掛程式會預先快取 Webpack 包含的所有 Webpack 的依附元件圖表,並將名為 service-worker.js
的 Service Worker 寫入 output.path
指定的目錄
另一方面,如果您使用 workbox-build
或 workbox-cli
,根據預設,系統只會預先快取從本機檔案系統讀取的 HTML、CSS 和 JavaScript 素材資源。設定時,您必須在 generateSW
設定中指定 swDest
和 globDirectory
選項,預先快取才能正常運作。您可能也想設定會影響服務 Worker 行為的其他選項,因此請詳閱說明文件。
使用 injectManifest
預先快取
使用 injectManifest
比使用 generateSW
更簡單,但是為了提供便利性更佳的選擇。其中 generateSW
會為您處理整個 Service Worker 產生的作業,injectManifest
則使用您編寫的 Service Worker 做為來源,並插入要預先快取的網址清單,同時將其餘的 Service Worker 維持不變。
使用 injectManifest
時,請負責接線預先快取邏輯。injectManifest
檢查輸入服務工作站時,會尋找特殊的 self.__WB_MANIFEST
變數,並替換成預先快取資訊清單。如果沒有這個變數,injectManifest
會擲回錯誤。
您可以使用其他設定選項來調整預先快取資訊清單中的項目清單。
並列比較
按一下下列各個分頁標籤,即可比較 generateSW
和 injectManifest
方法的使用情形:
generateSW
會產生 Service Worker,因此您只需要指定設定。以下是 workbox-build
的使用範例:
// build-sw.js
import {generateSW} from 'workbox-build';
generateSW({
swDest: './dist/sw.js',
globDirectory: './dist',
globPatterns: [
'**/*.js',
'**/*.css',
'**/*.svg'
]
});
接著,您就可以使用 Node,透過指令列建構 Service Worker:
node build-sw.js
由於 injectManifest
需要來源 Service Worker,因此基本可行的範例需要來源 Service Worker 檔案。如果您只需要預先快取,輸入的服務 Worker 可能如下所示:
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute(self.__WB_MANIFEST);
請記下 self.__WB_MANIFEST
字串。此為預留位置,Workbox 會換成預先快取資訊清單。此用途的有效設定如下:
// build-sw.js
import {injectManifest} from 'workbox-build';
injectManifest({
swSrc: './src/sw.js',
swDest: './dist/sw.js',
globDirectory: './dist',
globPatterns: [
'**/*.js',
'**/*.css',
'**/*.svg'
]
});
如果您有複雜的需求 (例如進階轉送、自訂快取策略,或是 generateSW
提供的選項未涵蓋的其他內容),建議使用 injectManifest
。
結語
在 Workbox 中預先快取,比自行管理預先快取更為簡單,尤其是在會擔心由套裝組合器編譯的版本資產時。不過,在服務工作站中,您可能會只進行預先快取。接著,您將瞭解其他技巧,例如執行階段快取。