Progressive Web Apps - 有没有办法关闭 Chrome 显示的启动画面，或者至少控制启动画面何时消失？答案

【问题标题】：Progressive Web Apps - Is there a way to turn off the splash-screen that Chrome shows, or at least control when the splash-screen goes away?Progressive Web Apps - 有没有办法关闭 Chrome 显示的启动画面，或者至少控制启动画面何时消失？
【发布时间】：2018-05-07 18:34:33
【问题描述】：

Chrome 引入了闪屏作为 PWA 功能，使其外观和感觉更像原生应用。它从 Web 应用清单中的 name、icon 和 bg_color 生成启动画面。更多细节在这里：

虽然这一切都很好，但没有适当的文档说明 Chrome 决定让启动画面保持可见多长时间。

理想情况下，我认为应该直到在屏幕上绘制一些有意义的东西（只是首屏上的东西），但根据我的经验，Chrome 似乎会在很长一段时间内保持这个启动画面（可能直到页面加载？）

这对于从慢速连接浏览我的网站的人来说非常糟糕 - 以前他们至少可以在屏幕上看到正在工作和发生的事情，现在他们只看到一个静态图像（带有图标和名称的启动画面） - 他们没有不知道打开网络应用程序需要多长时间，很容易感到无聊和下车。这是非常危险的。

我可以控制闪屏何时消失甚至完全禁用它吗？

【问题讨论】：

标签： google-chrome splash-screen progressive-web-apps web-app-manifest

【解决方案1】：

您可以注册一个 DOMContentLoaded 事件，这是第一个触发的事件，甚至在您的其他内容（如图像、css 等）仍在加载之前。使用它，您甚至可以（可能）在您的第一次绘制发生之前（取决于您的站点要求/实施）淡出/删除启动画面。查看一个示例here，他尝试在初始屏幕的渐变中添加动画，而不是简单的过渡。您绝对可以在类似的理由之前尝试删除启动画面。

P.S.：找不到任何可以禁用/超时启动屏幕的内容。因此，解决方法！

【讨论】：

谢谢，但您的建议与我在这里尝试做的事情非常互补。

【解决方案2】：

您的第一页似乎需要很长时间才能准备好（第一次绘制），也许您有：

一个大的 HTML 文件
同步加载样式表
Javascript 需要很长时间才能解决

检查这些事情，看看解决每个问题是否有帮助。

您可以在 webAPK 中查看其他 PWA 应用，例如 twitter，它们的加载速度非常快，并使用桌面上的 chrome dev-tool 向它们学习。

【讨论】：

检查了 Chromium 源，表明当第一次非空绘制发生时，飞溅应该消失，但根据我的经验，我在很多网站上看到它在页面加载后消失（可能是窗口加载事件触发）。 source-code