使用Workbox与Node.js实现离线页面加载失败问题排查

问题1：表单跳转逻辑混乱，导致无法正常缓存第二页 #

你当前的HTML用<form method="post">包裹跳转按钮，同时嵌套了<a href="">，这会触发冲突的请求行为：

• 点击按钮会触发POST请求，但Service Worker无法拦截POST请求（Workbox默认仅处理GET请求），离线时POST请求直接失败。
• 实际上页面跳转不需要表单，直接用跳转链接即可。

修复后的HTML代码：

<!-- 替换原表单代码 -->
<a href="/second_page.html"><button>Next Page</button></a>

问题2：缺少预缓存逻辑，核心资源未提前存入缓存 #

你的Workbox配置使用CacheFirst策略，但这个策略仅在资源被请求时才会缓存。如果联网时没访问过second_page.html，离线时就没有该页面的缓存；同时service-worker.js、页面核心资源也需要提前缓存，否则离线时Service Worker无法正常运行。

修改service-worker.js，添加预缓存配置：

importScripts(
    'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

// 预缓存核心资源，确保离线可访问
workbox.precaching.precacheAndRoute([
  { url: '/index.html', revision: '1' },
  { url: '/second_page.html', revision: '1' },
  { url: '/logo.png', revision: '1' },
]);

// 保留原有路由规则
workbox.routing.registerRoute(
    ({request}) => request.destination === "document",
    new workbox.strategies.CacheFirst()
);

workbox.routing.registerRoute(
    ({request})=> request.destination == "image",
    new workbox.strategies.CacheFirst()
);

提示：revision值在资源更新时要修改，触发Service Worker更新缓存。

问题3：Node.js服务器缺少second_page.html的GET路由 #

你的服务器仅处理了/的GET和POST请求，但用户通过链接跳转访问/second_page.html时，服务器会返回404，导致该页面无法被缓存。

补充服务器路由代码：

app.get('/second_page.html', function(req, res) {
  res.sendFile(path.join(__dirname + '/second_page.html'));
});

最后验证步骤 #

1. 启动服务器后，联网访问首页和第二页，触发资源缓存。
2. 打开浏览器开发者工具（F12）→ Application → Service Workers，确认Service Worker处于activated状态。
3. 切换到Cache面板，检查核心资源是否已存入缓存。
4. 断开网络，刷新页面验证离线访问功能。

内容的提问来源于stack exchange，提问作者Yolo-cell-hash