Web Notifications API

시스템 수준의 알림 푸시

Web Notifications API는 브라우저 창 내부의 UI 알림이 아닌, 운영체제(OS) 수준의 시스템 알림을 표시할 수 있게 해주는 기능입니다. 사용자가 웹 페이지를 보고 있지 않거나 심지어 브라우저가 최소화된 상태에서도 중요한 메시지(채팅 수신, 이벤트 발생 등)를 바탕화면이나 모바일 잠금 화면에 띄울 수 있습니다.

스팸 방지를 위해 반드시 사용자의 권한 승인(Permission)이 필요하며, Service Worker를 이용한 푸시 알림(Push API)과 결합하여 강력한 사용자 재참여(Re-engagement) 도구로 활용됩니다.

// 시스템 알림(Notification) 표시 예제

function showNotification() {
  // 1. 브라우저 지원 여부 확인
  if (!("Notification" in window)) {
    console.log("이 브라우저는 데스크톱 알림을 지원하지 않습니다.");
    return;
  }

  // 2. 권한 확인 및 요청
  if (Notification.permission === "granted") {
    // 권한이 이미 승인된 경우 즉시 알림 표시
    createNotification();
  } else if (Notification.permission !== "denied") {
    // 권한을 묻지 않은 경우 사용자에게 권한 요청 팝업 띄우기
    Notification.requestPermission().then(function (permission) {
      if (permission === "granted") {
        createNotification();
      }
    });
  }
}

function createNotification() {
  const options = {
    body: 'Minstudio에서 새로운 강좌가 업데이트 되었습니다!',
    icon: '/favicon.ico', // 알림 아이콘
    // requireInteraction: true // 사용자가 닫기 전까지 유지
  };
  
  const notification = new Notification('새로운 알림', options);
  
  // 알림 클릭 이벤트
  notification.onclick = function() {
    window.focus(); // 탭으로 포커스 이동
    notification.close();
  };
}

console.log("showNotification() 함수를 호출하여 권한 요청 및 알림을 테스트할 수 있습니다.");