Workbox Background Sync：离线提交表单跳转至站点未找到页的问题

当前配置触发浏览器内置离线错误页的核心原因有两个：

• 绑定后台同步的POST路由使用NetworkOnly策略，该策略在网络请求失败时不会返回任何兜底响应，会直接抛出网络错误
• 原生表单提交属于导航类请求，错误抛出后浏览器会直接接管流程，加载自带的「站点未找到」页面，不会执行你预期的跳转逻辑

直接修改POST路由的处理逻辑，在Service Worker层捕获请求失败的异常，把失败请求加入后台同步队列后，直接返回重定向响应，指向已缓存的全部条目列表页，从根本上阻断浏览器的错误页加载流程。

具体修改步骤 #

1. 移除原有基于纯NetworkOnly策略的POST路由配置
2. 重写POST路由的处理函数：
   • 正常发起网络请求，请求成功时直接返回服务端响应，保留原有提交后的正常跳转逻辑
   • 请求失败（如离线）时，先将请求加入后台同步队列，再返回302重定向响应到已缓存的列表页

修改后的完整POST路由配置代码：

// 保留原有bgSync插件的基础配置
const bgSyncPlugin = new workbox.backgroundSync.BackgroundSyncPlugin(
  QUEUE_NAME,
  {
    maxRetentionTime: 24 * 60,
  }
);

workbox.routing.registerRoute(
  new RegExp("^https://example.com/[a-zA-Z]+/journal"),
  async ({request}) => {
    try {
      // 正常发起网络请求，成功时直接返回响应
      const serverResponse = await fetch(request);
      return serverResponse;
    } catch (err) {
      // 离线等请求失败场景：先把请求压入后台同步队列
      await bgSyncPlugin.queue.pushRequest({request});
      // 替换为你实际的、已完成缓存的全部条目列表页路径
      return Response.redirect('/your-cached-journal-list-page', 302);
    }
  },
  "POST"
);

注意事项 #

• 重定向的路径必须和你已缓存的列表页路径完全一致，否则会触发二次加载失败
• 原有通配路由的NetworkFirst策略无需调整，因为你已确认目标列表页完成缓存，浏览器收到重定向后会直接从缓存读取页面内容
• 网络恢复后的自动同步逻辑不受影响，失败请求已经被正常压入队列，符合原有后台同步的运行流程

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