徽标没有出现在渐进式网页的启动画面上 [英] Logo not appearing on splash screen of progressive web

问题描述

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

In these demos, there are logos on the splash screens.

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

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

I don't know what I am doing wrong in my manifest - I have an icon but it is not showing up on my splash screen.

我的清单看起来像这样：

My manifest looks like this:

{
  "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张图片才能显示在初始屏幕上？

Do I need more than 1 image for it to appear on the splash screen?

推荐答案

PWA建议总是把图标放在192px至少

PWA is recommend to alway put icon at 192px as a minimum

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

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

这篇关于徽标没有出现在渐进式网页的启动画面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！