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无效。您应该学会使用 how to generate Lighthouse report 来帮助自己找到此类问题的原因。

而不是像这样URL开始

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

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

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

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

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

这是 Lighthouse 审计报告，上面说 Manifest 不是

Manifest.json 渐进式网络应用无法正常工作

Manifest.json for progressive web app not working

reactjs

progressive-web-apps

manifest.json