사용자의 권한을 요청하고 승인을 받은 후 실제 바탕화면에 알림을 노출하는 시퀀스입니다.
new Notification(title, options)에서 설정할 수 있는 주요 시각적 속성들입니다.
| 옵션명 | 설명 |
|---|---|
body |
알림의 본문 텍스트 내용을 설정합니다. |
icon |
알림 타이틀 옆에 작게 표시될 아이콘 이미지의 URL입니다. |
image |
알림 하단에 큼직하게 들어갈 이미지의 URL입니다. (OS 지원 여부에 따라 다름) |
badge |
(모바일) 알림이 올 때 표시될 배지 아이콘의 URL입니다. |
tag |
알림을 식별하는 고유 태그. 동일한 tag를 가진 알림은 이전 알림을 덮어씁니다. |
data |
알림과 함께 저장해 둘 임의의 데이터 객체. 클릭 이벤트 등에서 event.target.data로 읽어올 수 있습니다. |
| 메서드/이벤트 | 설명 |
|---|---|
Notification.permission |
정적 속성. 현재 알림 권한 상태를 반환합니다. ('granted', 'denied', 'default') |
Notification.requestPermission() |
사용자에게 알림 표시 권한을 요청합니다. 권한 상태 문자열을 resolve하는 Promise를 반환합니다. |
notification.close() |
화면에 떠 있는 특정 알림 인스턴스를 스크립트로 즉시 닫습니다. |
onclick |
사용자가 바탕화면의 알림 창을 클릭했을 때 발생합니다. 보통 해당 탭을 포커스(window.focus())하거나 특정 URL로 이동시키는 처리를 합니다. |
onclose |
사용자가 직접 알림의 'X' 버튼을 눌러 닫거나, OS 자체 타이머에 의해 닫혔을 때 발생합니다. |
<div class="noti-container">
<h3>Web Notifications API</h3>
<p>브라우저 외부로 시스템 푸시 알림을 보냅니다.</p>
<button id="reqBtn" class="btn">권한 요청</button>
<button id="sendBtn" class="btn" disabled>알림 보내기</button>
<p id="log" style="color: #f43f5e; margin-top: 1rem; font-weight: bold;"></p>
</div>