알림 서비스: Notifications API

핵심 개념

브라우저 화면 구석에 '메시지가 도착했습니다' 같은 알림창을 띄워주는 기능이에요.

코드 분석

HTML5📋 코드 (14줄)

<button onclick='notifyMe()'>알림 테스트</button>
<script>
  function notifyMe() {
    if (!('Notification' in window)) {
      alert('알림을 지원하지 않는 브라우저입니다.');
    } else if (Notification.permission === 'granted') {
      new Notification('안녕하세요!', {body: 'HTML5 실습 중입니다.'});
    } else {
      Notification.requestPermission().then(function(p) {
        if(p === 'granted') new Notification('반가워요!');
      });
    }
  }
</script>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 알림 API 코드의 권한 요청 타이밍,
iOS Safari 미지원 폴백, 클릭 이벤트 처리 버그를 찾아 수정해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

Notifications API로 채팅 도착 알림, 일정 리마인더,
새 게시글 알림을 실전 코드 3개로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 알림 구현 전체를 분석해서
권한 거부율, 모바일 지원 현황,
사용자 경험(과도한 알림)을 종합 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년 사용자들이 웹 알림을 얼마나 허용하는지,
Notifications API가 마케팅 채널로 의미가 있는지
솔직히 말해줘.

⭐ 이것만 기억하세요

알림 서비스: Notifications API는 이 3가지만 확실히 잡으세요

1.알림 권한을 요청하지 않고 Notification을 생성하면 브라우저가 즉시 차단합니다

2.Notification.requestPermission()으로 먼저 동의를 받고, new Notification()으로 제목·본문·아이콘을 설정합니다

3.다음 챕터에서 콘텐츠를 전체 화면으로 확장하는 Fullscreen API를 배웁니다

💬 이 챕터 질문 보기

HTML5 · CH.29 — 질문하거나 답변을 확인하세요

→

진행도 29 / 33

← 커리큘럼으로 ← 목록으로 (HTML5)