透過服務工作處理程序快取資產可以加快重複造訪的速度，並提供離線支援。Workbox 讓這項工作變得更簡單，而且預設是 Create React App 的一部分。
內建「Workbox」
建立 React 應用程式 (CRA)，並將所有容器預先快取
應用程式中的靜態資產
這種報表有哪些優點？
Service Worker 可讓您將重要資源儲存在快取中 (快取)。這樣一來，使用者第二次載入網頁時， 瀏覽器可以從 Service Worker 擷取這些設定檔，而不是向 網路。這樣不僅能加快回訪者的網頁載入速度， 能在使用者離線時顯示內容。
CRA 的 Workbox
Workbox 是一套工具，可讓您建立及維護服務
工作站在 CRA 中，
workbox-webpack-plugin敬上
已納入正式版，因此只需在
src/index.js 檔案，以便向每個 Pod 註冊新的 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：
如要查看系統快取哪些資產，請按照下列步驟操作：
- 如要預覽網站，請按下「查看應用程式」。然後按下
全螢幕
。 - 按下 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，請在以下位置啟用預先設定的 Service Worker：
src/index.js。 - 如果您不是使用 CRA 建構 React 應用程式，請加入
Workbox 提供
workbox-webpack-plugin等許多程式庫 建構程序 - 請留意 CRA 將支援
workbox.config.js覆寫檔案的時間 在此流程的各個階段 GitHub 問題。