What is the expected startup experience for a Progressive Web Application?

问题

Testing a Progressive Web Application.

When I start the app in airplane mode, I get an unexpected startup/splash experience (Android/Chrome).

Launch from Home Screen Experience

I see a white screen, followed by a brief flash of the "offline dinosaur" before the app successfully starts and all is well. The startup time is longer than I expected, especially after testing with Chrome Devtools on a laptop, where startup is near instant.

Since it is a little tricky to debug where this time is being spent (especially in the “service-worker-not-running” case), it would be helpful to have some baseline knowledge:

Launch from Browser Experience

Just a brief flash of the "offline dinosaur" before the app successfully starts. Starts much faster.

Questions

• What is the expected startup time and experience on Android/Chrome?
• Is the experience described above just the current state of things (11/2015)?
• Is there any way to specify the startup (splash) experience for Chrome? (I'm aware of background color and 144x144 icon in app manifest for splash, but for Opera only)

First time PWA for me, so any information on this would be helpful.

My platform: Samsung GS 5, Android 5.0, Chrome 46.0.2490.76

回答1:

The reason for the existence of the splash screen is because on mobile it can take over a second to start the render process so we paint something (the background colour and icons) util you have a first paint generated by your app.

If you are seeing a white screen on startup it might be because you added to the homescreen prior to Chrome landing (46) the splash screen feature. Some things to lookout for:

• Ensure your manifest has a short_name and name
• Ensure your start_url is in the same scope as a SW that is registered on the page
• Have good icons in the manifest ideally > 192px
• Set background_color in the manifest to the color of your background on the page (ideally.) This will ensure that the splash screen is the expected colour of your site.

You shouldn't see the offline dinosaur at all, even when you are in aeroplane mode. Airhorner should represent the ideal experience: Blue splash screen with an icon that morphs into the display of the app.

re: Icons - I recommend actually 192px icon or higher.

回答2:

Regarding the offline-dino flash:

I was using sw-toolbox and performing asynchronous work to setup route handlers at worker startup. This caused an offline dino flash when the application was offline and starting up.

To avoid that, set a sw-toolbox default handler that waits for the asynchronous route handler setup to complete.

var toolbox = require('sw-toolbox');

var setupPromise = someAsyncHandlerSetup()
.then(function () {
  // make default handler temporary, allows other fetch handlers (like sw-precache, for example)
  toolbox.router.default = null;
});

// until the async handler setup is done, provide a default handler
// to avoid an offline-dino flash when starting up while offline. 
toolbox.router.default = function defaultHandler (request) {
  return setupPromise.then(function () {
    var handler = toolbox.router.match(request);
    if (handler) {
      return handler(request);
    }
    throw new Error('default handler could not handle ' + request.url);
  });
};

来源：https://stackoverflow.com/questions/33906701/what-is-the-expected-startup-experience-for-a-progressive-web-application