通过 Service Worker 缓存资源可以加快重复访问速度并提供离线支持。Workbox 可简化此操作，默认情况下包含在 Create React 应用中。
Workbox 内置于
使用默认配置创建 React 应用 (CRA)，以预缓存所有
静态资源。
为什么搜索渠道报告非常实用？
借助 Service Worker，您可以将重要资源存储在其缓存中 (预先缓存)，以便在用户第二次加载网页时， 浏览器可以从 Service Worker 检索它们，而不必向 网络。这样可以提高重复访问的网页加载速度， 能够在用户离线时显示内容。
CRA 中的 Workbox
Workbox 包含一系列工具，用于创建和维护服务
worker。在 CRA 中，
workbox-webpack-plugin
已包含在正式版 build 中，只需在
src/index.js 文件，以便向每个
build：
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：
如需查看正在缓存哪些资源，请执行以下操作：
- 如需预览网站，请按查看应用。然后按
全屏
。 - 按 `Ctrl+Shift+J`（在 Mac 上，按 `Command+Option+J`）打开开发者工具。
- 点击网络标签页。
- 重新加载应用。
您会发现，Size 列不是显示载荷大小，而是显示
一条 (from ServiceWorker) 消息，表明已检索到这些资源
从 Service Worker 加载。
由于 Service Worker 会缓存所有静态资产，因此请尝试使用应用 离线时：
- 在开发者工具的 Network 标签页中，选中 Offline 复选框以 模拟离线体验。
- 重新加载应用。
应用的工作方式完全相同，即使不连接网络也无妨 连接！
修改缓存策略
在 CRA 中，Workbox 使用的默认预缓存策略是缓存优先，其中 所有静态资源都将从 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 问题。