Notification
알림 타이머
해결하는 문제
다른 창을 보고 있어도 시간이 되면 확실히 알림을 받고 싶다.
끝나는 시각을 기준으로 남은 시간을 계산해, 다른 탭에 있어도 정확한 때에 운영체제 알림을 띄웁니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것설정한 시간
브라우저가 하는 일끝나는 시각과 현재 시각의 차이로 남은 시간 계산
나오는 것운영체제 알림, 소리, 진동, 탭 제목 깜박임
쓰는 브라우저 기술
Notification APIVibration APIdocument.titlevisibilitychange
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- Notification.requestPermission
- requireInteraction: 누를 때까지 알림 유지
- Service Worker로 창을 닫아도 알림
자주 막히는 곳
- 파일로 열면 알림 권한이 막힐 수 있다
- 아이폰은 홈 화면에 추가한 웹앱에서만 알림이 된다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 오늘 일정 요약 알림
- 작업 시간 분석
웹 서비스
- 수업 활동 타이머
- 회의 발언 시간 관리
피지컬 AI
- 타이머가 끝나면 ESP32 경광등 켜기
- 약 복용 알림 장치
넓히는 방법
- 실습 단계별 타이머
- Push API로 예약 알림
- 여러 타이머 동시 실행
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리일부
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
시간이 다 되면 운영체제 알림 창과 소리, 진동으로 알려주는 타이머 웹페이지를 만들어줘. 다른 탭에 가 있어도 정확해야 해.
같은 분류의 능력
07 단일 HTML 앱에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md