Web Notifications | Minstudio

운영체제 시스템 수준의 백그라운드 알림

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

스팸성 푸시를 방지하기 위해 반드시 사용자의 권한 승인(Permission)이 사전 요구되며, Service Worker와 결합한 Web Push API의 시각적 컴포넌트로 활용되어 강력한 사용자 재참여(Re-engagement) 수단이 됩니다.

1. 알림 권한 및 생성 워크플로우

사용자의 권한을 요청하고 승인을 받은 후 실제 바탕화면에 알림을 노출하는 시퀀스입니다.

2. 생성 옵션 (Options)

new Notification(title, options)에서 설정할 수 있는 주요 시각적 속성들입니다.

옵션명	설명
`body`	알림의 본문 텍스트 내용을 설정합니다.
`icon`	알림 타이틀 옆에 작게 표시될 아이콘 이미지의 URL입니다.
`image`	알림 하단에 큼직하게 들어갈 이미지의 URL입니다. (OS 지원 여부에 따라 다름)
`badge`	(모바일) 알림이 올 때 표시될 배지 아이콘의 URL입니다.
`tag`	알림을 식별하는 고유 태그. 동일한 `tag`를 가진 알림은 이전 알림을 덮어씁니다.
`data`	알림과 함께 저장해 둘 임의의 데이터 객체. 클릭 이벤트 등에서 `event.target.data`로 읽어올 수 있습니다.

3. 속성, 메서드 및 이벤트

메서드/이벤트	설명
`Notification.permission`	정적 속성. 현재 알림 권한 상태를 반환합니다. (`'granted'`, `'denied'`, `'default'`)
`Notification.requestPermission()`	사용자에게 알림 표시 권한을 요청합니다. 권한 상태 문자열을 resolve하는 Promise를 반환합니다.
`notification.close()`	화면에 떠 있는 특정 알림 인스턴스를 스크립트로 즉시 닫습니다.
`onclick`	사용자가 바탕화면의 알림 창을 클릭했을 때 발생합니다. 보통 해당 탭을 포커스(`window.focus()`)하거나 특정 URL로 이동시키는 처리를 합니다.
`onclose`	사용자가 직접 알림의 'X' 버튼을 눌러 닫거나, OS 자체 타이머에 의해 닫혔을 때 발생합니다.