Angular 6部署服务器后Lighthouse提示No manifest was fetched问题排查

我之前也碰到过几乎一模一样的情况——本地跑Lighthouse全绿，部署到服务器就栽在manifest上，结合你给出的信息，咱们可以从这几个方向逐一排查：

1. 先检查index.html里的manifest引用路径 #

Angular PWA默认会在index.html里生成manifest的引用标签，但如果你的应用部署在服务器的子路径（比如https://your-domain.com/my-app/），相对路径就会失效。

• 看看你的index.html里是不是这样写的：

  <link rel="manifest" href="manifest.json">
  

  如果是，改成绝对路径试试：

  <link rel="manifest" href="/manifest.json">
  

  要是部署在子目录，就加上对应前缀：

  <link rel="manifest" href="/my-app/manifest.json">
  

2. 验证start_url的配置是否匹配部署环境 #

你当前的start_url是"/index.html"，如果应用不是部署在服务器根目录，这个路径就不对了。

• 比如部署在/my-app/下，要改成：

  "start_url": "/my-app/index.html"
  

  另外更稳妥的方式是直接写根路径（对应部署的根），Angular路由会自动指向index.html：

  "start_url": "/",
  

3. 确认服务器是否正确提供manifest文件 #

有时候服务器的静态文件配置会"忽略".json后缀的文件，或者没设置正确的Content-Type，这都会导致Lighthouse识别失败：

• 直接访问https://your-domain.com/manifest.json，如果返回404，说明文件路径没放对，或者服务器没配置允许访问json文件；
• 要是能访问，检查响应头里的Content-Type是不是application/manifest+json（规范要求，虽然Lighthouse大多时候能兼容，但最好补上）：
  • Nginx可以加这段配置：

    location ~* \.(json)$ {
        add_header Content-Type application/manifest+json;
    }
    

  • Apache在.htaccess里添加：

    AddType application/manifest+json .json
    

4. 别手动写Service Worker注册代码（坑点！） #

你手动写的这段注册代码其实没必要——Angular的@angular/pwa模块已经帮你自动生成了正确的注册逻辑，包括路径和scope的适配。手动注册反而容易因为路径不匹配导致问题，建议删掉这段代码，用框架自带的配置就行。

5. 清除缓存再测 #

部署后浏览器大概率缓存了旧资源，先清掉站点缓存，关闭所有相关标签页再重新打开，然后跑Lighthouse检测，避免缓存干扰。

先从这几点排查，应该能解决你的问题！

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