[JavaScript] 자바스크립트에서 푸시 알림

236_자바스크립트에서 푸시 알림

[적용]

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

---

[문법1]

속성	의미	반환
Notification.permission	브라우저의 알림 허가 여부	문자열

[문법2]

메소드	의미	반환
Notification.requestPermission()	알림 허가 요청하기	없음
new Notification(알림타이틀)	알림 표시	Notification

---

[내용]

웹 사이트에서 자바스크립트의 Notification API를 사용해 유저에게 푸시 알림을 표시할 수 있으며, 

OS 고유의 알림창을 사용한다. 

브라우저 활성화 상태가 아니어도 푸시 알림이 도착하면 유저에게 알림을 띄우고

선택을 요구하는 기능으로 사용할 수 있다.

 

JavaScript                                                                                                                                                          main.js

const btn = document.querySelector('button');
btn.addEventListener('click', notify);

// 알림 기능 확인
function notify() {
  switch (Notification.permission) {
    case 'default':  // 기본 상태
      // 알림 허가 요청
      Notification.requestPermission();
      break;
    case 'granted':  // 알림 허가
      // 알림 허가 후 Notification으로 알림
      new Norification('안녕하세요');
      break;
    case 'denied':  // 알림 거부
      alert('알림이 거부되었습니다.');
      break;
  }
}

 

알림은 브라우저의 허가를 받아야 한다.

Notification.permission 속성으로 부라우저의 허가 여부를 확인하며,

값이 default인 경우 Notification.requestPermission()을 실행해 허가를 요청한다.

 

값이 granted인 경우 'new Notification("내용")으로 알림을 표시하며,

OS 고유의 창을 사용한다.

 

---

브라우저의 비활성화 상태에서도 푸시 알림을 사용하고 싶을 때

해당 기능은 브라우저에서 페이지를 열고 있을 떄만 작동한다.

브라어저의 페이지를 열고 있지 않을 때도 푸시 알림 기능을 사용하고 싶다면 서비스 워커를 사용한다.

 

---

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김