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

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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

方法

Clients.get()

对于匹配给定 idClient,返回一个 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 的定义
编者的草案 初始定义

桌面浏览器兼容性

特性 Chrome Edge Firefox Internet Explorer Opera Safari
基础支持 40 未知 441 不支持 27 不支持
claim 42 未知 441 不支持 29 不支持
get 51 未知 451 不支持 38 不支持
matchAll 472 未知

441

542

不支持 32 不支持
openWindow

40

423

434

515

未知 451 不支持 38 不支持

移动浏览器兼容性

特性 Android Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
基础支持 40 40 未知 44 未知 27 不支持
claim 42 42 未知 44 未知 29 不支持
get 不支持 51 未知 45 未知 38 不支持
matchAll 472 472 未知

44

542

未知 32 不支持
openWindow

40

423

434

515

40

423

434

515

未知 45 未知 38 不支持

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

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

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

4. 可以打开任何网址。

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

相关链接