PWA：有清单，但 Chrome 说“未找到清单”？答案

【问题标题】：PWA: Manifest is There, but Chrome Says "No Manifest Found"?PWA：有清单，但 Chrome 说“未找到清单”？
【发布时间】：2020-07-03 21:24:11
【问题描述】：

更新

由于没有进行任何更改，Lighthouse 神秘地停止显示“页面上未找到可用的 Web 应用清单”消息，现在显示“等待 start_url 响应超时”。当然，这是另一篇文章的主题。

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

我刚刚首次将 PWA 功能添加到我的应用中。 Chrome Lighthouse 显示“页面上未找到可用的网络应用清单。”

但是 Chrome 应用程序>>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 应用程序>>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 文件。

【问题讨论】：

标签： google-chrome google-chrome-devtools progressive-web-apps

【解决方案1】：

这可能是因为您可能没有在 html 文档头中链接清单文件

【讨论】：

感谢@Ayush 的评论。我相信我已经在 html 文档头中链接了清单文件。我已经用其他信息更新了帖子。

【解决方案2】：

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

【讨论】：

Lighthouse 继续显示我的旧 manifest.json，即使我已清除数据。您知道如何从“应用程序”选项卡中删除它。谢谢。
@LewPerren，转到 Application 选项卡，单击左侧的“Service Workers”，然后单击“Unregister”链接。这能解决吗？
谢谢，我早上试试，

【解决方案3】：

就我而言，我删除了公共文件夹中的sw.js 文件和workbox-e604aefe.js，然后使用了CLI npm run build。

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

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

【讨论】：