渐进式 Web 应用程序：skipWaiting() 与多个服务工作者版本答案

【问题标题】：Progressive Web App: skipWaiting() with multiple service worker versions渐进式 Web 应用程序：skipWaiting() 与多个服务工作者版本
【发布时间】：2020-05-22 21:54:48
【问题描述】：

[上下文] 我完成了Jake Archibald 的精彩 Udacity 课程，在这里可以找到：Offline Web Applications。他的作品提供了一个 Toasts 对话框，提醒用户有可用的更新，并邀请他们进行更新：

Refresh / Dismiss Dialog

虽然此对话框可供用户使用，但手头有一个我似乎无法解决的极端情况：

Service-Worker 可以在客户端更新本地实例之前被更新任意次数，将 Service-Worker 的编号版本推送到“再多一次”。 strong> 例如，当前活跃的 Service Worker 是 #821，而正在等待的 Service Worker 现在是 #824

active and waiting service workers

[问题] 我找不到正确的方法来提醒浏览器下一个要安装的 service worker 需要是 #824，而不是 #822，对话框 + PWA 告诉我当前浏览器是“冗余”的，我可以无需刷新即可访问 service-worker #824，然后单击更新按钮。

一旦设置了 service-worker 并引入了 skipWaiting()，我可以使用任何版本的 Jake 代码重新创建它。

我实际上只是希望能够涵盖在用户决定更新其本地 PWA 之前 service-worker 更新 2 次或更多次的极端情况。

你可以在 github 上找到 Jake 的代码：Jakearchibald/wittr

[ASK]：有没有人找到解决这种极端情况的方法？如果是这样，你如何解决它？我所看到的没有意义，因为服务工作者的生命周期似乎受到 Google 文档的尊重：service-workers/lifecyle

【问题讨论】：

标签： progressive-web-apps

【解决方案1】：

我做了很多额外的阅读/研究，并在 Github 上找到了以下讨论线程： - Provide an easier way to listen for waiting/activated/redundant Service Workers - Immediate Service Worker - Recommended Approach for Refreshing Page on new SW - Provide a one-line way to listen for a waiting Service Worker

这个想法似乎是在 2017 年提出的，并且在很大程度上已经过时了。但是，您可以加倍使用

navigator.serviceWorker.waiting.then(reg => { if (confirm('refresh now?')) reg.waiting.postMessage('skipWaiting'); });

这将使您能够在激活 Web Worker #1 之后侦听新的 Web Worker，然后将 Web Worker #2 设置为冗余，并将 Web Worker #3 移动到等待状态。它是钝的和间接的，但至少你现在可以将 3# 线程向上移动并进入正确的插槽。

向dfabulich、Matt Gaunt 和Beatrix Perez 大声疾呼

【讨论】：