angular - Angular 6 - 没有获取清单

Question

我正在尝试在我的应用程序中使用服务工作者。

我已经添加@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",

Answer 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"
  ],

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

Answer 2

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

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

Answer 3

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