PWA：清单在那里，但是 Chrome 说 "No Manifest Found"？

Question

更新

在未进行任何更改的情况下，Lighthouse 神秘地停止显示“页面上未找到可用的 Web 应用程序清单”消息，现在显示“等待 start_url 响应超时。”当然，这是另一个 post 的主题。

我还不知道为什么 Lighthouse 停止显示之前的错误消息。

我刚刚第一次将 PWA 功能添加到我的应用程序中。 Chrome Lighthouse 说“在页面上找不到可用的 Web 应用程序清单。”

但是 Chrome Application>>Manifest 工具报告说 manifest.json 文件存在——甚至从中读取数据：

manifest.json 文件如下所示：

{
  "short_name": "mySiteName",
  "name": "mySiteName",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#ffffff",
  "theme-color": "#ffffff",
  "background_color": "#000000",
  "background-color": "#000000",
  "description": "my site description",
  "icons": [
    {
      "src": "/images/app-images/myLogo.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/app-images/myLogo.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

为什么 Lighthouse 说找不到 manifest.json -- 而 Chrome Application>>Manifest 工具却说找到了？

更新：

一位评论者问我是否链接了 <head> 中的清单。转到生产服务器并单击 view source，我在 <head> 标记中看到：

<head>
    [.....]
    <meta charset="utf-8">

    <meta name="robots" content="noindex">
    <link rel="manifest" href="manifest.json" crossorigin="use-credentials">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <noscript>This site requires Javascript. Please activate JavaScript in your browser.</noscript>
    [.....]
</head>

如果我将 https://www.mywebsite.care/manifest.json 粘贴到浏览器中，我的 manifest.json 文件就会出现。所以看来我已经在 <head> 部分链接了 manifest.json 文件。

Answer 1

这可能是因为您可能没有在 html 文档头

中链接您的清单文件

Answer 2

我发现当您更新 pwa 实现时，从 Chrome devtools 应用程序选项卡中删除旧的 serviceworker 是不够的——通常还需要删除应用程序上的旧缓存存储选项卡也是如此。我想发生的事情可能是过时的缓存错误。

Answer 3

在我的例子中，我删除了 sw.js 文件和 public 文件夹中的 workbox-e604aefe.js，然后使用 CLI npm run build.

似乎如果您不手动删除这些文件，那么构建文件不会让 manifest.json 文件重新更新这些文件，因此您的错误 sw.js 文件和 workbox-e604aefe.js得到一次又一次的服务。

只需删除那些有问题的旧文件，新的更新就会自动在构建中创建。

PWA：清单在那里，但是 Chrome 说 "No Manifest Found"？

PWA: Manifest is There, but Chrome Says "No Manifest Found"?

google-chrome

google-chrome-devtools

progressive-web-apps