Angular 17中首次加载时Service Worker无法发起请求问题

问题定位 #

报错Http failure during parsing且状态码为200，说明响应状态正常，但返回的内容不是有效的JSON格式。结合首次加载失败、刷新正常的现象，核心原因是首次加载时Service Worker（SW）未正确处理API请求，返回了非预期内容（比如缓存的离线HTML、空响应或旧缓存数据）。

排查与修复步骤 #

1. 验证首次请求的响应体 #

打开浏览器DevTools → Network面板，筛选/movies请求：

• 查看首次加载时的Response标签，确认内容是否为合法的JSON。如果是HTML或其他非JSON内容，说明SW的拦截逻辑存在问题。

2. 调整Service Worker的Fetch拦截策略 #

确保本地API请求走网络优先策略，避免SW返回错误的缓存内容：

self.addEventListener('fetch', (event) => {
  // 匹配本地API路径
  if (event.request.url.includes('/movies')) {
    event.respondWith(
      // 优先请求网络
      fetch(event.request)
        .then(networkRes => {
          // 可选：将有效响应更新到缓存
          caches.open('api-cache-v1').then(cache => {
            cache.put(event.request, networkRes.clone());
          });
          return networkRes;
        })
        // 网络失败时再尝试读取缓存
        .catch(err => caches.match(event.request))
    );
  } else {
    // 其他资源沿用原有缓存策略
    // ...你的现有SW逻辑
  }
});

3. 确保Service Worker真正控制当前页面 #

navigator.serviceWorker.ready仅表示SW注册完成，不代表它已经激活并接管页面。补充监听controllerchange事件，确保SW完全控制后再发起请求：

import { Observable, forkJoin, from } from 'rxjs';
import { switchMap } from 'rxjs/operators';

// ...

getMovies(): Observable<Movie[]> {
  // 等待SW注册就绪
  const swReady$ = from(navigator.serviceWorker.ready);
  // 等待SW接管当前页面
  const swControlled$ = new Observable(observer => {
    // 若SW已控制页面，直接完成
    if (navigator.serviceWorker.controller) {
      observer.next();
      observer.complete();
    } else {
      // 监听SW接管事件
      const onControllerChange = () => {
        observer.next();
        observer.complete();
        navigator.serviceWorker.removeEventListener('controllerchange', onControllerChange);
      };
      navigator.serviceWorker.addEventListener('controllerchange', onControllerChange);
    }
  });

  // 同时满足两个条件后发起请求
  return forkJoin([swReady$, swControlled$]).pipe(
    switchMap(() => this.http.get<Movie[]>('/movies'))
  );
}

4. 检查Angular Service Worker配置（若使用官方SW） #

如果项目用的是Angular自带的Service Worker，在ngsw-config.json中为API请求配置正确的缓存策略：

{
  "dataGroups": [
    {
      "name": "movies-api",
      "urls": ["/movies"],
      "cacheConfig": {
        "strategy": "freshness", // 网络优先
        "maxSize": 10,
        "maxAge": "1h",
        "timeout": "5s" // 可选：超时后 fallback 到缓存
      }
    }
  ]
}

5. 清理旧缓存与Service Worker #

旧的SW缓存可能干扰新逻辑：

1. 打开DevTools → Application → Service Workers
2. 点击Unregister删除旧SW
3. 进入Clear Storage，勾选所有选项后点击Clear site data
4. 重新加载页面测试

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