PWA API - Notifications

Notifications

웹 페이지가 사용자에게 시스템 알림 표시를 제어할 수 있게 하는 API다. 알림은 뷰포트 바깥에 위치하기 때문에 사용자가 탭을 변경하거나, 다른 앱으로 이동했을 때에도 표시된다. 

 

Method

Notification.requestPermission()

페이지에서 알림을 표시할지 요청하는데 사용

 

Notification.close()

프로그램으로 알림을 닫음

 

예시

function notifyMe() {
  // 브라우저가 알림(notifications)를 지원하는지 확인
  if (!("Notification" in window)) {
    alert("브라우저가 notification을 지원하지 않음");
  }

  // 알림 허용이 되었는지 확인
  else if (Notification.permission === "granted") {
    // notification 생성
    var notification = new Notification("Hi there!");
  }

  // 사용자에게 허용 요청
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      // 사용자가 허용하면 알림 띄우기
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  }
}

<button onclick="notifyMe()">알림창 띄우기</button>

 

MDN 문서

https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API

Notifications API - Web APIs | MDN

https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push#notifications

How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs) | MDN