Manifest.json用于渐进式Web应用程序无法正常工作

Question

我正在尝试将manifest.json文件用于我的Web应用程序。不幸的是它无法正常工作。我在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站点，请通过HTTPS转换所有HTTP请求并添加服务工作者。

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

这是灯塔审计报告，其中显示Manifest不是

Answer 2

第一件事： 这个"name": "slangoApp",应该像这个"name": "slangoapp", 请记住，它不应包含大写字母的空格。

第二件事：

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