PWA manifest.json - “theme_color”和“background_color”无效，启动画面未在Android设备上显示

Question

当我查看Chrome DevTools中的manifest.js时，我可以看到徽标和颜色在那里。但是，当我在我的Android设备上从我的主屏幕启动网站时，既没有加载背景或主题颜色，也没有显示我的启动画面。 知道为什么吗？

的manifest.json：

{
  "short_name": "Example",
  "name": "Example",
  "icons": [
    {
      "src": "images/logo_192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/logo_512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./",
  "display": "standalone",
  "theme_color": "#a300c4",
  "background_color": "#c46a00"
}

截图：

修改

我发现了错误。我使用Chrome DevTools通过远程设备浏览网站。端口转发到localhost：3000与启动触发屏幕的https要求不匹配。

现在pwa以独立模式启动，颜色和启动画面显示正确。

然而，未显示启动画面徽标，我不明白为什么。 图像的路径是正确的，图像存在正确的文件名和类型。

有什么建议吗？

Answer 1

我唯一看到此清单错误的是启动网址。将其更改为以下内容

  "start_url": "/index.html",

或

  "start_url": "https://example.com/myapp/",

如果这没有帮助，请在某个公共领域托管您的应用并分享该网址。

Answer 2

“如果您的页面已经具有主题颜色的元标记，例如data = [ ["25-5-19", "cat1", "cat3", 10, 1], ["25-5-19", "cat1", "cat3", 20, 1], ["25-5-19", "cat1", "cat3", 30, 1], ["26-5-19", "cat2", "cat4", 50, 2], ["26-5-19", "cat2", "cat4", 100, 2], ["26-5-19", "cat2", "cat4", 10, 2], ["27-5-19", "cat1", "cat5", 40, None], ["27-5-19", "cat1", "cat5", 60, None] ] ，则将使用页面级别的配置，而不是清单中的值。”

来自：https://developers.google.com/web/updates/2015/08/using-manifest-to-set-sitewide-theme-color