Why is there a white screen between the splash screen and rendered content of my progressive mobile web app and is there a way to remove it?

问题

I have installed my mobile web app to the homescreen of my Android phone. When I start the app, the splash screen is displayed with the app icon, name, and background color defined in my manifest.json file. Right after the splash screen disappears, a white screen flickers briefly and then the expected html content is displayed. How do I get rid of this white screen?

I have discovered that reducing the file size of my coin-toss.html file (which is my start page) and removing <link> tags can eliminate the white screen. I think this has everything to do with my page needing time to render after the splash screen disappears. Before it can render, a white screen is visible. Is there any way to force the splash screen to remain visible until my content has fully rendered? Is there a way to prolong the duration of the splash screen?

Here is my manifest.json file:

{

  "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"

}

Here is my coin-toss.html file:

<!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>

The white screen does not exist when I use the above html with the commented out lines. When I copy the content of my "coin-toss.css" file into my <style> tag, the white screen comes back again.

One of the current "shining examples" of how to create progressive web apps is "The Air Horner", which you can add to home screen here: https://airhorner.com/ It also has the flickering white screen issue if you wish to examine it. As it is the Google Developer tutorial on how to make progressive web apps, I'm not sure if this problem can be fixed.

回答1:

I'm late but hope this can be useful. As you already said, I think the issue is related to the loading time of the page. I came across this and I solved it by registering a service worker and doing some cache management on the assets involved in the early loading of the app.

See Google's docs

回答2:

I first deleted the PWA from my home screen. Then I cleared browsing data of chrome browser(android) so that PWA's cache will be totally removed. Then added PWA to home screen and "White Screen" is gone.

my manifest.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"
}

update:

1) No need to delete the PWA from phone or clear the browser data. You will only need to "clear data" of PWA from phone (Settings->Installed App-> your PWA name -> clear data).

2) I uninstalled react-router @ version 3 and installed react-router-dom. Then I changed "start_url" to point "index.html". PWA worked, didn't produce "white screen" on my phone. I had to change start_url because lighthouse was giving errors as:

start_url does not respond with a 200 when offline
Unable to fetch start URL via service worker.

Change

"start_url": "/"

"start_url": "./index.html"

来源：https://stackoverflow.com/questions/46750586/why-is-there-a-white-screen-between-the-splash-screen-and-rendered-content-of-my

标签

progressive-web-apps

manifest.json