3

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

4

2 回答 2

3

启动画面存在的原因是因为在移动设备上启动渲染过程可能需要一秒钟的时间，所以我们绘制一些东西（背景颜色和图标），因为您有一个由您的应用程序生成的第一次绘制。

如果您在启动时看到白屏，可能是因为您在 Chrome 登陆 (46) 之前添加了启动屏幕功能。需要注意的一些事项：

  • 确保您的清单有一个short_name和name
  • 确保您的 start_url 与页面上注册的 SW 在同一范围内
  • 清单中有好的图标最好> 192px
  • 在清单中设置background_color页面背景的颜色（理想情况下）。这将确保初始屏幕是您网站的预期颜色。

即使您处于飞行模式，您也不应该看到离线恐龙。 Airhorner应该代表理想的体验：带有图标的蓝色闪屏，该图标会变形为应用程序的显示。

回复：图标 - 我建议实际上是 192 像素或更高的图标。

于 2015-11-25T13:27:53.523 回答
0

关于离线恐龙闪光：

我正在使用sw-toolbox并执行异步工作以在工作人员启动时设置路由处理程序。当应用程序离线并启动时，这会导致离线恐龙闪烁。

为避免这种情况，请设置等待异步路由处理程序设置完成的 sw-toolbox 默认处理程序。

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);
  });
};
于 2016-04-01T21:05:14.820 回答