使用 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 文件中启用即可在每次构建时注册新的 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替换文件。