Notification API 썸네일형 리스트형 React 앱에서 브라우저 Notification API로 알림 보내기 브라우저 Notification API는 사용자에게 네이티브 수준의 시스템 알림을 띄울 수 있게 해주는 표준 웹 API입니다. React 앱에서도 간단한 코드로 권한을 요청하고 알림을 보낼 수 있습니다. 이 글은 실무에서 바로 적용할 수 있는 최소 예제부터 서비스 워커를 통한 백그라운드 알림까지 단계별로 정리합니다.1. 개요: 동작 원리와 필수 조건Notification API는 두 가지 축으로 나뉩니다. 페이지 컨텍스트에서 new Notification(...)으로 즉시 알림을 띄우는 방법과, 서비스 워커(Service Worker) 컨텍스트에서 registration.showNotification(...)으로 백그라운드 알림을 띄우는 방법입니다. 전자는 페이지가 열려 있고 권한이 허용된 상태에서 사용.. 더보기 React 앱에서 Web Push 알림 기능 추가하기 Web Push 알림은 사용자가 브라우저를 닫아도 서버에서 메시지를 전달할 수 있는 강력한 기능입니다. React 앱에 Web Push를 추가하려면 서비스 워커, Notification API, Push API, 그리고 VAPID 키를 사용하는 백엔드가 필요합니다. 아래 단계를 그대로 따라 하면 기본 구현을 완성할 수 있습니다.1. 동작 원리 이해전체 흐름은 다음과 같습니다. 1) 서비스 워커 등록 2) 알림 권한 요청 3) PushManager로 구독 생성 4) 구독 정보를 백엔드로 저장 5) 백엔드가 web-push로 푸시 전송 6) 서비스 워커가 push 이벤트에서 알림 표시합니다.2. 사전 준비 체크리스트1) HTTPS 환경 또는 localhost 2) React 빌드가 sw.js를 서비스할 수 .. 더보기 이전 1 다음