使用 Service Worker 缓存资源可以加快重复访问速度并提供离线支持。Workbox 使这项操作变得简单，并且默认包含在 Create React App 中。
Workbox 内置于 Create React App (CRA) 中，其默认配置在每次构建时都预缓存应用中的所有静态资源。
为什么搜索渠道报告非常实用？
借助 Service Worker，您可以将重要资源存储在其缓存中（预缓存），这样当用户第二次加载网页时，浏览器可以从 Service Worker 检索这些资源，而无需向网络发出请求。这样可以提高重复访问时的网页加载速度，并在用户离线时显示内容。
CRA 中的 Workbox
Workbox 是一组工具，可用于创建和维护 Service Worker。在 CRA 中，workbox-webpack-plugin 已包含在正式版 build 中，只需在 src/index.js 文件中启用它，即可为每个 build 注册一个新的 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 会缓存所有静态资源，因此请尝试在离线状态下使用应用：
- 在开发者工具的网络标签页中，启用离线复选框以模拟离线体验。
- 重新加载应用。
即使没有网络连接，应用也会以完全相同的方式工作！
修改缓存策略
CRA 中 Workbox 使用的默认预缓存策略是缓存优先：从 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）添加到构建流程中。 - 请留意此 GitHub 问题中的 CRA 何时支持
workbox.config.js替换文件。