Angular 5 PWA离线模式无法加载问题求助

嘿，我来帮你梳理下这个离线加载失败的排查方向——毕竟Angular早期的PWA确实容易踩一些小坑，尤其是没改默认配置却出问题的情况😉

一、先核对基础配置是否正确 #

虽然你说没修改CLI生成的内容，但还是要确认核心配置没出问题：

• 检查ServiceWorker注册：打开app.module.ts，确认ServiceWorkerModule的注册代码是正确的：

  ServiceWorkerModule.register('/ngsw-worker.js', { 
    enabled: environment.production 
  })
  

  重点确认environment.production是true，因为Angular默认只在生产环境启用Service Worker，开发模式下ng serve是不支持SW的。
• 验证ngsw.json的完整性：打开dist目录下的ngsw.json，检查assetGroups里的resources是否包含了所有必要的静态资源，比如index.html、*.js、*.css、字体文件等。比如默认的配置应该有类似这样的片段：

  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": ["/favicon.ico", "/index.html"],
        "versionedFiles": ["/*.bundle.css", "/*.bundle.js", "/*.chunk.js"]
      }
    }
  ]
  

  另外要确保ngsw.json在dist的根目录，路径不对会导致SW无法读取配置。

二、确认构建与部署流程正确 #

• 必须用生产构建：只有ng build --prod才会生成并正确配置Service Worker，ng build（开发构建）不会生成SW相关文件，哪怕手动复制也没用。
• 服务器环境要求：Service Worker只能在HTTPS环境下工作（localhost除外）。如果是部署到线上服务器，必须配置HTTPS；本地测试的话用localhost或者127.0.0.1是没问题的。
• 服务器MIME类型配置：检查服务器是否把ngsw-worker.js的Content-Type设为application/javascript，有些服务器会默认把它当成文本文件，导致SW注册失败。

三、排查Service Worker生命周期与缓存状态 #

打开Chrome DevTools的「Application」面板，找到「Service Workers」和「Cache Storage」：

• 查看SW状态：确认SW处于「Activated」状态，并且显示「This site is eligible for offline use」。如果是「Waiting」或者「Redundant」，说明注册/激活失败了，Console里大概率会有报错信息。
• 检查缓存内容：进入「Cache Storage」，查看是否有ngsw:static:xxx这类缓存组，里面是否包含index.html和其他静态资源。如果缓存为空，说明SW没完成预缓存。
• 解决短暂可用的问题：你说手动启停后短暂可用，可能是SW激活时机的问题。试试勾选「Update on reload」，然后刷新页面，强制SW更新并激活；另外可以清空浏览器的「Storage」（在Application面板的「Clear storage」里），再重新加载页面，避免旧缓存干扰。

四、Angular 5/CLI 1.6.8的版本特定问题 #

Angular 5的PWA支持还比较早期，CLI 1.6.8存在一些已知的小bug：

• 尝试升级CLI到1.7.x（这个版本兼容Angular 5），重新执行ng build --prod，有时候旧版本的CLI会生成不完整的ngsw.json。
• 检查浏览器兼容性：Angular 5的SW要求Chrome 54+、Firefox 49+，如果测试用的是旧浏览器，可能会不支持离线功能。

五、查看错误日志定位问题 #

最后，一定要看DevTools的Console面板，有没有SW相关的报错，比如：

• Failed to register ServiceWorker: The script has an unsupported MIME type ('text/plain')——这是服务器MIME类型的问题
• No matching service worker detected——路径或者配置错误
• 缓存相关的报错，比如某个资源无法被缓存

这些日志能直接帮你定位到具体的问题点。

内容的提问来源于stack exchange，提问作者Elemér Botos