徽标未出现在渐进式网络的启动画面上

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

If you want to ensure that an icon will always be displayed consider that 48dp is the minimum image size we will display, which if you take the maximum density display currently supported (4x) then 48 * 4 = 192px. This is lucky because we need to 192px image for Add to Homescreen to work! Yay. Therefore, I would recommend always having 192px as the minimum sized icon and create 3 other versions at 256px, 384px and 512px. However, if you want to ensure that the user is not downloading too much data for the splash screen, especially on a low density device then you can go lower and Chrome will try to fetch the most appropriate image.

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

Answer 2

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

徽标未出现在渐进式网络的启动画面上

Logo not appearing on splash screen of progressive web

icons

splash-screen

manifest

progressive-web-apps