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

我认为此清单的唯一错误是开始 URL。将其更改为如下所示

  "start_url": "/index.html",

或

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

如果这没有帮助，请在某个 public 域中托管您的应用并共享 URL。

Answer 2

"If you page already has a theme-color meta tag — for example <meta name="theme-color" content="#2196F3"> — then the page level configuration will be used instead of the value in the manifest."

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

Answer 3

更改以下内容：

"background_color": "#c46a00" 和 "background-color": "#ffffff"

PWA manifest.json - "theme_color" 和 "background_color" 不工作，启动画面不显示在 android 设备上

PWA manifest.json - "theme_color" and "background_color" not working, splash screen not showing on android device

google-chrome-devtools

create-react-app

manifest.json

pwa