在“使用 Workbox 创建 React 应用”中进行预缓存

使用 Service Worker 缓存资源可以加快重访速度并提供离线支持。Workbox 可轻松实现此目的,并且默认包含在 Create React App 中。

Workbox 内置于 Create React App (CRA) 中,默认配置会在每次构建时预缓存应用中的所有静态资源。

使用 Service Worker 的请求/响应

为什么搜索渠道报告非常实用?

借助服务工作器,您可以将重要资源存储在其缓存中(预缓存),这样当用户第二次加载网页时,浏览器就可以从服务工作器检索这些资源,而无需向网络发出请求。这会加快网页在用户重复访问时加载的速度,并能够在用户离线时显示内容。

CRA 中的 Workbox

Workbox 是一组工具,可用于创建和维护服务工作器。在 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 应用示例:

如需查看正在缓存的资源,请执行以下操作:

  • 如需预览网站,请按 View App(查看应用)。然后按 Fullscreen(全屏)全屏
  • 按 `Control+Shift+J`(在 Mac 上为 `Command+Option+J`)打开 DevTools。
  • 点击网络标签页。
  • 重新加载应用。

您会发现,Size 列显示的是 (from ServiceWorker) 消息,而不是负载大小,这表示这些资源是从服务工件中检索到的。

使用 Service Worker 进行网络请求

由于服务工作器会缓存所有静态资源,因此请尝试在离线状态下使用应用:

  1. 在 DevTools 的 Network 标签页中,启用 Offline 复选框以模拟离线体验。
  2. 重新加载应用。

应用的运作方式完全相同,即使没有网络连接也能正常运行!

修改缓存策略

CRA 中 Workbox 使用的默认预缓存策略是缓存优先,其中所有静态资源都会从 Service Worker 缓存中提取,如果失败(例如,资源未缓存),则发出网络请求。这样,即使用户处于完全离线状态,系统也仍可向其提供内容。

虽然 Workbox 支持定义缓存静态和动态资源的不同策略和方法,但除非您完全推出,否则无法修改或覆盖 CRA 中的默认配置。不过,有一个待处理的提案,旨在探索添加对外部 workbox.config.js 文件的支持。这样,开发者只需创建一个 workbox.config.js 文件即可替换默认设置。

处理缓存优先策略

先依赖 Service Worker 缓存,然后回退到网络,这是构建网站的绝佳方式,可让网站在用户后续访问时加载更快,并在一定程度上支持离线使用。不过,您需要考虑以下几点:

  • 如何测试服务工作器的缓存行为?
  • 是否应向用户显示消息,告知他们正在查看缓存的内容?

CRA 文档详细介绍了这些要点及更多信息。

总结

使用服务工件预缓存应用中的重要资源,为用户提供更快的体验并提供离线支持。

  1. 如果您使用的是 CRA,请在 src/index.js 中启用预配置的服务工件。
  2. 如果您不是使用 CRA 构建 React 应用,请将 Workbox 提供的众多库(例如 workbox-webpack-plugin)之一添加到构建流程中。
  3. 请留意此 GitHub 问题,了解 CRA 何时支持 workbox.config.js 替换文件。