渐进式 Web 应用程序的预期启动体验是什么？

Question

测试渐进式 Web 应用程序。

当我在飞行模式下启动应用程序时，我得到了意想不到的 startup/splash 体验 (Android/Chrome)。

从主屏幕体验启动

我看到一个白屏，然后 "offline dinosaur" 短暂闪烁，然后应用程序成功启动，一切正常。启动时间比我预期的要长，尤其是在笔记本电脑上使用 Chrome Devtools 进行测试后，启动时间接近即时。

由于调试这段时间花在了哪里有点棘手（尤其是在“service-worker-not-运行”的情况下），了解一些基本知识会很有帮助：

从浏览器体验启动

在应用程序成功启动之前 "offline dinosaur" 的短暂闪烁。启动速度更快。

问题

在 Android/Chrome 上的预期启动时间和经验是多少？
上述经历是否只是目前的情况 (11/2015)？
有什么方法可以指定 Chrome 的启动（启动）体验吗？（我知道应用程序清单中的背景颜色和 144x144 图标用于启动，但仅适用于 Opera）

我是第一次使用 PWA，所以任何有关这方面的信息都会有所帮助。

我的平台：三星GS 5， Android 5.0, Chrome 46.0.2490.76

Answer 1

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

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

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

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

回复：图标 - 我实际上建议使用 192px 或更高的图标。

Answer 2

关于offline-dino flash：

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

为避免这种情况，请设置一个等待异步路由处理程序设置完成的 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);
  });
};

渐进式 Web 应用程序的预期启动体验是什么？

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

android

google-chrome

service-worker

progressive-web-apps