渐进式 Web 应用程序适用于本地设置，但在暂存时，Chrome 控制台读取 "Manifest: Line: 1, column: 1, Syntax error"

Question

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

在我的本地机器上它们工作得很好（前提是我开始 Chrome 使用一些特殊的命令行标志来忽略自签名证书）。我可以安装这两个应用程序，我可以通过 ngrok 从我的 Android phone 访问并将它们安装在那里。但是，在我将所有内容上传到暂存区之后，我开始在 Chrome:

中看到此控制台错误

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

我仔细检查了文件，没有发现任何问题。我阅读了其他 Stack Overflow 问题，但没有找到答案。我找到 this W3 article about manifest.json 并决定将文件名从 manifest.json 更改为 manifest.webmanifest 并使用 application/manifest+json 的 MIME 类型（根据 w3 推荐）来提供它。 None 这有什么不同。

为什么在本地可以正常运行却在暂存时出现语法错误？ 唯一的区别是我的本地设置使用自签名 SSL/TLS 证书，所以如果有的话，我很惊讶它 works 在本地通过 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"
}

Answer 1

找到问题了。 This answer 对我有用。

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

渐进式 Web 应用程序适用于本地设置，但在暂存时，Chrome 控制台读取 "Manifest: Line: 1, column: 1, Syntax error"

Progressive web app works on local setup, but on staging, Chrome console reads "Manifest: Line: 1, column: 1, Syntax error"

google-chrome

progressive-web-apps

manifest.json