服务工作者 self.clients - JavaScript

在 JavaScript 中，服务工作者是一种可编程的网络代理，它允许您以编程方式控制网站/应用程序的网络请求和响应。服务工作者在离线时仍然可以运行，因此它们被广泛用于构建离线应用程序和改善应用程序的性能。

在服务工作者中，可以使用 self.clients API 与客户端进行通信。此 API 允许将消息发送到客户端，并从客户端接收消息。下面我们将深入探讨 self.clients API 的工作原理和用法。

self.clients 的属性

self.clients 是代表客户端的集合。该集合包括活动的客户端以及所有作为服务工作者已经控制的先前打开的页面。通过 self.clients，您可以发送消息给所有客户端或特定客户端。

self.clients.matchAll()

使用 self.clients.matchAll() 方法可以获取当前所有客户端的列表。通常，此方法在启动服务工作者时调用，并缓存所有先前打开的页面的客户端。以下是此方法的示例用法：

self.addEventListener('activate', event => {
  event.waitUntil(self.clients.matchAll().then(clients => {
    clients.forEach(client => {
      // do something with client
    })
  }))
})

self.clients.get()

使用 self.clients.get() 方法获取特定的客户端。该方法接受一个 ID 作为其参数，并且只返回具有该 ID 的客户端。以下是此方法的示例用法：

self.addEventListener('message', event => {
  event.waitUntil(self.clients.get(event.source.id).then(client => {
    // do something with client
  }))
})

self.clients 的方法

self.clients 具有以下方法，可用于与客户端进行通信。

self.clients.claim()

使用 self.clients.claim() 方法，可以确保服务工作者控制了所有已打开的客户端。这意味着即使打开了另一个页面，它也会立即从服务工作者控制之下。

以下是使用 self.clients.claim() 方法的示例：

self.addEventListener('activate', event => {
  event.waitUntil(self.clients.claim())
})

self.clients.openWindow()

使用 self.clients.openWindow() 方法，可以打开一个新的浏览器标签页或窗口。此方法接受一个 URL 作为其参数，该 URL 是要打开的新标签页或窗口的网址。以下是此方法的示例用法：

self.addEventListener('message', event => {
  event.waitUntil(self.clients.openWindow('/new-page'))
})

self.clients.matchAll()

除了属性之外，self.clients 还有一个叫做 matchAll() 的方法。该方法接受一个可选的选项对象，并返回一个 Promise，其中包含与给定条件相匹配的客户端。以下是此方法的示例用法：

self.addEventListener('message', event => {
  event.waitUntil(self.clients.matchAll({ includeUncontrolled: true }).then(clients => {
    clients.forEach(client => {
      // do something with client
    })
  }))
})

小结

使用 self.clients API 可以轻松地管理客户端，并在服务工作者和客户端之间交换消息。使用此 API，可以构建离线应用程序和改善应用程序的性能。