알림 트리거 API

알림 트리거를 사용하면 네트워크 연결이 필요 없는 로컬 알림을 예약할 수 있으므로 캘린더 앱과 같은 사용 사례에 적합합니다.

Thomas Steiner

알림 트리거란 무엇인가요?

웹 개발자는 Web Notifications API를 사용하여 알림을 표시할 수 있습니다. 이 기능은 속보 이벤트나 수신된 메시지와 같은 시간에 민감한 정보를 사용자에게 알리기 위해 Push API와 함께 자주 사용됩니다. 알림은 사용자의 기기에서 JavaScript를 실행하여 표시됩니다.

Push API의 문제는 시간 또는 위치와 같은 특정 조건이 충족될 때 표시되어야 하는 알림을 트리거하는 데 안정적이지 않다는 점입니다. 시간 기반 조건의 예로는 오후 2시에 상사와의 중요한 회의를 알려주는 캘린더 알림이 있습니다. 위치 기반 조건의 예는 슈퍼마켓 근처에 도착하면 우유를 사야 한다고 알려주는 알림입니다. 네트워크 연결 또는 절전 모드와 같은 배터리 절약 기능으로 인해 푸시 기반 알림의 전송이 지연될 수 있습니다.

알림 트리거는 트리거 조건이 있는 알림을 미리 예약할 수 있도록 하여 이 문제를 해결합니다. 따라서 네트워크 연결이 없거나 기기가 배터리 절약 모드에 있더라도 운영체제에서 적절한 시점에 알림을 전송합니다.

사용 사례

캘린더 애플리케이션은 시간 기반 알림 트리거를 사용하여 사용자에게 예정된 회의를 알려줄 수 있습니다. 캘린더 앱의 기본 알림 스킴은 회의 1시간 전에 첫 번째 헤드업 알림을 표시하고 5분 전에 더 긴급한 알림을 표시하는 것일 수 있습니다.

TV 방송 네트워크는 사용자가 좋아하는 TV 프로그램이 시작되거나 회의 라이브 스트림이 시작될 예정임을 사용자에게 알릴 수 있습니다.

시간대 변환 사이트는 시간 기반 알림 트리거를 사용하여 사용자가 전화 회의나 영상 통화에 대한 알람을 예약할 수 있도록 할 수 있습니다.

현재 상태

알림 트리거 사용 방법

about://flags를 통해 사용 설정

출처 체험판 토큰 없이 로컬에서 Notification Triggers API를 실험하려면 about://flags에서 #enable-experimental-web-platform-features 플래그를 사용 설정하세요.

기능 감지

showTrigger 속성이 있는지 확인하여 브라우저가 알림 트리거를 지원하는지 확인할 수 있습니다.

if ('showTrigger' in Notification.prototype) {
  /* Notification Triggers supported */
}

알림 예약

알림을 예약하는 작업은 일반 푸시 알림을 표시하는 것과 비슷하지만 TimestampTrigger 객체를 값으로 사용하여 showTrigger 조건 속성을 알림의 options 객체에 전달해야 합니다.

const createScheduledNotification = async (tag, title, timestamp) => {
  const registration = await navigator.serviceWorker.getRegistration();
  registration.showNotification(title, {
    tag: tag,
    body: 'This notification was scheduled 30 seconds ago',
    showTrigger: new TimestampTrigger(timestamp + 30 * 1000),
  });
};

예약된 알림 취소하기

예약된 알림을 취소하려면 먼저 ServiceWorkerRegistration.getNotifications()를 통해 특정 태그와 일치하는 모든 알림 목록을 요청합니다. 예약된 알림이 목록에 포함되려면 includeTriggered 플래그를 전달해야 합니다.

const cancelScheduledNotification = async (tag) => {
  const registration = await navigator.serviceWorker.getRegistration();
  const notifications = await registration.getNotifications({
    tag: tag,
    includeTriggered: true,
  });
  notifications.forEach((notification) => notification.close());
};

디버깅

Chrome DevTools 알림 패널을 사용하여 알림을 디버그할 수 있습니다. 디버깅을 시작하려면 Start recording events(이벤트 녹화 시작)