服务器离线时PWA离线模式二次冷启动报502 Bad Gateway问题咨询

结合你给出的现象，90%的概率是Service Worker的fetch事件处理逻辑未过滤错误响应，导致首次宕机时的502响应被写入缓存，第二次冷启动时直接读取了缓存的错误结果：

• 首次冷启动：SW预缓存的静态资源完整，初始加载走预缓存内容，触发ngOnInit逻辑判定服务器宕机、激活离线模式，加载过程中产生的失败请求响应未做过滤，被误写入Cache Storage，对应存储空间增加3MB左右
• 第二次冷启动：SW匹配到缓存里的502错误响应，直接返回给浏览器，还未触发Angular初始化的离线逻辑就抛出了错误

• 打开Chrome DevTools > Application > Cache Storage，查看所有缓存条目，重点排查导航类请求（入口index.html、初始化接口请求）的响应状态码，确认是否存在状态为502的缓存项
• 核对SW的fetch事件处理代码，确认是否缺少错误响应判断逻辑：正常的缓存写入逻辑必须先判断response.ok为true时才存入缓存，错误响应直接丢弃或回退到已有缓存，示例逻辑如下：

self.addEventListener('fetch', event => {
  // 仅处理导航请求和静态资源请求
  if (event.request.mode === 'navigate' || event.request.destination === 'script') {
    event.respondWith(
      fetch(event.request)
        .then(response => {
          // 仅缓存正常响应
          if (response.ok) {
            const cacheCopy = response.clone();
            caches.open('your-cache-name').then(cache => {
              cache.put(event.request, cacheCopy);
            });
          }
          return response;
        })
        // 网络请求失败时回退到缓存
        .catch(() => caches.match(event.request))
    );
  }
});

• 验证初始化逻辑执行顺序：确认Angular的ngOnInit初始化、ping服务器、激活离线模式的逻辑，是否晚于SW的资源请求调度。如果SW请求资源时离线模式还未激活，会直接走默认的网络请求逻辑返回502。
• 手动清理Cache Storage后在相同场景下重试，如果502错误消失，即可完全确认是错误响应被缓存导致的问题。

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