我已将我的移动网络应用程序安装到我的 Android 手机的主屏幕上。当我启动该应用程序时，启动画面显示了我的 manifest.json 中定义的应用程序图标、名称和背景颜色。文件。初始屏幕消失后，白色屏幕会短暂闪烁，然后显示预期的 html 内容。如何摆脱这个白屏？
我发现减少我的 coin-toss.html 的文件大小文件(这是我的起始页)并删除 <link>标签可以消除白屏。我认为这与我的页面在启动画面消失后需要时间呈现有关。在渲染之前，可以看到一个白色屏幕。在我的内容完全呈现之前，有什么方法可以强制启动画面保持可见？有没有办法延长启动画面的持续时间？
这是我的 manifest.json 文件:
{
"author": "Frank Poth",
"background_color": "#000000",
"description": "Flip a virtual coin",
"display": "fullscreen",
"icons": [
{
"src": "https://192.168.0.101:2468/coin-toss.png",
"sizes": "128x128",
"type": "image/png"
}
],
"manifest_version": 2,
"name": "Coin Toss",
"orientation": "portrait",
"short_name": "Coin Toss",
"start_url": "https://192.168.0.101:2468/coin-toss.html",
"theme_color": "#000000",
"version": "0.1"
}
这是我的 coin-toss.html 文件:
<!DOCTYPE html>
<html>
<head>
<style> body { background-color:#000000; } </style>
<link href = "https://192.168.0.101:2468/manifest.json" rel = "manifest">
<!--<link href = "https://192.168.0.101:2468/coin-toss.css" rel = "stylesheet" type = "text/css">-->
<!--<link href = "https://192.168.0.101:2468/coin-toss.png" rel = "icon" type = "image/icon">-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<title>Coin Toss</title>
</head>
<body>
<!--<canvas></canvas>-->
<!--<script src = "https://192.168.0.101:2468/coin-toss.js" type = "text/javascript"></script>-->
</body>
</html>
当我使用上面带有注释行的 html 时，白屏不存在。当我将“coin-toss.css”文件的内容复制到我的 <style> 中时标记，白屏再次出现。
当前如何创建渐进式 Web 应用程序的“杰出示例”之一是“The Air Horner”，您可以在此处将其添加到主屏幕:https://airhorner.com/如果您想检查它，它也有闪烁的白屏问题。由于这是关于如何制作渐进式网络应用程序的 Google 开发者教程，我不确定这个问题是否可以解决。
最佳答案
我来晚了，但希望这对您有用。 正如您已经说过的，我认为这个问题与页面的加载时间有关。我遇到了这个问题，我通过注册一个服务 worker 并对应用程序早期加载所涉及的 Assets 进行一些缓存管理来解决它。
关于progressive-web-apps - 为什么我的渐进式移动 Web 应用程序的初始屏幕和呈现的内容之间有一个白色屏幕，有没有办法将其删除？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46750586/