Create React App v4生成的PWA如何实现外部API及图片缓存

你只需要修改项目内的src/service-worker.ts文件即可完成配置，该文件默认基于Workbox实现服务 worker 能力，具体配置步骤如下：

1. 导入依赖模块 #

首先在service-worker.ts文件头部导入需要的Workbox模块（部分模块可能默认已经导入，缺失的补全即可）：

import { registerRoute } from 'workbox-routing';
import { CacheFirst, StaleWhileRevalidate, NetworkFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';

这些模块CRA已经内置，不需要额外安装npm依赖。

2. 配置图片资源缓存 #

我们使用CacheFirst（缓存优先）策略处理图片资源，这类资源更新频率低，优先读缓存能大幅提升加载速度：

// 匹配并缓存图片资源
registerRoute(
  // 匹配规则可根据需求调整，比如限定特定CDN域名：({url}) => url.origin === 'https://你的图片CDN域名' && request.destination === 'image'
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'external-images-cache',
    plugins: [
      // 仅缓存请求成功的资源
      new CacheableResponsePlugin({
        statuses: [200],
      }),
      // 配置缓存过期规则，避免占用过多存储空间
      new ExpirationPlugin({
        maxEntries: 100, // 最多缓存100张图片
        maxAgeSeconds: 30 * 24 * 60 * 60, // 单张图片缓存有效期30天
      }),
    ],
  })
);

3. 配置外部API接口缓存 #

根据接口的实时性要求选择对应的缓存策略即可：

• StaleWhileRevalidate：优先返回缓存内容，后台异步请求新数据更新缓存，适合非强实时性的接口
• NetworkFirst：优先走网络请求，网络异常时返回缓存内容，适合对数据准确性有要求、同时需要兼容离线场景的接口

配置代码示例：

// 匹配并缓存API接口
registerRoute(
  // 匹配规则按需调整，比如匹配所有/api开头的路径或者特定API域名
  ({ url }) => url.pathname.startsWith('/api/') || url.origin === 'https://你的业务接口域名',
  // 这里以StaleWhileRevalidate为例，可替换为上面提到的其他策略
  new StaleWhileRevalidate({
    cacheName: 'api-response-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [200], // 仅缓存请求成功的GET接口，默认不缓存POST请求
      }),
      new ExpirationPlugin({
        maxEntries: 50, // 最多缓存50条接口结果
        maxAgeSeconds: 5 * 60, // 接口缓存有效期5分钟
      }),
    ],
  })
);

4. 生效验证 #

• 开发环境下service worker默认不启动，修改完成后执行npm run build打生产包，部署后验证
• 打开Chrome DevTools，进入Application > Service Workers可查看服务 worker 注册状态，进入Cache Storage可查看已经生成的缓存条目

注意事项 #

• 不要缓存用户信息、支付相关等敏感接口，避免出现数据安全问题或业务逻辑错误
• 缓存匹配规则不要设置过宽，避免缓存不需要的资源导致异常
• 项目版本迭代需要清除旧缓存时，修改cacheName的后缀即可，Workbox会自动处理旧缓存的删除

内容的提问来源于stack exchange，提问作者Lucifer