使用 Service Worker 快取素材資源，可加快使用者再次造訪網頁的速度，並提供離線支援。Workbox 可簡化這項作業，且預設包含在 Create React App 中。
Workbox 內建於 Create React App (CRA)，預設設定會在每次建構時預先快取應用程式中的所有靜態資產。
這種報表有哪些優點？
Service Worker 可讓您將重要資源儲存在快取中 (預先快取)，這樣當使用者第二次載入網頁時，瀏覽器就能從 Service Worker 擷取這些資源，而不必向網路提出要求。這樣一來，使用者再次造訪時，網頁載入速度會更快，而且在離線時也能看到內容。
CRA 中的 Workbox
Workbox 是一組工具，可讓您建立及維護 Service 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)」訊息，表示這些資源是從 Service Worker 擷取。
由於 Service Worker 會快取所有靜態資產，請嘗試在離線狀態下使用應用程式：
- 在開發人員工具的「Network」分頁中，勾選「Offline」核取方塊，模擬離線體驗。
- 重新載入應用程式。
即使沒有網路連線，應用程式的運作方式也完全相同！
修改快取策略
Workbox 在 CRA 中使用的預設預先快取策略是「快取優先」，其中所有靜態資產都會從 Service Worker 快取擷取，如果失敗 (例如資源未快取)，則會發出網路要求。這樣一來，即使使用者完全處於離線狀態，仍可向他們提供內容。
雖然 Workbox 支援定義不同的策略和方法來快取靜態和動態資源，但除非您完全退出，否則無法修改或覆寫 CRA 中的預設設定。不過，目前有一項公開提案，探討如何新增外部 workbox.config.js 檔案的支援。這樣一來，開發人員只要建立單一 workbox.config.js 檔案，就能覆寫預設設定。
處理快取優先策略
先依賴 Service Worker 快取，再改用網路，是建構網站的絕佳方式，可讓網站後續載入速度更快，並在一定程度上離線運作。不過，有幾點需要考量：
- 如何測試 Service Worker 的快取行為？
- 是否應向使用者顯示訊息，告知他們正在查看快取內容？
CRA 說明文件詳細說明瞭這些重點和其他資訊。
結論
使用 Service Worker 預先快取應用程式中的重要資源，為使用者提供更快速的體驗和離線支援。
- 如果您使用 CRA，請在
src/index.js中啟用預先設定的 Service Worker。 - 如果您不是使用 CRA 建構 React 應用程式，請在建構程序中加入 Workbox 提供的眾多程式庫之一，例如
workbox-webpack-plugin。 - 請留意 CRA 何時會支援這個 GitHub 問題中的
workbox.config.js覆寫檔案。