#码力全开·技术π对#Lighthouse检测到PWA的​​start_url​​​返回404，但实际访问正常。如何调试Service

遇到 Lighthouse 报告 PWA 的 ​​start_url​​​ 返回 404，但手动访问却正常的情况，通常与 Service Worker 缓存策略有关，尤其是在使用 Workbox 进行资源预缓存时。这种问题往往是因为旧版本的 Service Worker 或 ​​manifest.json​​ 被缓存，导致 Lighthouse 加载的页面路径不一致或无法识别。

可以通过以下步骤调试：首先在浏览器开发者工具中打开 Application 标签，查看当前注册并激活的 Service Worker 是否是最新的，尝试点击“Unregister”后刷新页面，强制重新加载资源。同时检查网络请求面板中 ​​start_url​​ 和 ​​manifest.json​​ 的响应状态和内容是否正确。

Workbox 默认会将构建时生成的资源清单通过 ​​precacheAndRoute​​ 注册进 Cache Storage，如果 ​​manifest.json​​ 或 HTML 页面被错误缓存，应考虑在 Service Worker 中添加清除逻辑：

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('my-pwa-cache').then((cache) => {
      return cache.addAll([
        '/index.html',
        '/manifest.json'
      ]);
    })
  );
});

另外，在每次部署更新后，建议修改缓存名称或调用 ​​skipWaiting()​​ 和 ​​clients.claim()​​ 强制更新 Service Worker：

workbox.core.skipWaiting();
workbox.core.clientsClaim();

最后，可在本地测试时禁用缓存（DevTools → Network → Disable Cache），或在服务器端为 ​​manifest.json​​ 设置合适的 Cache-Control 头以防止长期缓存：

Cache-Control: no-cache, must-revalidate