即使满足所有要求，PWA初始屏幕也无法正常工作

Question

我已经为我的自定义框架设置了PWA功能，并且除启动屏幕外，其他所有功能都很好。都满足以下要求：

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

除非我删除所有其他图标，否则512x512图标将不会用于初始屏幕。

该图标显示在“ Chrome开发工具应用程序”部分中，因此很明显可以看到它。

下面是我的manifest.json，以及指向我的测试网站的链接。

{
  "short_name": "New Site",
  "name": "New Site",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#17AAEC",
  "theme_color": "#17AAEC",
  "icons": [
    {
      "src": "assets/media/icon-pwa-48x48.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "assets/media/icon-pwa-96x96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "assets/media/icon-pwa-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "assets/media/icon-pwa-256x256.png",
      "type": "image/png",
      "sizes": "256x256"
    },
    {
      "src": "assets/media/icon-pwa-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

https://framework.jacob.rocks/

---

更新2018-10-29

事实证明，当没有注册服务工作者时，会使用初始屏幕图像，但是如果注册了服务工作者，则会使用较小的图标。据我所知，这似乎是Webkit的一个错误。请参见下面的GIF。

• Service worker enabled
• No service worker

Answer 1

我遇到了同样的问题-看来您不仅需要正确设置px值，而且还需要dp问题，这取决于屏幕密度和所创建图像的dpi设置-请参见Jacque的出色答案：{ {3}}

Answer 2

如果您不只指定512像素的图标，则不会选择最大的图标...目前尚无真正的解决方案来纠正此问题。您只能定义一个512px图标，这不是问题。