从主屏幕启动的PWA应用为何无网络时无法加载？

让我来帮你梳理下这个问题——明明已经做了预缓存和networkFirst策略，断网却还是弹出首次使用的提示，大概率是缓存配置或触发逻辑出了小疏漏，咱们一步步排查：

可能的原因及排查步骤 #

1. 预缓存清单遗漏了start_url对应的HTML文件 #

虽然你用了workbox.precaching，但如果**start_url指向的页面（比如根路径/）没被加入预缓存清单**，那networkFirst策略在断网时就找不到缓存的资源，自然会触发错误提示。

• 打开浏览器开发者工具的「Application」面板，查看「Cache Storage」里的预缓存资源列表，确认是否包含你的start_url页面。
• 检查workbox配置：确保precacheAndRoute的数组里明确包含该页面，比如：

  workbox.precaching.precacheAndRoute([
    { url: '/', revision: 'your-revision-hash' },
    // 其他预缓存的JS、CSS资源...
  ]);
  

  如果是用webpack插件自动生成清单，要确认HTML文件被正确纳入打包流程。

2. networkFirst策略未正确生效 #

networkFirst的逻辑是「先请求网络，失败则用缓存」，但如果缓存里根本没有start_url的资源，断网时还是会失败。

• 在开发者工具的「Network」面板勾选「Offline」，刷新页面，查看start_url的请求状态：
  • 如果显示「(from ServiceWorker)」，说明策略生效；
  • 如果显示失败，那要么是缓存里没有该资源，要么是路由匹配错误（比如workbox的路由规则没覆盖到start_url）。

3. 自定义提示框的触发逻辑有误 #

这个提示框大概率是你自己实现的逻辑，可能存在错误判断：比如误将「网络请求失败」直接判定为「首次使用」，而没有检查缓存是否存在。

• 找到触发提示的代码，比如类似这样的错误逻辑：

  if (!navigator.onLine) {
    // 错误：没有检查缓存是否存在，直接弹出首次使用提示
    showPrompt("首次使用[my_app_name]，请连接互联网");
  }
  

  应该改成先检查缓存中是否存在start_url资源：

  if (!navigator.onLine) {
    caches.match(window.location.href).then(cacheResponse => {
      if (!cacheResponse) {
        showPrompt("首次使用[my_app_name]，请连接互联网");
      } else {
        // 从缓存加载页面
      }
    });
  }
  

4. 服务工作者未正确激活 #

如果服务工作者处于「waiting」状态，或者激活过程中出错，那缓存策略和预缓存都不会生效。

• 查看「Application」面板的「Service Workers」选项，确认服务工作者处于「Activated」状态，且没有报错。

内容的提问来源于stack exchange，提问作者Pahlevi Fikri Auliya