이 페이지는 Cloud Translation API를 통해 번역되었습니다.

알림 트리거 API

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

Thomas Steiner

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

웹 개발자는 Web Notifications API 이 기능은 주로 Push API를 사용하여 사용자에게 긴급한 정보(예: 수신 메시지 등이 포함됩니다 알림은 전송합니다.

Push API의 문제는 알림 트리거가 반드시 신뢰할 수 없다는 것입니다. 특정 조건(예: 시간, 위치)이 충족될 때 표시됩니다. 시간 기반 모델의 예시는 조건은 상사와의 중요한 회의를 오후 2시. 위치 기반 조건의 예로는 우유를 사라고 알려 주는 알림이 있습니다. 50% 할인됩니다. 네트워크 연결 또는 배터리 보존 잠자기 모드와 같은 기능은 푸시 기반 알림의 전달을 지연시킬 수 있습니다.

알림 트리거는 트리거로 알림을 예약할 수 있도록 하여 이 문제를 해결합니다. 운영체제가 적시에 알림을 전달할 수 있도록 미리 알림 조건을 미리 설정합니다. 기기가 절전 모드인 경우에도 마찬가지입니다.

사용 사례

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

TV 방송사는 사용자에게 좋아하는 TV 프로그램이 곧 시작되거나 컨퍼런스 생중계라고 알릴 수 있습니다. 스트림이 곧 시작됩니다.

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

현재 상태

단계	상태
1. 설명 만들기	완전함
2. 사양의 초기 초안 만들기	시작되지 않음
3. 의견을 수렴하고 디자인을 반복합니다.	진행 중
4. 오리진 트라이얼	완료
5. 출시	시작되지 않음

알림 트리거 사용 방법

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 알림 패널을 사용하여 알림을 디버그할 수 있습니다. 시작 이벤트 기록 시작을 누릅니다. <ph type="x-smartling-placeholder"></ph> 또는 Control+E (Mac은 Command+E)를 누르세요. Chrome DevTools 기록 3일 동안 예약된 알림, 표시된 알림, 종료된 알림을 포함한 모든 알림 이벤트를 DevTools가 닫혀 있을 때도 작동합니다.

예약된 알림 이벤트가 Application 패널에 있는 Chrome DevTools의 알림 창에 기록되었습니다. — </ph> 예약된 알림

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

표시된 알림 이벤트가 Chrome DevTools의 알림 창에 기록되었습니다. — </ph> 표시된 알림입니다.

데모

데모에서 알림 트리거가 작동하는 것을 확인할 수 있습니다. 알림을 표시하고, 예약된 알림을 나열하고, 취소할 수 있습니다. 소스 코드는 글리치.

보안 및 권한

Chrome팀은 핵심 원칙을 사용하여 Notification Triggers API를 설계 및 구현했습니다. 강력한 웹 플랫폼 기능에 대한 액세스 제어에 정의됨(사용자 포함) 관리, 투명도 및 인체공학을 중시합니다. 이 API에는 서비스 워커가 필요하기 때문에 있습니다. API를 사용하려면 일반 푸시 알림과 동일한 권한이 필요합니다.

사용자 제어

이 API는 ServiceWorkerRegistration의 컨텍스트에서만 사용할 수 있습니다. 이것은 필요한 데이터는 동일한 컨텍스트에 저장되며 서비스 워커가 사용 중지될 때 원본의 모든 사이트 데이터를 삭제하는 경우 쿠키를 차단하면 작업자가 Chrome에 설치되지 않으므로 이 API가 사용되지 않습니다. 알림을 통해 사용자가 사이트 설정에서 항상 사이트 설정을 사용 중지할 수 있습니다.

투명성

Push API와 달리 이 API는 예약된 알림을 의미하는 네트워크에 의존하지 않습니다. badge, icon, image 속성 즉, 예약된 알림을 개발자가 관찰할 수 없습니다. 사용자가 알림과 상호작용할 때까지 서비스 워커의 절전 모드를 해제하지 않습니다. 따라서 현재 개발자가 사용자에 대한 정보를 얻을 수 있는 알려진 방법이 없습니다. IP 주소 위치정보 조회와 같은 잠재적으로 개인 정보를 침해할 수 있는 접근 방식을 통해 익힐 수 있습니다. 또한 이 디자인은 이 기능은 운영체제가 제공하는 예약 메커니즘을 선택적으로 활용할 수 있게 합니다. Android의 AlarmManager, 배터리 보존에 도움이 됩니다.

의견

Chrome팀에서 알림 트리거 사용 경험에 대한 의견을 듣고자 합니다.

API 설계에 대해 알려주세요.

API에서 예상대로 작동하지 않는 부분이 있나요? 또는 누락된 메서드가 있나요? 속성이 있나요? 보안에 대한 질문이나 의견이 있으면 무엇인가요? 알림 트리거 GitHub 저장소에서 사양 문제를 신고하거나 다음에 의견을 추가하세요. 생성할 수 있습니다

구현에 문제가 있습니까?

Chrome 구현에서 버그를 발견하셨나요? 아니면 구현이 사양과 다른가요? new.crbug.com에서 버그를 신고합니다. 최대한 자세하게 작성해 주시기 바랍니다. 구성요소를 UI>Notifications로 설정하세요. 글리치가 훌륭함 을 공유합니다.

API를 사용할 계획이신가요?

사이트에서 알림 트리거를 사용할 계획이신가요? 여러분의 공개적 후원은 YouTube가 우선순위를 정하는 데 도움이 됩니다 기능을 지원하는 것이 얼마나 중요한지 다른 브라우저 공급업체에 보여줍니다. 트윗을 보낼 대상 @ChromiumDev와 해시태그 사용 #NotificationTriggers 어디서 어떻게 사용하는지 Google에 알려주세요.

유용한 링크

감사의 말씀

알림 트리거는 Richard Knoll이 구현했습니다. 그리고 피터 베벌루가 작성한 설명 동영상은 도움을 주신 분들입니다. 다음 사용자가 이 문서를 검토했습니다. Joe Medley, Pete LePage, 리처드와 피터 히어로 이미지 제공 Unsplash의 루카스 블레이크