渐进式 Web 应用程序的 Manifest.json 不起作用

Question

我正在尝试让 manifest.json 文件适用于我的网络应用程序。不幸的是它不能正常工作。我在 chrome devtools 中收到以下错误：

行：1，列：1，意外标记。

我很确定 JSON 是有效的，但它可能与html-head 中的路径有关。我在这里做错了什么？

我在我的 html 中链接它，如下所示：

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

清单如下所示：

{
  "short_name": "Tabbs Web App",
  "name": "Tabbs Web App",
  "description": "Tabbs is an digital booking service for the night life scenery",
  "icons": [
    {
      "src": "favicon.png",
      "sizes": "1024x1024",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "fullscreen",
  "theme_color": "#F5C33E",
  "background_color": "#ffffff"
}

这是我的地图结构：

希望有人能找到问题！干杯!

Answer 1

第一个问题，您的 start_url 无效。您应该学习使用如何生成 Lighthouse 报告来帮助自己找到此类问题的原因。

而不是将起始 URL 设为这样

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

试试这个或干脆删除“。” 从上面的 URL 并尝试，这完全取决于您的构建和托管、清单和 index.html 位置等。因此您必须尝试多个，看看哪些有效。

"start_url": "http://tabbs-web-app.herokuapp.com/discover/home",

我没有收到您提到的错误。不过，我得到了以下一个，这是因为您的网站从非 HTTPS 请求加载内容。如果您的目标是使您的站点成为 PWA 站点，请通过 HTTPS 转换所有 HTTP 请求并添加服务工作者。

Site cannot be installed: the page is not served from a secure origin

这是 Lighthouse 审计报告，其中说 Manifest 不是