Question

我试图在我的应用中使用服务工作者。

我添加了@angular/pwa，注册了服务人员：

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

当我在我的本地运行谷歌灯塔时，一切工作都很完美，并且该网站在线模式工作，但是我将我的应用程序上传到服务器我在灯塔中发现错误：

No manifest was fetched.

我使用错误的路径吗？

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

Answer 1

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

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

Answer 2

添加@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 3

对我来说，将清单放在head标签的顶部即可。我正在加载来自Facebook和Twitter的脚本嵌入脚本，而angular已将在head标签的底部。以某种方式将其移到脚本部分上方。

Angular 6 - 没有显示任何清单

3 个答案: