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

【问题标题】：Logo not appearing on splash screen of progressive web渐进式网页的初始屏幕上未出现徽标
【发布时间】：2016-07-25 18:55:05
【问题描述】：

在这些演示中，初始屏幕上有徽标。

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 张图片才能显示在启动画面上吗？

【问题讨论】：

这可能与您放置图像文件的确切路径/目录有关。路径是否正确？
logo.png 被正确读取为图标（网络应用程序图标 - 添加到主屏幕时），但它不会出现在启动屏幕上。路径正确。
您的清单上只能有一个徽标，例如：incredibleweb.github.io/samples/web-application-manifest/… 添加到 HomeScreen 后效果很好。我建议检查图像路径、大小和 MIME 类型。有链接吗？

标签： icons manifest splash-screen progressive-web-apps

【解决方案1】：

建议 PWA 始终将图标放置在至少 192 像素处

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

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

【讨论】：

192x192 使徽标出现在所有手机上。出于某种原因，较低分辨率的徽标仅出现在带有库存 Android 的手机上。将放置 192x192 标志。谢谢。

【解决方案2】：

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

【讨论】：