From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/clients/claim/index.html | 66 +++++++++++++++++ files/zh-cn/web/api/clients/get/index.html | 60 +++++++++++++++ files/zh-cn/web/api/clients/index.html | 90 +++++++++++++++++++++++ files/zh-cn/web/api/clients/matchall/index.html | 68 +++++++++++++++++ files/zh-cn/web/api/clients/openwindow/index.html | 81 ++++++++++++++++++++ 5 files changed, 365 insertions(+) create mode 100644 files/zh-cn/web/api/clients/claim/index.html create mode 100644 files/zh-cn/web/api/clients/get/index.html create mode 100644 files/zh-cn/web/api/clients/index.html create mode 100644 files/zh-cn/web/api/clients/matchall/index.html create mode 100644 files/zh-cn/web/api/clients/openwindow/index.html (limited to 'files/zh-cn/web/api/clients') diff --git a/files/zh-cn/web/api/clients/claim/index.html b/files/zh-cn/web/api/clients/claim/index.html new file mode 100644 index 0000000000..4797f8c064 --- /dev/null +++ b/files/zh-cn/web/api/clients/claim/index.html @@ -0,0 +1,66 @@ +--- +title: Clients.claim() +slug: Web/API/Clients/claim +translation_of: Web/API/Clients/claim +--- +

{{SeeCompatTable}}{{APIRef("Service Worker Clients")}}

+ +

{{domxref("Clients")}} 接口的  claim() 方法允许一个激活的 service worker 将自己设置为其 {{domxref("ServiceWorkerRegistration.scope", "scope")}} 内所有clients 的{{domxref("ServiceWorkerContainer.controller", "controller")}} . 这会在由此service worker 控制的任何 clients 中触发 {{domxref("ServiceWorkerContainer","navigator.serviceWorker")}}  上的  "controllerchange"  事件.

+ +

当一个 service worker 被初始注册时，页面在下次加载之前不会使用它。 claim() 方法会立即控制这些页面。请注意，这会导致 service worker 控制通过网络定期加载的页面，或者可能通过不同的 service worker 加载.

+ +

语法

+ +
await clients.claim();
+
+ +

参数

+ +

None.

+ +

返回

+ +

A {{jsxref("Promise")}} for void.

+ +

示例

+ +

The following example uses claim() inside service worker's "activate" event listener so that clients loaded in the same scope do not need to be reloaded before their fetches will go through this service worker.

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

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#clients-claim', 'claim()')}}{{Spec2('Service Workers')}}Initial definition.
+ +

浏览器兼容性

+ +
+ + +

{{Compat("api.Clients.claim")}}

+
+ +

See also

+ + diff --git a/files/zh-cn/web/api/clients/get/index.html b/files/zh-cn/web/api/clients/get/index.html new file mode 100644 index 0000000000..3a9d732f63 --- /dev/null +++ b/files/zh-cn/web/api/clients/get/index.html @@ -0,0 +1,60 @@ +--- +title: Clients.get() +slug: Web/API/Clients/get +translation_of: Web/API/Clients/get +--- +
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
+ +

{{domxref("Clients")}} 接口的 get() 方法 获取给定 id 匹配的Service Worker client，并在 {{jsxref("Promise")}} 中返回它.

+ +

语法

+ +
self.clients.get(id).then(function(client) {
+  // do something with your returned client
+});
+ +

参数

+ +
+
id
+
一个 {{domxref("DOMString")}} ，表示您想要获取的 client id.
+
+ +

返回

+ +
+
一个resolve为 {{domxref("Client")}} 对象的 Promise .
+
+ +

示例

+ +
self.clients.get(options).then(function(client) {
+  self.clients.openWindow(client.url);
+});
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#clients-get-method', 'get()')}}{{Spec2('Service Workers')}}Initial definition
+ +

浏览器兼容性

+ +
+ + +

{{Compat("api.Clients.get")}}

+
+ +

 

diff --git a/files/zh-cn/web/api/clients/index.html b/files/zh-cn/web/api/clients/index.html new file mode 100644 index 0000000000..713e753621 --- /dev/null +++ b/files/zh-cn/web/api/clients/index.html @@ -0,0 +1,90 @@ +--- +title: Clients +slug: Web/API/Clients +translation_of: Web/API/Clients +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

Clients 接口提供对 {{domxref("Client")}} 对象的访问. 通过在  service worker 中使用 {{domxref("ServiceWorkerGlobalScope", "self")}}.clients 访问它.

+ +

方法

+ +
+
{{domxref("Clients.get()")}}
+
返回一个匹配给定 {{domxref("Client.id", "id")}} 的 {{domxref("Client")}} 的 {{jsxref("Promise")}} .
+
{{domxref("Clients.matchAll()")}}
+
返回一个 {{domxref("Client")}} 对象数组的 {{jsxref("Promise")}} . options参数允许您控制返回的clients类型. 
+
{{domxref("Clients.openWindow()")}}
+
打开给定URL的新浏览器窗口，并返回新 {{domxref("WindowClient")}} a 的 {{jsxref("Promise")}} .
+
{{domxref("Clients.claim()")}}
+
允许一个激活的 service worker 将自己设置为其{{domxref("ServiceWorkerRegistration.scope", "scope")}} 内所有 clients 的 {{domxref("ServiceWorkerContainer.controller", "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!");
+  }());
+});
+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#clients', 'Clients')}}{{Spec2('Service Workers')}}Initial definition
+ +

浏览器兼容性

+ +
+ + +

{{Compat("api.Clients")}}

+
+ +

See also

+ + diff --git a/files/zh-cn/web/api/clients/matchall/index.html b/files/zh-cn/web/api/clients/matchall/index.html new file mode 100644 index 0000000000..1a07e1456c --- /dev/null +++ b/files/zh-cn/web/api/clients/matchall/index.html @@ -0,0 +1,68 @@ +--- +title: Clients.matchAll() +slug: Web/API/Clients/matchAll +translation_of: Web/API/Clients/matchAll +--- +
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
+ +

{{domxref("Clients")}} 接口的  matchAll() 方法返回 service worker {{domxref("Client")}} 对象列表的 Promise . 包含 options 参数以返回域与关联的 service worker 的域相同所有 service worker 的 clients. 如果未包含 options，该方法仅返回由service worker控制的 service worker clients.

+ +

语法

+ +
ServiceWorkerClients.matchAll(options).then(function(clients) {
+  // do something with your clients list
+});
+ +

参数

+ +
+
options {{optional_inline}}
+
一个options对象，允许您为匹配操作设置选项。 可用选项包括: +
    +
  • includeUncontrolled: {{domxref("Boolean")}} — 如果设置为true, 匹配操作将返回与当前服务工作者共享相同源的所有服务工作者客户端。 否则，它仅返回由当前服务工作者控制的服务工作者客户端。 默认值为false.
    • +
  • type: 设置想要匹配的 clients 类型. 可用值包括 window, worker, sharedworker, 和 all. 默认是 all.
    • +
+
+
+ +

返回值

+ +
+
resolve为一个 {{domxref("Client")}} 对象数组的 Promise . 在 Chrome 46/Firefox 54 以及更高版本中, 该方法以最近关注的顺序返回 clients , 根据规范更正.
+
+ +

示例

+ +
clients.matchAll(options).then(function(clientList) {
+  for (var i = 0 ; i < clients.length ; i++) {
+    if (clientList[i].url === 'index.html') {
+      clients.openWindow(clientList[i]);
+      // or do something else involving the matching client
+    }
+  }
+});
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#clients', 'Clients')}}{{Spec2('Service Workers')}}Initial definition
+ +

浏览器兼容性

+ +
+ + +

{{Compat("api.Clients.matchAll")}}

+
diff --git a/files/zh-cn/web/api/clients/openwindow/index.html b/files/zh-cn/web/api/clients/openwindow/index.html new file mode 100644 index 0000000000..18a85d7538 --- /dev/null +++ b/files/zh-cn/web/api/clients/openwindow/index.html @@ -0,0 +1,81 @@ +--- +title: Clients.openWindow() +slug: Web/API/Clients/openWindow +translation_of: Web/API/Clients/openWindow +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

{{domxref("Clients")}}接口的 openWindow() 方法创建一个顶级的浏览器上下文并加载给定的 URL. 如果调用脚本没有显示弹出窗口的权限, openWindow() 将抛出 InvalidAccessError.

+ +

在Firefox中，只有在作为通知点击事件的结果调用时，才允许该方法显示弹出窗口.

+ +

在Chrome for Android中，该方法可以改为在先前添加到用户主屏幕的 standalone web app 提供的现有浏览上下文中打开URL.

+ +

语法

+ +
ServiceWorkerClients.openWindow(url).then(function(WindowClient) {
+  // do something with your WindowClient
+});
+ +

参数

+ +
+
url
+
一个 {{domxref("USVString")}} ，表示要在窗口中打开的client的URL。 通常，此值必须是与调用脚本有相同域的URL.
+
+ +

返回值

+ +
+
如果URL来自与服务工作者相同的域，则resolve为 {{domxref("WindowClient")}} 对象的Promise，否则resolve为 {{Glossary("null", "null value")}} .
+
+ +

示例

+ +
// When the user clicks a notification focus the window if it exists or open
+// a new one otherwise.
+onotificationclick = function(event) {
+  var found = false;
+  clients.matchAll().then(function(clientsArr) {
+    for (i = 0; i < clientsArr.length; i++) {
+      if (clientsArr[i].url === event.data.url) {
+        // We already have a window to use, focus it.
+        found = true;
+        clientsArr[i].focus();
+        break;
+      }
+    }
+    if (!found) {
+      // Create a new window.
+      clients.openWindow(event.data.url).then(function(windowClient) {
+        // do something with the windowClient.
+      });
+    }
+  });
+};
+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#clients', 'Clients')}}{{Spec2('Service Workers')}}Initial definition.
+ +

浏览器兼容性

+ +
+ + +

{{Compat("api.Clients.openWindow")}}

+
-- cgit v1.2.3-54-g00ecf