Javascript 服务工作者确定客户端的数量

我们有一个支持PWA的SaaS应用程序，我们正在使用Workbox进行繁重的工作。到目前为止，我们一直遵循一个行之有效的方法，向用户显示“更新可用”横幅，提示他们更新自己的web应用程序

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

所以我们正在尝试一些不同的东西。这是在他们更改web应用程序中的路线时自动执行更新（当我们知道有可用的更新时）

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

这在这段代码中发生：

//应用程序外壳页，已创建生命周期挂钩
document.addEventListener（'swUpdated'，this.setpWareRegistration，{once:true}）
navigator.serviceWorker.addEventListener（'controllerchange'，（）=>{
如果（这个。刷新）{
返回
}
这是真的
window.location.reload（）
})
//应用程序外壳页，方法集合中的方法
SetpWareRegistration（事件）{
//调用mutation将注册对象传递给Vuex
此.PWA_注册集（{pwaRegistration:event.detail}）
}
//main.js
路由器。每个之后（（到，从）=>{
//从Vuex检索注册对象
const pwaRegistration=app.$store.getters.pwaRegistration
if（PWA注册）{
pwaRegistration.waiting.postMessage（'skipWaiting'））
}
})

上面的代码来自我们的Vue.js应用程序代码库，

this.refreshing

在

data

属性集合中默认设置为

false

我想知道的是，是否有可能确定服务人员是否只有一个客户端在其控制下（即web应用程序仅在1个浏览器选项卡中打开），如果是这种情况，则自动更新可以在没有潜在问题的情况下进行。如果有多个客户端，那么我们将像往常一样显示更新横幅

---

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

self.clients.matchAll（）。然后（clients=>{
const clientCount=clients.length
//Vuex中客户端的存储计数
})

---

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

如果您想完全在服务人员内部协调重新加载，可以通过使用接口以编程方式导航到当前URL的任何位置，从而有效地实现这一点，这大致相当于重新加载

要记住的两件事只适用于

WindowClient

s（而不是

Worker

s），并且只有在服务人员控制

WindowClient

时才能调用它

总而言之，这里有一些东西可以尝试：

//这可以运行，例如，在软件中的“消息”处理程序中：
self.clients.matchAll({
//这些选项实际上是默认值，但只是
//明确地说：
includeUncontrolled:false，
键入：“窗口”，
})。然后（（客户）=>{
if（clients.length==1）{
客户端[0]。导航（客户端[0]。url）；
}
})

谢谢杰夫。如果我理解正确，那么这是否只会重新加载“接收”更新的特定选项卡（客户端）？也就是说，我可以删除更新所有客户端的

navigator.serviceWorker.addEventListener（'controllerchange'，…）

代码位？我想我明白了。。在sw.js中，我当前有

if（e.data===='skipWaiting'）{self.skipWaiting（）}

我将用您的建议替换它？如果您想确保新安装的服务工作者首先激活，您仍然需要保留触发

skipWaiting（）

的逻辑。我发布的代码片段是调用

window.location.reload（）

的直接替代方法，确保仅当一个受控客户端窗口打开时才进行重新加载。我觉得这就是你的目标。再次感谢杰夫，是的，你的印象是对的。我将对代码示例进行更多的研究。我会去的：）非常感谢。