将背景图像添加到渐进式 Web 应用程序启动画面？

Question

来自MDN：

In Chrome 47 and later, a splash screen is displayed for a web application launched from a home screen. This splashscreen is auto-generated using properties in the web app manifest, specifically: name, background_color, and the icon in the icons array that is closest to 128dpi for the device.

我想知道是否可以使用全屏背景图像而不是生成的背景？

Answer 1

您可能需要查看有关 Adding a Splash Screen for Installed Web Apps in Chrome 47 的文档。

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.

表示目前支持的最大显示密度是48dp的4倍

您可以为此提交 feature request。

Answer 2

初始屏幕上背景图像的替代选项。（没有黑客）这不是一个简单或优雅的解决方案，但话又说回来，渐进式网络应用程序也不是。

您可以简单地让您的闪屏加载，然后当您的 URL 最终加载时，您可以使用 Javascript 触发一个事件来设置您自己的自定义 "mock" 闪屏的样式在您的文档的其余部分加载之前。虽然这对最终用户来说可能有点 "hacky" 的感觉，但它实际上只是一种解决方法，不会以任何方式影响清单的工作方式。如果你走这条路，我建议使用 媒体查询 来测试 display-mode。这样，您的 CSS 将知道您的应用程序何时处于特定模式，然后您可以相应地设置样式。

你的CSSstyles.css:

/* the wrapper will be visible later after the document loads */
#wrapper { display:none; }

/*
Using a media query to test for the display-mode of your application
*/
@media all and (display-mode: fullscreen) {
   body {
      margin: 0;
      border: 5px solid black;
   }
}

#splash_screen {
   /* all your splash screen styles */
}

确保在清单中声明显示模式：

"display": "standalone"

你的HTML;

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">

<script type="text/javascript">

/* with setTimeout you have control over how long the
splash screen sticks because the document will load first. */
setTimeout( function() {
   var wrapper= document.getElementById("wrapper") ;
   var splash_screen = document.getElementById("splash_screen") ;
   document.body.removeChild(splash_screen) ;
   wrapper.style.display = "initial" ;
   } , 2000 ) ;

</script>
</head>

<body>
<div id="splash_screen"></div>

<div id="wrapper">
/* the rest of your content */
</div>
</body>
</html>

关于 CSS display-mode 的 MDN 文档。 manifest display.

上的 MDN 文档

我自己试图找到一种在初始屏幕上使用背景图像的方法，这就是我最终来到这里的原因。在我的追求中，我想出了模拟启动画面的想法。请注意，我尚未测试此代码。

将背景图像添加到渐进式 Web 应用程序启动画面？

add a background image to progressive web app splash screen?

progressive-web-apps