Service Worker 确定客户端数量

如何解决Service Worker 确定客户端数量

我们有一个支持 PWA 的 SaaS 应用，我们正在使用 WorkBox 来完成繁重的工作。到目前为止，我们一直在遵循经过验证且值得信赖的方法，向用户显示可用更新横幅，提示他们更新他们的网络应用。

查看使用数据（通过 Sentry.io），我们注意到大多数用户似乎只是忽略了更新横幅并继续使用他们所在的版本。

所以我们正在考虑尝试不同的东西。这是为了在他们更改 Web 应用程序中的路由时自动执行更新（当我们知道有可用更新时）。

测试表明它确实有效。但是有一个副作用，那就是如果他们在多个选项卡中打开了 Web 应用程序，那么所有选项卡都会更新。如果用户在后台的其中一个选项卡中打开了未保存的表单，这可能会给用户带来问题 - 他们可能会丢失他们的工作。

这发生在这段代码中：

// app shell page,created lifecycle hook
document.addEventListener('swUpdated',this.SetPwaRegistration,{ once: true })
navigator.serviceWorker.addEventListener('controllerchange',() => {
  if (this.refreshing) {
    return
  }
  this.refreshing = true
  window.location.reload()
})

// app shell page,method in methods collection
SetPwaRegistration (event) {
  // call mutation to pass the registration object to Vuex
  this.PWA_REGISTRATION_SET({ pwaRegistration: event.detail })
}

// main.js
router.afterEach((to,from) => {
  // retrieve the registration object from Vuex
  const pwaRegistration = app.$store.getters.pwaRegistration
  if (pwaRegistration) {
      pwaRegistration.waiting.postMessage('skipwaiting')
  }
})

以上代码来自我们的 Vue.js 应用代码库，this.refreshing 在 false 属性集合中默认设置为 data。

我想知道是否可以确定 Service Worker 是否只有一个客户端受其控制（即 Web 应用程序仅在 1 个浏览器选项卡中打开），如果是这种情况，自动更新可以在没有潜在问题的情况下发生。如果有多个客户端，那么我们将照常显示更新横幅。

作为对此的简要更新，我遇到了与此类似的代码示例：

self.clients.matchAll().then(clients => {
  const clientCount = clients.length
  // store count of client in Vuex
})

这看起来像是一个选项（即计算有多少客户端，将其存储在 Vuex 商店中），我只是不确定应该在哪里使用它。

解决方法

如果您想完全从 Service Worker 内部协调重新加载，您可以通过使用 WindowClient 接口以编程方式导航到当前 URL 的任何内容，这大致相当于重新加载。

要记住的两件事 navigate() 仅适用于 WindowClients（而不是 Workers），并且您只能在 Service Worker 控制 WindowClient 时调用它{1}}。

综合起来，这里有一些东西可以尝试：

// This can be run,e.g.,in a `message` handler in your SW:
self.clients.matchAll({
  // These options are actually the defaults,but just
  // to be explicit:
  includeUncontrolled: false,type: 'window',}).then((clients) => {
  if (clients.length === 1) {
    clients[0].navigate(clients[0].url);
  }
})