2

我已将我的移动网络应用程序安装到我的 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>标签中时，白屏又回来了。

当前如何创建渐进式网络应用程序的“闪亮示例”之一是“The Air Horner”，您可以在此处将其添加到主屏幕：https : //airhorner.com/ 如果您愿意，它也有闪烁的白屏问题检查它。由于它是关于如何制作渐进式网络应用程序的谷歌开发者教程，我不确定这个问题是否可以解决。

4

2 回答 2

1

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

查看Google 的文档

于 2017-12-21T12:01:45.453 回答
0

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

我的清单.json：

    {
  "short_name": "React PWA App",
  "name": "Create React PWA App Sample",
  "icons": [{
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "icon.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#00b7a8",
  "background_color": "#096386"
}

更新：

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

2) 我卸载了 react-router @ version 3 并安装了 react-router-dom。然后我将“start_url”更改为指向“index.html”。PWA 工作，没有在我的手机上产生“白屏”。我不得不改变start_url，因为灯塔给出的错误如下：

离线时 start_url 没有响应 200
无法通过服务工作者获取启动 URL。

改变

"start_url": "/"

至

"start_url": "./index.html"
于 2019-04-26T16:26:54.737 回答