启动画面上的渐进式Web应用程序图标非常小

Question

我已成功为我的网站创建了一个PWA，但在我将其添加到主屏幕并打开应用程序之后，启动画面上的图标仍然非常小。

我的清单有一个192x192和512x512图标，但正如我从这里读到的那样（https://developers.google.com/web/updates/2015/10/splashscreen），它会选择关闭到128dp来显示。由于A2HS横幅在清单中需要192x192，这是否意味着启动画面图标总是超小？是否无法为启动画面增大图标？

谢谢！

Answer 1

TL; DR：删除您的192x192图标，启动画面应默认为512x512图标。

在Google Chrome Lighthouse问题上查看此issue about auditing icon size，其中包含以下内容：

  

...启动画面有2种布局。如果您提供的图标是＆lt; = 80dp，则会获得“小图标布局”。如果超过＆gt; 80 dp，您将获得“大图标布局”。闪屏的理想尺寸为128dp。 （还有一种方法可以使用未提供的图标，但不清楚它是什么。）

似乎如果manifest.json中的192x192处有一个图标，则不会使用512x512的图标。请查看上面链接中的评论，以便对此进行一些讨论 - 这仍然是一个悬而未决的问题。

我的PWA遇到了同样的问题，并测试了删除192x192图像，留下了512x512，并且启动画面图标更大。我想我会尝试使用1024x1024并删除下一次构建的512x512。

编辑：我尝试了1024x1024并确认只有2种布局，具体取决于dp。 1024x1024没有显示，启动画面默认为384x384的较小版本。

Answer 2

如果您符合以下要求，则会自动显示海关屏幕：

Recommendations

只要您在网络应用清单中满足以下要求，Chrome for Android就会自动显示您的自定义初始屏幕：

• name属性设置为PWA的名称。
• background_color属性设置为有效的CSS颜色值。
• icons数组指定的图标至少为 512像素x 512像素。
• 图标存在且为 PNG 。

这样做并检查这次是否使用了512 png图像。

Answer 3

默认情况下，当我们创建React应用512x512 192x192时，此属性不具有manifast.json图标大小，因此Web应用程序图标会在移动/台式机/平板电脑等的初始屏幕上更改。在 manifest.json 需要配置以下方式，如果您正在开发react项目，则可以在public/manifest.json目录中找到manifest.json文件。

{
  "short_name": "thefarmerson",
  "name": "This is official page of Karthikeyan Anbazhagan Indian Computer Science Engineer",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": " 512x512 192x192 64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Answer 4

{ "short_name": "Maps", "name": "Google Maps", "icons": [ { "src": "/images/icons-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/images/icons-512.png", "type": "image/png", "sizes": "512x512" } ], "start_url": "/maps/?source=pwa", "background_color": "#3367D6", "display": "standalone", "scope": "/maps/", "theme_color": "#3367D6" }