Angular PWA未配置API缓存时请求仍走Service Worker如何规避

问题原因 #

你当前仅配置了静态资源缓存的assetGroups规则，但Angular Service Worker默认会拦截所有同域GET请求，即便没有匹配到缓存规则，请求也会先经过Service Worker做缓存判断，才会转发到网络，这就是你观测到API请求走Service Worker的原因。

解决方案 #

方案1：配置ignoredUrls全局忽略API请求

直接在ngsw-config.json顶层添加ignoredUrls字段，填入你需要忽略的API路径正则即可，Service Worker会直接跳过对这些路径的处理，示例配置如下（假设所有API都以/api/开头）：

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "ignoredUrls": [
    "^/api/.*"
  ],
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

说明：ignoredUrls支持正则匹配，^代表匹配路径开头，你可以根据自己的API路径规则调整匹配规则，跨域API可以直接填写完整域名的正则规则。

方案2：指定单个请求跳过Service Worker

如果只有部分零散请求需要跳过Service Worker，可以在请求头中添加Ngsw-Skip: true，Angular Service Worker识别到这个请求头后会直接绕过处理，走正常网络请求，Angular HTTP请求示例如下：

this.http.get('/api/xxx', {
  headers: {
    'Ngsw-Skip': 'true'
  }
})

生效验证 #

修改配置后需要重新构建项目，然后在浏览器开发者工具的Application面板里注销旧的Service Worker，清除缓存后刷新页面测试即可。

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