平台
"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 Safari/537.36"
工作箱版本
5.0.0-rc.0
我正在使用 workbox-windowupdate()
方法来触发 service worker 更新检查,如workbox issue #2130中所述。这个问题似乎也与工作箱问题 #2301中的观察有关。
<script type="module">
import {Workbox} from 'https://storage.googleapis.com/workbox-cdn/releases/5.0.0-rc.0/workbox-window.prod.mjs';
if ('serviceWorker' in navigator) {
const wb = new Workbox('/sw.js');
// Grab the update button from the UI using jQuery and add a listener to it.
$('#update-button').on('click', function () {
wb.update();
});
....
}
</script>
如果找到更新,则加载新的 service worker 并进入等待状态。我监听这个事件(waiting
和externalwaiting
,在两种情况下都做同样的事情),并询问用户是现在还是以后安装更新。
function handleWaiting(wb) {
if (confirm("An update is available for this app. Install now?")) {
wb.messageSW({type: 'SKIP_WAITING'});
}
}
wb.addEventListener('waiting', event => {
handleWaiting(wb);
});
wb.addEventListener('externalwaiting', event => {
handleWaiting(wb);
});
大多数情况下,waiting
事件被触发,如果用户接受更新,则服务工作者被激活,我们可以重新加载页面以完成更新过程:
function handleActivated(wb, event) {
if (event.isUpdate) {
window.location.reload();
} else {
wb.messageSW({ type: 'CLIENTS_CLAIM' });
}
}
wb.addEventListener('activated', event => {
handleActivated(wb, event);
});
wb.addEventListener('externalactivated', event => {
handleActivated(wb, event);
});
如果waiting
事件被触发,这个过程可以正常工作。
- 对导致 service worker 文件更改的应用程序进行小幅更新。
- 按“检查更新”按钮。
- 找到新的服务人员并提示用户安装更新
- 页面已重新加载。
但是如果externalwaiting
事件被触发,那么这段代码就不起作用。新的 service worker 仍处于等待状态,我可以在 Chrome 开发工具中看到。
跳过旧服务人员收到的等待消息
如果用户确认他们想要更新SKIP_WAITING
消息,那么旧的、激活的服务工作者定义会接收到该消息。
这是我的日志的摘录,可以证明这一点。
- 来自应用程序/客户端的日志条目以“应用程序”为前缀,后跟应用程序版本。
- Service Worker 的日志条目以“Service Worker”为前缀,后跟每个 Service Worker 实例唯一的 DOB 时间戳。
01 [Application 0.0.1.2019.11.05-48] Checking for updates...
02 [Service Worker 2019-11-05 @ 15:23:14] <<<<<<<<<<<<<<< STARTING >>>>>>>>>>>>>>>
03 [Service Worker 2019-11-05 @ 15:23:14] Yay! Workbox 5.0.0-rc.0 is loaded
04 [Service Worker 2019-11-05 @ 15:23:14] Lifecycle event: [install]
05 [Application 0.0.1.2019.11.05-48] Service Worker lifecycle event: 06 [externalinstalled]
07 [Application 0.0.1.2019.11.05-48] Service Worker lifecycle event: [externalwaiting]
08 [Application 0.0.1.2019.11.05-48] handle waiting...
09 [Service Worker 2019-11-05 @ 15:20:03] Message event: [SKIP_WAITING]
在线的
- 用户刚刚按下了“检查更新”按钮。
- 一个新的 service worker 版本被发现
2019-11-05 @ 15:23:14
并且正在被解析。我们称之为 SWv2。 - Workbox 由 SWv2 加载。
- SWv2
install
事件处理程序被执行。 - 执行 Workbox 窗口
externalinstalled
事件处理程序。 - 执行 Workbox 窗口
externalwaiting
事件处理程序。 - 工作框窗口
externalwaiting
事件处理程序SKIP_WAITING
使用workboxWindow.messageSW()
- Service Worker v1 (loaded on
2019-11-05 @ 15:20:03
) 接收到跳过等待消息。什么都没发生。SWv2 保持等待状态。
与普通等待事件对比
在以下日志中,您可以看到SKIP_WAITING
等待的 service worker 收到了消息: v 2019-11-05 @ 16:07:32
。因此更新过程成功完成。
[Application 0.0.1.2019.11.05-52] Checking for updates...
[Service Worker 2019-11-05 @ 16:07:32] <<<<<<<<<<<<<<< STARTING >>>>>>>>>>>>>>>
[Service Worker 2019-11-05 @ 16:07:32] Yay! Workbox 5.0.0-rc.0 is loaded
[Service Worker 2019-11-05 @ 16:07:32] Lifecycle event: [install]
[Application 0.0.1.2019.11.05-52] Service Worker lifecycle event: [installed]
[Application 0.0.1.2019.11.05-52] Service Worker lifecycle event: [waiting]
[Application 0.0.1.2019.11.05-52] handle waiting...
[Service Worker 2019-11-05 @ 16:07:32] Message event: [SKIP_WAITING]
[Application 0.0.1.2019.11.05-52] Service Worker lifecycle event: [redundant]
[Application 0.0.1.2019.11.05-52] Service Worker lifecycle event: [activating]
[Application 0.0.1.2019.11.05-52] Service Worker lifecycle event: [controlling]
[Service Worker 2019-11-05 @ 16:07:32] Lifecycle event: [activate]
[Application 0.0.1.2019.11.05-52] Service Worker lifecycle event: [activated]
[Application 0.0.1.2019.11.05-52] Reloading this window...
[Application 0.0.1.2019.11.05-53] <<<<<<<<<<<<<<< STARTING >>>>>>>>>>>>>>>
[Application 0.0.1.2019.11.05-53] Preloading 125 images...
[Application 0.0.1.2019.11.05-53] ServiceWorker registered!
有时它只是挂起......
有时,当有新的 Service Worker 版本可用时,事情就会陷入困境。waiting
or事件处理程序永远不会被externalwaiting
触发。
发生这种情况时,控制台中没有错误,新版本的 service worker 也没有错误。
解除绑定的唯一方法是停止活动的服务工作者,取消注册并重新加载。
为什么这很重要?
在我敢发布这个应用程序之前,我需要确保更新过程在所有平台上都能完美运行......
如果用户在我发布更新时遇到这些问题中的任何一个,他们将难以获得它,而我对此无能为力。乘以安装数量 == 非常头疼。
这一切都归结为三个问题: 按重要性排列:
- 如何处理
externalwaiting
以便加载和激活新版本的 service worker?如何确保SKIP_WAITING
等待的服务人员收到消息? - 为什么生命周期事件在普通品种和外部品种之间有所不同?
- 出于测试目的,我每次都对服务人员进行相同的更新(预缓存文件的新版本)。
- 我只在一个选项卡中加载了应用程序。
- 从普通事件到外部事件的转变似乎是随机的。
- 为什么该过程有时会在生命周期的等待阶段之前卡住,我该怎么办?