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

【问题标题】：What is the expected startup experience for a Progressive Web Application?渐进式 Web 应用程序的预期启动体验是什么？
【发布时间】：2015-11-25 00:51:56
【问题描述】：

测试渐进式 Web 应用程序。

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

从主屏幕体验启动

我看到一个白屏，然后是“离线恐龙”的短暂闪烁，然后应用程序成功启动并且一切正常。启动时间比我预期的要长，尤其是在笔记本电脑上使用 Chrome Devtools 进行测试后，几乎可以立即启动。

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

从浏览器体验启动

在应用成功启动之前，“离线恐龙”的短暂闪光。启动速度更快。

问题

在 Android/Chrome 上的预期启动时间和体验是多少？
上述体验是否只是当前的情况 (11/2015)？
有没有办法指定 Chrome 的启动（启动）体验？（我知道应用清单中的背景颜色和 144x144 图标用于启动画面，但仅适用于 Opera）

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

我的平台：三星GS 5，安卓5.0，铬 46.0.2490.76

【问题讨论】：

标签： android google-chrome service-worker progressive-web-apps

【解决方案1】：

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

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

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

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

re: 图标 - 我建议实际上是 192px 或更高的图标。

【讨论】：

background_color 移除了白屏，但是，在飞行模式下我仍然得到一个简短的“恐龙闪光”。请注意，我的启动序列中有一个 fetch（由于网络优先策略）。我要删除它，但想知道这是否会导致恐龙闪光。
如果它是私人的，你能和我分享一下 paulkinan @ google 的 URL。您的网络优先方法可能会导致它，但即使这样，您的 SW 也应该处理请求并且您不应该看到恐龙
当然，保罗金兰。从那以后，我改用“最快”的策略。开始时间更快，但仍能看到一丝恐龙的闪光。同样，仅在从主屏幕启动时才能看到。
赞成这个关于 bgcolor、图标和渲染进程启动时间的答案。暂时扣留“接受”对“闪电侠”的解释。我知道这可能是我的 sw/app 启动正在做的事情，但是对这种行为的解释非常有价值。代码是公开的，在这里：github.com/localnerve/flux-react-example-sw
dino 的想法原因：应用程序从 IDB 读取所有动态路由，包括起始路由，并安装获取处理程序。这是一个异步操作，刚刚从 service worker 启动脚本开始 - 不是在带有“waitUntil”的生命周期事件上。我这样做是因为我需要在服务人员启动时进行设置，而不仅仅是在安装或激活时。也许这就是恐龙的原因？我是不是误会激活了？

【解决方案2】：

关于离线恐龙闪光：

我使用 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);
  });
};

【讨论】：