使用 Service Worker 缓存资源可以加快重访速度并提供离线支持。Workbox 可轻松实现此目的,并且默认包含在 Create React App 中。
Workbox
内置于 Create React App (CRA) 中,默认配置会在每次构建时预缓存应用中的所有静态资源。
为什么搜索渠道报告非常实用?
借助服务工作器,您可以将重要资源存储在其缓存中(预缓存),这样当用户第二次加载网页时,浏览器就可以从服务工作器检索这些资源,而无需向网络发出请求。这会加快网页在用户重复访问时加载的速度,并能够在用户离线时显示内容。
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)
消息,而不是负载大小,这表示这些资源是从服务工件中检索到的。
由于服务工作器会缓存所有静态资源,因此请尝试在离线状态下使用应用:
- 在 DevTools 的 Network 标签页中,启用 Offline 复选框以模拟离线体验。
- 重新加载应用。
应用的运作方式完全相同,即使没有网络连接也能正常运行!
修改缓存策略
CRA 中 Workbox 使用的默认预缓存策略是缓存优先,其中所有静态资源都会从 Service Worker 缓存中提取,如果失败(例如,资源未缓存),则发出网络请求。这样,即使用户处于完全离线状态,系统也仍可向其提供内容。
虽然 Workbox 支持定义缓存静态和动态资源的不同策略和方法,但除非您完全推出,否则无法修改或覆盖 CRA 中的默认配置。不过,有一个待处理的提案,旨在探索添加对外部 workbox.config.js
文件的支持。这样,开发者只需创建一个 workbox.config.js
文件即可替换默认设置。
处理缓存优先策略
先依赖 Service Worker 缓存,然后回退到网络,这是构建网站的绝佳方式,可让网站在用户后续访问时加载更快,并在一定程度上支持离线使用。不过,您需要考虑以下几点:
- 如何测试服务工作器的缓存行为?
- 是否应向用户显示消息,告知他们正在查看缓存的内容?
CRA 文档详细介绍了这些要点及更多信息。
总结
使用服务工件预缓存应用中的重要资源,为用户提供更快的体验并提供离线支持。
- 如果您使用的是 CRA,请在
src/index.js
中启用预配置的服务工件。 - 如果您不是使用 CRA 构建 React 应用,请将 Workbox 提供的众多库(例如
workbox-webpack-plugin
)之一添加到构建流程中。 - 请留意此 GitHub 问题,了解 CRA 何时支持
workbox.config.js
替换文件。