有没有办法在页面中告诉 service worker 最近升级了？

Question

我有一个带服务人员的 SPA。

我不想强迫用户更新，所以通常新工作人员会在后台更新，但我会通知用户，他们可以点击一个按钮向工作人员发送消息给 skipWaiting。发生这种情况时，我依靠 oncontrollerchange 强制他们打开的任何其他选项卡进行刷新。

我想显示 link 以发布说明在工作人员升级后，由于刷新所有选项卡或他们强制刷新。

但是，我不想在他们第一次访问时或每次 service worker 激活时显示这些注释。如果他们不阅读发行说明，我不想继续唠叨他们。

是否有事件或可靠的设计模式可以用来告诉（在页面中）服务工作者已更新到新版本？

Answer 1

一个简单的解决方案是将查询参数添加到当前 URL，而不是调用 location.reload() 来重新加载您的页面，而是将 location 值更改为 URL.

类似于：

// Inside your `controllerchange` listener, call reloadWithNotes()
function reloadWithNotes() {
  const url = new URL(location.href);
  url.searchParams.set('showNotes', '');
  location = url.href;
}

// Elsewhere...
window.addEventListener('load', () => {
  const url = new URL(location.href);
  if (url.searchParams.has('showNotes')) {
    // Show your release notes.

    // Remove the parameter.
    url.searchParams.delete('showNotes');
    window.history.replaceState({}, document.title, url.href);
  }
});

有没有办法在页面中告诉 service worker 最近升级了？

Is there a way to tell in the page that a service worker has recently upgraded?

javascript

service-worker