icons - 渐进式网页的初始屏幕上未出现徽标

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 始终将图标放置在至少 192 像素处

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

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

Answer 2

您还可以使用 Chrome 开发工具（应用程序 -> 清单）下的“添加到主屏幕”操作来验证您的图标。这确定了一个192x191px导致它对我来说失败的图像。