Workbox 预缓存多页时缓存失效：原因、解决方案与最佳实践

## Workbox 预缓存多页问题：缓存生成但找不到匹配项

介绍

使用 Workbox 预缓存多页时，你可能遇到一个问题，即虽然缓存已生成，但在离线模式下访问这些页面时，Workbox 却无法在缓存中找到它们。本文将深入探究这个问题，提供解决方法，并分享一些最佳实践。

问题原因

导致此问题的常见原因有几个：

• 预缓存配置不正确： Workbox 的 preCacheAndRoute 配置中的 revision 值应设置为文件的哈希值或其他唯一标识符。
• 路由策略不正确： 使用 NetworkFirst 策略会优先从网络获取文件，而不是从缓存中。应使用 CacheFirst 策略。
• 缺少 Workbox 模块引用： 需要在 service-worker.js 中明确导入所需的 Workbox 模块，如 registerRoute 和 precacheAndRoute。

解决方案

1. 正确配置预缓存：

precacheAndRoute([
  // ... 页面 URL
], {
  revision: 'your-unique-identifier'
});

2. 调整路由策略：

registerRoute(
  ({url}) => url.pathname === '/',
  new CacheFirst({
    cacheName: 'page-cache'
  })
);

3. 引入 Workbox 模块：

import {registerRoute, precacheAndRoute} from 'workbox-routing/registerRoute.mjs';

最佳实践

• 使用 Workbox 的 expiration 插件管理缓存文件的使用寿命。
• 为已缓存的文件提供正确的响应标头（例如 Cache-Control: max-age=31536000）。
• 使用 Workbox 的开发者工具 (workbox-devtools) 检查缓存并调试问题。

常见问题解答

1. 为什么需要设置 revision 值？

revision 值用于生成文件的唯一标识符，确保缓存中文件的版本与当前应用程序中的版本匹配。

2. 为什么优先使用 CacheFirst 策略？

CacheFirst 策略确保在离线模式下也能访问缓存的文件，而 NetworkFirst 策略会优先尝试从网络中获取文件，即使它已经在缓存中。

3. 为什么需要导入 Workbox 模块？

Workbox 模块提供了预缓存和路由功能，如果不导入这些模块，Workbox 将无法正常工作。

4. 如何检查缓存？

可以使用 Workbox 的开发者工具 (workbox-devtools) 检查缓存。它提供了一个可视化界面来查看缓存的内容和详细信息。

5. 如何管理缓存文件的生命周期？

可以使用 Workbox 的 expiration 插件管理缓存文件的生命周期。它允许你设置缓存文件的过期时间或使用规则来删除旧文件。

总结

预缓存多页时，通过正确配置 Workbox、使用适当的路由策略并遵循最佳实践，你可以确保离线时也能访问这些页面。解决本文中概述的问题将帮助你构建一个可靠且离线友好的 PWA。