使用服務工作者快取素材資源，可加快使用者再次造訪的速度，並提供離線支援。Workbox 可輕鬆完成這項操作，並預設包含在 Create React App 中。
Workbox 已內建至 Create React App (CRA)，並採用預設設定，可在每次建構時預先快取應用程式中的所有靜態資產。
這種報表有哪些優點？
Service Worker 可讓您將重要資源儲存在快取中 (「快取」)，這樣一來，當使用者第二次載入網頁時，瀏覽器就可以從服務工作處理程序中擷取這些資源，而不是向網路發出要求。這可加快重複造訪時的網頁載入速度，並在使用者離線時顯示內容。
CRA 中的 Workbox
Workbox 是一組工具，可讓您建立及維護服務 worker。在 CRA 中，workbox-webpack-plugin 已納入實際工作環境版本，只需在 src/index.js 檔案中啟用，就能在每次建構時註冊新的 Service Worker：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
serviceWorker.register();
以下是使用 CRA 建構的 React 應用程式範例，且已透過這個檔案啟用 Service Worker：
如要查看哪些素材資源正在快取，請按照下列步驟操作：
- 如要預覽網站，請按下「View App」。然後按下「Fullscreen」圖示
。 - 按下 `Control+Shift+J` 鍵 (在 Mac 上為 `Command+Option+J` 鍵) 開啟開發人員工具。
- 按一下 [網路] 分頁標籤。
- 重新載入應用程式。
您會發現，而不是顯示酬載大小，而是 Size 資料欄會顯示 (from ServiceWorker) 訊息，以指出這些資源已從服務工作站擷取。
服務工作站會快取所有靜態資產，因此請嘗試在離線時使用應用程式：
- 在開發人員工具的「網路」分頁中，啟用「離線」核取方塊，模擬離線體驗。
- 重新載入應用程式。
即使未連上網路，應用程式也能以完全相同的方式運作！
修改快取策略
Workbox 在 CRA 中使用的預設預先快取策略是「快取優先」，其中所有靜態資產都會從 Service Worker 快取中擷取，如果失敗 (例如未快取資源)，則會發出網路要求。因此即使使用者處於完整的離線狀態，仍可透過這種方式向他們提供內容。
雖然 Workbox 可支援定義快取靜態和動態資源的不同策略和方法，但除非您完全卸除，否則無法修改或覆寫 CRA 中的預設設定。不過，我們有開放提案，正在研究如何為外部 workbox.config.js 檔案新增支援功能。如此一來，開發人員只需建立單一 workbox.config.js 檔案，即可覆寫預設設定。
處理快取優先策略
先依賴服務工作者快取，再改用網路，是建構網站的絕佳方式，可讓網站在後續造訪時載入速度更快，並在某種程度上可離線運作。不過，您必須考量以下幾點：
- 如何測試服務工作的快取行為？
- 系統是否應顯示訊息，讓使用者知道自己正在查看快取內容？
美國國稅局 (CRA) 說明文件詳細說明這些要點，以及更多資訊。
結論
使用 Service Worker 預先快取應用程式中的重點資源，為使用者提供更快速的體驗，並提供離線支援功能。
- 如果您使用的是 CRA，請在
src/index.js中啟用預先設定的服務工作站。 - 如果您不是使用 CRA 建構 React 應用程式，請在建構程序中加入 Workbox 提供的其中一個程式庫，例如
workbox-webpack-plugin。 - 請留意這個 GitHub 問題，瞭解 CRA 何時會支援
workbox.config.js覆寫檔案。