徽标没有出现在渐进式网页的启动画面上

Question

在这些演示中，启动画面上有徽标。

https://addyosmani.com/blog/getting-started-with-progressive-web-apps/

我不清楚我的清单中我做错了什么 - 我有一个图标，但它没有显示在我的启动画面上。

我的清单看起来像这样：

{
  "short_name": "Weather Service",
  "name": "Weather Service",
  "icons": [
    {
      "src": "logo.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "start_url": "index.html",
  "display": "standalone",
    "orientation": "portrait",
 "background_color": "#FAFAFA",
  "theme_color": "#512DA8"
}

我是否需要超过1张图片才能显示在初始屏幕上？

Answer 1

PWA建议总是把图标放在最低192px

  

如果您想确保始终显示图标，请考虑48dp是我们将显示的最小图像尺寸，如果您采用当前支持的最大密度显示（4x），则48 * 4 = 192px。这很幸运，因为我们需要将192px图像添加到主屏幕才能工作！好极了。因此，我建议始终将192px作为最小尺寸图标，并在256px，384px和512px处创建3个其他版本。但是，如果您想确保用户没有为启动画面下载太多数据，尤其是在低密度设备上，那么您可以降低，Chrome会尝试获取最合适的图像。

https://developers.google.com/web/updates/2015/10/splashscreen

Answer 2

您还可以使用Chrome的开发工具（应用程序 - ＆gt; Manifest）下的“添加到主屏幕”操作验证您的图标。这确定了{{1}}图片，这导致我失败了。