Firefox最新版本中Service Worker触发返回按钮显示离线页问题咨询

看起来你遇到的是Firefox最新版本里，Service Worker误在用户点击后退按钮时弹出“你已离线”页面的问题。这大概率是因为你的Service Worker的fetch事件拦截逻辑，没正确区分正常导航请求和后退时的浏览器缓存读取请求，或者在判断请求结果、网络状态时出现了误判。

问题根源分析 #

从你给出的代码片段来看，你是针对HTML导航请求来触发离线页面的。但Firefox处理后退导航时，发送的fetch请求依然会被标记为navigate模式，而你的Service Worker可能在这种场景下错误判定请求失败（比如没正确检查是否能从浏览器缓存取到内容，或是误判了网络状态），从而返回了离线页面。

修复方案 #

你需要调整fetch事件的处理逻辑，确保只有当真的无法从网络或缓存获取有效内容时，才返回离线页面。以下是具体的修改建议：

1. 完善导航请求的判断逻辑 #

先确保精准识别导航请求，同时适配Firefox的行为：

self.addEventListener('fetch', function(event) {
  // 仅处理HTML导航请求：覆盖标准navigate模式，兼容旧浏览器的文本/html请求
  const isNavigationRequest = event.request.mode === 'navigate' || 
    (event.request.method === 'GET' && event.request.headers.get('accept')?.includes('text/html'));

  if (!isNavigationRequest) {
    // 非导航请求直接放行，交给浏览器默认处理
    return;
  }

  // 处理导航请求：优先走网络，失败后尝试缓存，最后才返回离线页面
  event.respondWith(
    fetch(event.request)
      .then(networkResponse => {
        // 请求成功时，可根据你的缓存策略更新本地缓存（可选）
        return networkResponse;
      })
      .catch(() => {
        // 网络请求失败时，先尝试从缓存读取对应页面
        return caches.match(event.request)
          .then(cachedResponse => {
            // 缓存有内容就返回缓存，否则返回离线页面
            return cachedResponse || caches.match('/offline.html');
          });
      })
  );
});

2. 针对Firefox后退行为的额外判断 #

如果上面的修改还没解决问题，可以通过请求的缓存属性，判断是否是后退时的缓存读取请求，直接放行给浏览器处理：

self.addEventListener('fetch', function(event) {
  const isNavigationRequest = event.request.mode === 'navigate' || 
    (event.request.method === 'GET' && event.request.headers.get('accept')?.includes('text/html'));

  if (!isNavigationRequest) return;

  // 针对Firefox后退场景，允许浏览器直接使用缓存，不触发离线页面
  if (event.request.cache === 'force-cache' || event.request.cache === 'only-if-cached') {
    return;
  }

  // 后续的网络+缓存处理逻辑...
});

3. 避免误判离线状态 #

不要默认把fetch失败等同于离线，要区分网络不可用和其他请求错误（比如404、CORS）：

.catch(error => {
  // 仅当确实离线时，才返回离线页面
  if (!navigator.onLine) {
    return caches.match('/offline.html');
  }
  // 其他错误场景，可返回404页面或交给浏览器处理
  return fetch('/404.html');
});

关键注意点 #

• 确保你的缓存策略已经缓存了正常页面内容，这样后退时能直接从缓存读取，不会触发离线页面。
• 测试前要先注销旧的Service Worker，重新注册新逻辑（可在Firefox开发者工具>应用>Service Workers中操作）。

内容的提问来源于stack exchange，提问作者Niet the Dark Absol