在 Create React App 中使用 Workbox 进行预缓存
通过集合保持井井有条根据您的偏好保存内容并对其进行分类。

使用 Service Worker 缓存资源可以加快重复访问速度并提供离线支持。Workbox 使此操作变得简单，并且默认包含在 Create React App 中。

Houssein Djirdeh

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

查看哪些资源正在被缓存

要预览网站，请按查看应用。然后按全屏。
按 `Control+Shift+J`（在 Mac 上按 `Command+Option+J`）打开 DevTools。
点击 Network 选项卡。
重新加载应用。

您会注意到，Size 列没有显示有效负载大小，而是显示 (from ServiceWorker) 消息，表明这些资源是从 Service Worker 中检索的。

Network requests with a service worker

由于 Service Worker 缓存了所有静态资源，请尝试在离线状态下使用该应用程序

在 DevTools 的 Network 选项卡中，启用 Offline 复选框以模拟离线体验。
重新加载应用。

即使没有网络连接，应用程序的工作方式也完全相同！

修改缓存策略

CRA 中 Workbox 使用的默认预缓存策略是 cache-first，其中所有静态资源都从 Service Worker 缓存中获取，如果失败（例如，如果资源未缓存），则发出网络请求。这就是即使在完全离线状态下，内容仍然可以提供给用户的方式。

尽管 Workbox 提供了定义不同策略和方法来缓存静态和动态资源的支持，但除非您完全弹出，否则无法修改或覆盖 CRA 中的默认配置。但是，有一个开放提案探讨添加对外部 workbox.config.js 文件的支持。这将允许开发人员仅通过创建一个 workbox.config.js 文件来覆盖默认设置。

处理 cache-first 策略

首先依赖 Service Worker 缓存，然后回退到网络是构建在后续访问中加载速度更快且在某种程度上可以离线工作的站点的绝佳方法。但是，有一些事项需要考虑

Service Worker 的缓存行为应如何测试？
是否应该向用户显示消息，让他们知道他们正在查看缓存的内容？

CRA 文档详细解释了这些要点以及更多内容。

结论

使用 Service Worker 预缓存应用程序中的重要资源，以便为您的用户提供更快的体验以及离线支持。

如果您正在使用 CRA，请在 src/index.js 中启用预配置的 Service Worker。
如果您未使用 CRA 构建 React 应用程序，请将 Workbox 提供的众多库之一（例如 workbox-webpack-plugin）包含到您的构建过程中。
密切关注 CRA 何时将在此 GitHub issue 中支持 workbox.config.js 覆盖文件。