PWA启动画面渐变为黑色？

Question

在iPhone iOS 11.4上，从主屏幕点击PWA图标时，会显示一个闪屏，然后变黑，然后又回到了闪屏。不确定为什么会变黑，但可以在此PWA示例中看到：

在线演示：https://pwa-splash.now.sh Github仓库：https://github.com/applification/pwa-splash-screens 演示源代码：https://github.com/applification/pwa-splash-screens/blob/master/index.html 只需在手机上打开在线演示链接，将其添加到主屏幕，然后从主屏幕点击PWA应用程序图标即可看到闪屏的问题。

有没有办法消除黑色（使它只是闪屏）？

- Wonka

---

请提供URL以供我们检查。 - Anand

你可以参考这个线程。这可能与页面加载时间有关。尝试注册服务工作者并在应用程序早期加载的资产上进行一些缓存管理。参考这个文档。 - abielita

@Anand 我已经添加了更相关的直接链接，你可以查看。 - Wonka

@abielita 这个链接的示例非常简单，我认为它在iOS升级之前可以正常工作，没有淡入淡出效果，但是你可以在链接的小示例中看到它仍然存在。 - Wonka

Answer 1

我在iOS 11.4（iPhone X分辨率）上进行了测试，但我只看到了默认的白色启动画面，而没有通过“apple-touch-startup-image”链接的图像。

在代码中，我没有看到任何支持iPhone X（2436x1125）分辨率的内容，这解释了这种行为。

请参考此答案以支持更高的分辨率，使其在您的分辨率和所有可能的iOS设备上正常工作。

- Anand

---

说实话，我对你链接的答案感到困惑。在iOS启动图像下面的代码部分列出了6个apple-touch-startup-image变体，但是那些wXh数字与苹果的启动屏幕文档上的数字不匹配：https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/launch-screen/ 在苹果文档底部，它目前列出了12种设备尺寸变化，以及24种横向和纵向的变化。不确定那个答案是否过时，也不知道如何将其应用于适用于所有苹果文档屏幕尺寸的工作？ - Wonka

同一链接中的另一个答案表明，尽管苹果文档仍然列出这些语法，但此解决方案已不再起作用。我认为我们目前没有最新iOS的任何解决方案，只能等待苹果支持W3C规范，就像Chrome一样。对此我感到很抱歉。 - Anand

不用担心，谢谢您的评论。我会保留这个问题，以防现代答案解决它 :) - Wonka