Angular Service Worker缓存API请求实现离线应用问题排查

看起来你在配置Angular Service Worker实现离线API缓存时遇到了用户请求无法解析的问题，结合你的配置和场景，我整理了几个常见的排查点和解决方法：

1. 先确认请求是否被正确缓存 #

首先得搞清楚在线状态下这个用户请求有没有被Service Worker缓存下来：

• 打开Chrome DevTools，切换到Application标签页，找到Cache Storage，查看名为api的缓存组里有没有对应的请求条目。
• 如果没有，说明请求根本没被缓存，离线自然拿不到。这时候要检查：
  • 请求的URL是否完全匹配https://x.com/**？比如有没有遗漏子路径、或者带了特殊的query参数导致匹配失败？
  • 响应的Cache-Control头是否禁止缓存？比如如果响应头里有no-store、private这类指令，Angular Service Worker会默认遵守，不会缓存该响应。你可以在Network标签页查看该请求的Response Headers确认。

2. 处理用户专属请求的认证头问题 #

用户相关的API通常会携带Authorization这类认证头，而Angular Service Worker默认不会缓存带有这类敏感头的请求，这是出于安全考虑（避免缓存用户专属数据）。如果你的请求确实带了这类头，需要在配置里明确允许缓存：

{
  "name": "api",
  "urls": ["https://x.com/**"],
  "cacheConfig": {
    "strategy": "performance",
    "maxSize": 20,
    "maxAge": "365d",
    "timeout": "5s",
    "allowedHeaders": ["Authorization"]
  }
}

⚠️ 注意：缓存带认证头的响应存在一定安全风险，确保只有当前用户能访问到本地缓存（Service Worker的缓存是浏览器级别的，每个用户独立，相对安全，但仍需谨慎）。

3. 处理动态Query参数的缓存问题 #

如果你的用户请求带有动态的query参数（比如用户ID、临时token），默认情况下Service Worker会把query参数作为缓存键的一部分，这意味着不同的query会生成不同的缓存条目。如果离线时请求的query和在线时不一致，就找不到缓存。

这种情况可以添加ignoreSearch: true来忽略query参数，只按路径缓存：

{
  "name": "api",
  "urls": ["https://x.com/**"],
  "cacheConfig": {
    "strategy": "performance",
    "maxSize": 20,
    "maxAge": "365d",
    "timeout": "5s",
    "ignoreSearch": true,
    "allowedHeaders": ["Authorization"]
  }
}

4. 确认请求方法是否支持缓存 #

Service Worker只能缓存GET请求，如果你用户相关的API是POST、PUT这类写操作请求，离线时肯定无法处理——因为这些操作需要和服务器交互。这种情况你需要考虑使用Background Sync API，让请求在恢复网络后再执行。

5. 确保Service Worker配置已生效 #

有时候修改配置后，旧的Service Worker还在运行，导致新配置不生效：

• 在DevTools的Application > Service Workers里，点击Update按钮强制更新，或者用Ctrl+Shift+R硬刷新页面，让新的Service Worker激活。

按照这些步骤排查后，应该能解决离线时用户API请求无法解析的问题。

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