Clients
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2018년 4월.
참고 : This feature is only available in Service Workers.
Clients
인터페이스는 Client
객체에 대한 접근을 제공합니다. 서비스 워커 내의
를 통해 접근할 수 있습니다.self
.clients
인스턴스 메서드
Clients.get()
Clients.matchAll()
-
Client
객체 배열의Promise
를 반환합니다. 옵션 인수를 사용하면 반환되는 클라이언트의 유형을 제어할 수 있습니다. Clients.openWindow()
-
주어진 URL의 새 브라우저 창을 열고 새로운
WindowClient
의Promise
를 반환합니다. Clients.claim()
-
활성화된 서비스 워커가 자신의
scope
내 모든 클라이언트의controller
로 설정될 수 있습니다.
예제
다음 예제는 사용자가 알림을 클릭했을 때 기존 채팅 창을 보여주거나 새로운 채팅 창을 생성하는 것을 보여줍니다.
js
addEventListener("notificationclick", (event) => { event.waitUntil( (async () => { 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/"); } // 클라이언트에게 메시지를 보냅니다. chatClient.postMessage("New chat messages!"); })(), ); });
명세서
Specification |
---|
Service Workers> # clients-interface> |
브라우저 호환성
Loading…