[JavaScript] 브라우저 푸시 알림

cowmin·2025년 6월 30일

1. 브라우저에서 알림 지원 여부 확인

Notification 객체가 window 안에 존재하는지 확인하여, 현재 브라우저가 알림 API를 지원하는지 판단한다.

if ('Notification' in window) {
  console.log("브라우저에서 알림을 지원합니다.");
} else {
  console.log("브라우저에서 알림을 지원하지 않습니다.")
}

1.1 콘솔 결과

2. 브라우저 알림 권한 요청

// 알림 허용 상태일 경우
if (Notification.permission === 'granted') {
  console.log("알림 허용 상태입니다.")
} else {
  // 허용이 아닐 경우, 브라우저에게 사용자에게 알림 권한 요청
  Notification.requestPermission().then(permission => {
    console.log(permission);
  })
}

2.1 알림 권한 상태

값	의미
default	아직 사용자에게 권한을 요청하지 않음
granted	알림 권한 허용
denied	알림 권한 거부됨

권한이 이미 granted 상태일 경우에는 다시 요청하지 않는다. 권한 테스트를 하고 싶다면, 브라우저 설정에서 기본값으로 초기화하면 된다.

사이트 설정 - 개인 정보 보호 및 보안 - 권한 - 알림 권한 설정 가능

2.2 권한 요청 팝업

2.3 콘솔 결과

3. 서비스 워커 등록

서비스 워커
사용자가 탭을 닫았거나 사이트를 떠난 상태에서도 백그라운드에서 알림을 받을 수 있도록 하는 자바스크립트 백그라운드 스레드다.

// 현재 브라우저가 서비스 워커를 지원한다면
if ('serviceWorker' in navigator) {
  // cat.js 파일을 서비스 워커로 등록
  navigator.serviceWorker.register('cat.js')
  	// 등록 성공
    .then((registration) => {
    console.log('Service Worker registered with scope:', registration.scope);
  })
  	// 등록 실패
    .catch((error) => {
    console.error('Service Worker registration failed:', error);
  });
}

4. 서비스 워커(cat.js) – 푸시 알림 수신 처리

cat.js 파일에 등록된 서비스 워커는 push 이벤트를 감지하여 알림을 표시한다.

// 서비스 워커가 푸시 이벤트를 받았을 때 실행
self.addEventListener('push', (event) => {
    console.log('[서비스 워커] 푸시 받음'); // 콘솔 확인용
    let title = "냥?";
    let options = {
        body: "당신은 고양이 랜섬웨어에 감염되었습니다.",
        icon: "cat_icon.jpg",
        image: "cat.jpg",
    }
    // 알림 표시
    self.registration.showNotification(title, options);
});