PushManager

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

보안 컨텍스트: 이 기능은 일부 또는 모든 지원 브라우저의 보안 컨텍스트 (HTTPS)에서만 사용할 수 있습니다.

참고 : 이 기능은 Web Worker에서 사용할 수 있습니다.

Push API의 PushManager 인터페이스는 타사 서버로부터 알림을 받는 방법과 푸시 알림을 위한 URL을 요청하는 방법을 제공합니다.

이 인터페이스는 ServiceWorkerRegistration.pushManager 속성을 통해 접근할 수 있습니다.

정적 속성

PushManager.supportedContentEncodings

푸시 메시지의 페이로드를 암호화하는 데 사용 가능한 지원되는 콘텐츠 인코딩 배열을 반환합니다.

인스턴스 메서드

PushManager.getSubscription()

기존 푸시 구독을 검색합니다. 기존 구독의 세부 정보가 포함된 PushSubscription 객체로 이행되는 Promise를 반환합니다. 기존 구독이 존재하지 않으면 null 값으로 이행됩니다.

PushManager.permissionState()

현재 PushManager의 권한 상태인 'granted', 'denied', 'prompt' 중 하나로 이행되는 Promise를 반환합니다.

PushManager.subscribe()

푸시 서비스를 구독합니다. 푸시 구독의 세부 정보가 포함된 PushSubscription 객체로 이행되는 Promise를 반환합니다. 현재 서비스 워커에 기존 구독이 없는 경우 새로운 푸시 구독이 생성됩니다.

사용 중단된 메서드

PushManager.hasPermission()

요청하는 웹앱의 PushPermissionStatus인 granted, denied, default 중 하나로 이행되는 Promise를 반환합니다. PushManager.permissionState()로 대체되었습니다.

PushManager.register()

푸시 구독을 구독합니다. PushManager.subscribe()로 대체되었습니다.

PushManager.registrations()

기존 푸시 구독을 검색합니다. PushManager.getSubscription()으로 대체되었습니다.

PushManager.unregister()

지정된 구독 엔드포인트를 등록 취소하고 삭제합니다. 갱신된 API에서 구독은 PushSubscription.unsubscribe() 메서드 호출에 의해 등록 취소됩니다.

예제

js
this.onpush = (event) => {
  console.log(event.data);
  // 여기서 우리는 데이터를 IndexedDB에 쓸 수 있고, 열린 창으로 전송하고,
  // 알림을 표시하는 등의 작업을 할 수 있습니다.
};

navigator.serviceWorker
  .register("serviceworker.js")
  .then((serviceWorkerRegistration) => {
    serviceWorkerRegistration.pushManager.subscribe().then(
      (pushSubscription) => {
        console.log(pushSubscription.endpoint);
        // 이제 애플리케이션 서버에 필요한 푸시 구독
        // 세부 정보를 사용할 수 있습니다.
        // 예를 들어 fetch() API를 사용하여 서버로 전송할 수 있습니다.
      },
      (error) => {
        console.error(error);
      },
    );
  });

명세서

Specification
Push API
# pushmanager-interface

브라우저 호환성

BCD tables only load in the browser

같이 보기