[책] 자바스크립트 코드 레시피 278 - 214일차

푸시 알림

• 브라우저에서 OS 고유의 알림창을 사용해 알림을 표시하고 싶을 때

구문

Notification.permission 브라우저의 알림 허가 여부 문자열로 반환
Notification.requestPermission() 알림 허가 요청하기 반환 없음
new Notification(알림타이틀) 알림 표시 Notification로 반환

설명

웹 사이트에서 자바스크립트의 Notification API를 사용해 유저에게 푸시 알림을 표시할 수 있으며, OS 고유의 알림창을 사용합니다. 브라우저 활성화 상태가 아니어도 푸시 알림이 도착하면 유저에게 알림을 띄우고 선택을 요구하는 기능으로 사용할 수 있습니다.

실습

index.html

<button class="button">버튼</button>

---

script.js

const btn = document.querySelector('button');
btn.addEventListener('click', notify);
function notify() {
  switch (Notification.permission) {
    case 'default': // 기본 상태
      Notification.requestPermission();
      break;
    case 'granted': // 알림 허가
      new Notification('안녕하세요.');
      break;
    case 'denied': // 알림 거부
      alert('알림이 거부되었습니다.');
      break;
  }
}