Notification API로 브라우저에서 알림을 보내보자!

2026년 새해를 맞이하여 열심히 살아야겠다는 다짐이 꽤 길게 이어지고 있다. 다른 사람과 내 기준은 당연히 다르기 때문에, 객관적으로 보면 그렇게 열심히는 아닐지도 모르겠지만 아무것도 하지 않을 때보다는 나름 보람(?)도 느껴지고 하면 할수록 더 의욕도 생기는 것 같은 기분이다.

그래서 사이드 프로젝트인 Trace를 1차적으로 마무리하고 난 이후에도 퇴근 후에나 주말에 책상 앞에 앉아 어떤 작업에 집중해야 하는 경우가 많이 생겼다. 그런데 태생적으로 집중력이 그렇게 좋지 못한 나...... 예전에도 종종 '포모도로 기법'이라는 걸 이용하고는 했는데 이번에도 그게 생각나서 기존에 있던 어플을 다운로드 하려던 찰나.

이거 기능을 최소화하면 금방 내가 직접 만들어서 사용할 수 있겠는데?라는 생각이 들었고 곧바로 실행에 옮겨 간단한 포모도로 타이머 페이지를 만들기 시작했다. 포모도로 기법이라는 건 정말 간단히 말해서 25분 집중 - 5분 휴식을 4번 반복한 후 30분 간 긴 휴식을 취하는 것을 말한다. 이러한 한 번의 사이클을 1 포모도로라고 칭하고 있다.

아무튼 집중하다 보면, 혹은 휴식하다 보면 화면을 보지 못할 수도 있고 그렇게 되면 타이머의 시간이 전부 흐른지도 확인할 수가 없기 때문에 간단하게 브라우저의 Notification API로 알림 기능을 구현해 보기로 했다. 사실 구현이라고 말하기도 부끄러운 게, 기본적으로 제공하고 있는 API를 단순히 호출만 하면 되는 방식이라 (...) 정말정말 간단하다.

1. 권한 요청

• 먼저 유저가 사용하고 있는 브라우저에 알람 권한 허용을 요청한다. 당연하게도 이 단계에서 유저가 권한 요청을 거부했을 경우에는 알림 기능을 사용할 수 없다.
• 브라우저에 따라 약간의 제약은 있지만 대부분 지원하고 있는 표준적인 기능이라고 한다.

const requestNotificationPermission = async () => {
  // Noltification 기능이 존재하는지 확인
  if (!("Notification" in window)) return;
  
  // 아직 사용자가 권한을 선택하지 않았을 경우에만 권한 요청
  if (Notification.permission === "default") {
    await Notification.requestPermission();
  }
};

• Notification.permission의 값은 아래와 같이 나뉘므로 조건에 따라 권한 체크를 할 수 있다
  - default: 사용자에게 아직 권한을 요구하지 않았고, 따라서 알림을 표시하지 않음
  • granted: 사용자에게 알람 표시 권한을 요구했으며 사요자가 권한을 허용함
  • denied: 사용자가 명시적으로 알림 표시 권한을 거부했음

2. 알림 만들기

• 사용자에게 알림 권한을 허용받았다면 이제 알림을 만들 차례다.

const showNotification = (title: string, body: string) => {
  if (!("Notification" in window)) return;
  if (Notification.permission !== "granted") return;

  new Notification(title, { body });
};

• 오... 정말 간단하다! Notification.permission !== "granted"라면 아직 알림에 대한 권한 허용을 받지 못했거나, 사용자가 권한을 거부한 것이니 메시지를 보내지 않는다. 그리고 사용자가 권한을 허용했다면 메시지를 보낸다.
• 크롬을 기준으로, 알림 메시지를 발송하면 다음과 같은 알림 창이 시작 표시줄에 나타난다.
  
• 제목이나 내용, 아이콘 등은 메서드를 호출할 때의 매개변수로 변경할 수 있다.

3. 매개변수

• 크게 title과 options 두 가지의 매개변수로 나눌 수 있다.

title

• 알림의 제목으로, 반드시 입력해야 하는 필수값

options

• body: 알림 본문 텍스트
• icon: 알림에 표시될 아이콘
• tag: 알림의 유형을 구분하여 동일한 유형이라면 덮어쓰기를 통해 중복을 방지할 때 사용
• slient: 사운드 없이 알림 표시
• data: 이벤트 핸들러 등에 사용되는 데이터
• requireInteraction: 알림이 자동으로 닫히지 않고, 사용자가 클릭하거나 해제할 때까지 활성화 상태로 유지하는지 여부

• 그 외 더 자세한 스펙은 이쪽 사이트를 참고하면 된다.

4. 이벤트 핸들러

• onclick, onclose, onerror, onshow 등의 이벤트 핸들러가 있으나 보통 클릭에 대한 이벤트 핸들러를 많이 사용하게 된다
• 나의 경우에도 알림 발생 시 클릭하면 바로 기존 브라우저 화면이 포커스될 수 있도록 아래와 같이 알림 메시지 생성 함수를 변경했다

export const showNotification = (title: string, body: string) => {
  if (!("Notification" in window)) return;
  if (Notification.permission !== "granted") return;

  const notification = new Notification(title, { body, icon: "/favicon.png" });

  notification.onclick = () => {
    window.focus();
    notification.close();
  };
};

• 브라우저에 따라 제약이 있겠지만, window - chrome 환경에서는 정상적으로 동작하는 것을 확인했다.
• 그리고 마지막으로, 알림을 생성할 때 options 안에 data 객체를 넣으면 이벤트 핸들러 안에서 사용할 수 있으므로 유용하다

export const showNotification = (title: string, body: string) => {
  if (!("Notification" in window)) return;
  if (Notification.permission !== "granted") return;

  const notification = new Notification(title, {
    body,
    icon: "/favicon.png",
    data: { test: "test" }, // 데이터 추가
  });

  notification.onclick = () => {
    console.log(notification.data?.test); // 데이터 접근
    window.focus();
    notification.close();
  };
};

이렇게 오늘은 브라우저에서 기본적으로 제공하는 Notification API에 대해 알아보았다. 모바일 환경에 따른 제약이나 브라우저에 따른 제약이 있어 완전하게 알림에 대한 모든 기능을 커버할 수는 없겠지만 간단하게 사용하기는 좋을 것 같다!