时间戳

首页 > 解决方案 > 渐进式 Web 应用程序适用于本地设置，但在暂存时，Chrome 控制台显示“Manifest: Line: 1, column: 1, Syntax error”

google-chrome - 渐进式 Web 应用程序适用于本地设置，但在暂存时，Chrome 控制台显示“Manifest: Line: 1, column: 1, Syntax error”

问题描述

我有两个独立但相关的渐进式 Web 应用程序，每个应用程序都有一个manifest.json文件。一个应用程序在同一域中可用，/foo/app而另一个应用程序在/bar/app同一域上。该manifest.json文件可在/foo/app/manifest.json和/bar/app/manifest.json分别获得。

在我的本地机器上它们工作得很好（假设我用一些特殊的命令行标志启动 Chrome 以忽略自签名证书）。我可以安装这两个应用程序，我可以通过 ngrok 从我的 Android 手机访问并在那里安装它们。但是，在我将所有内容上传到 staging 之后，我开始在 Chrome 中看到这个控制台错误：

Manifest: Line: 1, column: 1, Syntax error.

我用细齿梳子检查了文件，找不到任何问题。我阅读了其他 Stack Overflow 问题，但结果很枯燥。我找到了这篇关于 manifest.json 的 W3 文章，并决定将文件的名称从 更改manifest.json为manifest.webmanifest并使用 MIME 类型application/manifest+json（根据 w3 建议）提供它。这些都没有任何区别。

为什么在本地运行良好时，暂存时会出现语法错误？唯一的区别是我的本地设置使用自签名 SSL/TLS 证书，所以如果有的话，我很惊讶它可以通过 ngrok 在本地运行！

这是我的manifest.webmanifest文件：

{
  "short_name": "Foo",
  "name": "Foo",
  "icons": [
    {
      "src": "/img/foo-logo-no-text-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/img/foo-logo-no-text-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/foo/app/?source=pwa",
  "background_color": "#54799C",
  "display": "standalone",
  "scope": "/foo/app/",
  "theme_color": "#54799C"
}

标签： google-chromeprogressive-web-appsmanifest.json

解决方案

发现了问题。这个答案对我有用。

简而言之，我在我的部分中添加crossorigin="use-credentials"了<link rel="manifest">元素<head>。

推荐阅读