Angular中Service Worker阻止Facebook Pixel加载的问题求助

问题原因 #

当前你的Service Worker配置中，dataGroups里的"/**"规则会匹配所有同源请求，同时可能错误拦截外部资源请求（如Facebook Pixel的脚本），导致脚本无法正常加载；而强制刷新会绕过Service Worker的缓存策略，所以能正常加载。

解决方案 #

方案一：直接跳过Service Worker拦截

在加载Facebook Pixel的<script>标签上添加ngSkipServiceWorker属性，让Service Worker直接忽略这个脚本的请求：

<script ngSkipServiceWorker src="https://connect.facebook.net/en_US/fbevents.js"></script>

方案二：修改Service Worker配置，排除Facebook域名

编辑ngsw-config.json，在dataGroups中新增优先级更高的规则，专门处理Facebook的请求，确保不缓存且直接走网络：

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "!/favicon.ico",
          "!/index.html",
          "!/manifest.webmanifest",
          "!/*.css",
          "!/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "facebook-pixel",
      "urls": [
        "https://connect.facebook.net/**"
      ],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 0,
        "maxAge": "0s",
        "timeout": "0s"
      }
    },
    {
      "name": "api-freshness",
      "urls": ["/**"],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 200,
        "maxAge": "3d",
        "timeout": "15s"
      }
    }
  ]
}

注意：dataGroups按顺序匹配规则，所以需把Facebook的规则放在前面，避免被后面的"/**"规则覆盖。

方案三：排除导航请求（可选）

如果Pixel请求和页面导航相关，可在配置中添加navigationUrls排除对应路径：

{
  // 其他配置保持不变
  "navigationUrls": [
    "!/https://connect.facebook.net/**",
    "/**"
  ]
}

验证步骤 #

修改配置后，重新构建生产环境包并部署：

ng build --prod

测试正常刷新页面，确认Facebook Pixel脚本不再出现ERR_BLOCKED_BY_CLIENT错误。

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