Clients - 提供访问 Client 对象的接口

Clients 接口提供了对 Client 对象的访问。通过在服务 worker 中的 self.clients 访问它。

方法

Clients.get()

对于匹配给定 id 的Client，返回一个 Promise。

Clients.matchAll()

返回一个 Promise，解析为一个包含 Client 对象的数组。可以通过可选的参数来控制返回的客户端类型。

Clients.openWindow()

打开给定 URL 的新浏览器窗口，返回 Promise，解析为新的 WindowClient 对象。

Clients.claim()

允许活动的服务 worker 将其自身设置为 scope 内的所有客户端的 controller。

实例

以下实现显示现有聊天窗口，或在用户单击通知时创建新窗口。

addEventListener('notificationclick', event => {
  event.waitUntil(async function() {
    const allClients = await clients.matchAll({
      includeUncontrolled: true
    });

    let chatClient;

    // 让我们看看我们是否已经打开了一个聊天窗口：
    for (const client of allClients) {
      const url = new URL(client.url);

      if (url.pathname == '/chat/') {
        // 很好，让我们用吧！
        client.focus();
        chatClient = client;
        break;
      }
    }

    // 如果我们没有找到现有的聊天窗口，
    // 打开一个新的：
    if (!chatClient) {
      chatClient = await clients.openWindow('/chat/');
    }

    // 给 client 发送信息：
    chatClient.postMessage("新的聊天信息！");
  }());
});

规范

规范	状态	备注
Service Workers Clients 的定义	编者的草案	初始定义

桌面浏览器兼容性

移动浏览器兼容性

1. Firefox 45 和 52 扩展支持版本（ESR）中已禁用了服务 workers（和推送）。

2. Client 对象按就近触发过的顺序返回。

3. 只能打开同一来源的网址。

4. 可以打开任何网址。

5. 网址可以在独立 Web 应用程序提供的现有浏览上下文中打开

相关链接

• 使用服务 Workers
• ServiceWorker 准备好了吗？- Is ServiceWorker ready?
• Promise