Angular 6 - 没有获取清单答案

【问题标题】：Angular 6 - no manifest was fetchedAngular 6 - 没有获取清单
【发布时间】：2018-05-30 07:23:49
【问题描述】：

我正在尝试在我的应用中使用 Service Worker。

我添加了@angular/pwa，注册服务工作者：

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/ngsw-worker.js', {
        scope: '/'
    }).then((registration) => {
        console.log("Service worker OK!")
    });
}

当我在本地运行 Google Lighthouse 时，一切正常，网站在在线模式下运行，但是当我将应用程序上传到服务器时，我在 Lighthouse 中收到错误消息：

No manifest was fetched.

我是否使用了错误的路径？

manifest.json:
"start_url": "/index.html",

【问题讨论】：

请添加灯塔报告截图或链接到您的应用程序。

标签： angular progressive-web-apps pwa

【解决方案1】：

添加@angular/pwa 后，仔细检查这些：

1.在angular.json 文件的资产下，添加manifest.json，如下所示

        "assets": [
          "src/favicon.ico",
          "src/assets",
          "src/manifest.json"
        ],

2.你的manifest.json文件应该在src/目录下，所以src/manifest.json

3 然后在你的ngsw-config.json 文件中，你应该有这个：

  "files": [
    "/favicon.ico",
    "/index.html",
    "/manifest.json"
  ],

完成以上三个步骤，一切顺利。

【讨论】：

【解决方案2】：

该错误意味着您的index.html 文件没有告诉浏览器有关清单的信息。添加：

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

【讨论】：

【解决方案3】：

对我来说，将清单放在 head 标签的顶部就可以了。我正在从 Facebook 和 Twitter 加载脚本嵌入脚本，并且 angular 已将在 head 标签的底部。将它移到脚本部分上方以某种方式修复了它。

【讨论】：