Question

我已将移动网络应用安装到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时，白屏不存在。当我复制我的＆＃34; coin-toss.css＆＃34;的内容时将文件存入我的<style>标记，白屏再次显示。

当前＆＃34;闪亮的例子之一＆＃34;关于如何创建渐进式网络应用程序的方法是＃Air; Air Horner＆＃34;，您可以在此处添加到主屏幕：https://airhorner.com/如果您想要检查它，它还会出现闪烁的白屏问题。由于这是关于如何制作渐进式网络应用程序的Google Developer教程，我不确定是否可以解决此问题。

Answer 1

我迟到但希望这可能有用。正如您已经说过的，我认为该问题与页面的加载时间有关。我遇到了这个问题，我通过注册服务工作者并对早期加载应用程序所涉及的资产进行一些缓存管理来解决这个问题。

请参阅Google's docs

Answer 2

我首先从主屏幕删除了PWA。然后，我清除了chrome浏览器（android）的浏览数据，以便完全删除PWA的缓存。然后将PWA添加到主屏幕，“白屏”消失了。

我的manifest.json：

start_url

更新：

1）无需从电话删除PWA或清除浏览器数据。您只需从电话“清除PWA的数据”（“设置”->“已安装的应用程序”->“ PWA名称”->“清除数据”）。

2）我卸载了@版本3的react-router并安装了react-router-dom。然后，我将“ start_url”更改为指向“ index.html”。 PWA工作正常，没有在我的手机上产生“白屏”。我不得不更改"start_url": "/"，因为lighthouse出现以下错误：

start_url脱机时不响应200
无法通过服务工作者获取起始网址。

更改

"start_url": "./index.html"

收件人

include('".$pid.".php');

为什么在我的渐进式移动网络应用程序的启动画面和渲染内容之间有一个白色屏幕，有没有办法删除它？

2 个答案: