Clients - Web API 接口参考 编辑

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

Clients 接口提供对 Client 对象的访问. 通过在  service worker 中使用 self.clients 访问它.

方法

Clients.get()

返回一个匹配给定 id 的 Client 的 Promise .

Clients.matchAll()

返回一个 Client 对象数组的 Promise . options参数允许您控制返回的clients类型. 

Clients.openWindow()

打开给定URL的新浏览器窗口，并返回新 WindowClient a 的 Promise .

Clients.claim()

允许一个激活的 service worker 将自己设置为其scope 内所有 clients 的 controller . 

示例

下面示例显示一个已有的聊天窗口，或者当用户点击通知时创建新的窗口.

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

    let chatClient;

    // Let's see if we already have a chat window open:
    for (const client of allClients) {
      const url = new URL(client.url);

      if (url.pathname == '/chat/') {
        // Excellent, let's use it!
        client.focus();
        chatClient = client;
        break;
      }
    }

    // If we didn't find an existing chat window,
    // open a new one:
    if (!chatClient) {
      chatClient = await clients.openWindow('/chat/');
    }

    // Message the client:
    chatClient.postMessage("New chat messages!");
  }());
});

规范

Specification	Status	Comment
Service Workers Clients	Working Draft	Initial definition

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

See also

• Using Service Workers
• Is ServiceWorker ready?
• Promise