Question

来自MDN：

在Chrome 47及更高版本中，会显示网页的初始屏幕从主屏幕启动的应用程序。这个启动画面是使用Web应用程序清单中的属性自动生成，具体为： name，background_color以及icons array中的图标最接近128dpi的设备。

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

Answer 1

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

的文档

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

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

您可以为此提交feature request。

Answer 2

初始屏幕上背景图像的替代选项。（没有技巧）这不是一个简单或优雅的解决方案，但同样，渐进式Web应用程序也不是。

您可以直接加载初始屏幕，然后在最终加载URL时，可以使用Javascript触发一个事件，该事件在加载文档的其余部分之前为您自己的自定义“模拟”初始屏幕设置样式。尽管这对于最终用户可能会感到“骇客”，但这实际上只是一种解决方法，并且不会影响清单的工作方式。如果您走这条路，建议您使用媒体查询测试display-mode。这样，您的CSS就会知道您的应用程序何时处于特定模式，然后您可以相应地设置样式。

您的CSS styles.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 */
}

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

“显示”：“独立”

您的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应用程序启动画面？

2 个答案: