자바스크립트 fetch API를 사용한 웹 알림 구현

10 Sep 2023

javascript

웹 알림은 사용자에게 중요한 정보를 실시간으로 전달하기 위해 많이 사용되는 기능입니다. 자바스크립트 fetch API를 사용하면 쉽게 웹 알림을 구현할 수 있습니다. 이번 블로그 포스트에서는 해당 API를 사용하여 웹 알림을 구현하는 방법을 알아보겠습니다.

웹 알림 구현하기

사용자에게 알림 권한 요청하기

맨 처음 사용자에게 알림을 보내기 위해서는 알림 권한을 요청해야 합니다. 아래 코드를 사용하여 사용자에게 알림 권한을 요청할 수 있습니다.

if ('Notification' in window && Notification.permission !== 'denied') {
  Notification.requestPermission().then(function (permission) {
    // 권한이 허용되면 알림을 보낼 준비를 합니다.
    if (permission === 'granted') {
      // 알림을 보낼 수 있는 상태입니다.
    }
  });
}

알림 보내기

알림 권한이 허용되면, 사용자에게 알림을 보낼 수 있습니다. 아래 코드를 사용하여 알림을 보낼 수 있습니다.

function sendNotification(title, options) {
  if ('Notification' in window && Notification.permission === 'granted') {
    // 알림 생성
    var notification = new Notification(title, options);
  
    // 알림 클릭 시 동작 설정
    notification.onclick = function () {
      // 원하는 동작을 수행합니다.
    };
  }
}

// 예시 알림 보내기
sendNotification('웹 알림', {
  body: '새로운 메시지가 도착했습니다.',
  icon: 'notification-icon.png'
});

알림을 생성할 때, title은 알림의 제목을, body는 알림의 내용을, 그리고 icon은 알림 아이콘의 경로를 나타냅니다. 필요에 따라 클릭 시 동작을 추가로 설정할 수도 있습니다.

백엔드 API와 연동하기

웹 알림은 백엔드와의 통신을 통해 실시간으로 중요한 정보를 사용자에게 전달하는 것이 주요한 기능입니다. 이를 위해 자바스크립트 fetch API를 사용하여 백엔드 API와 소통할 수 있습니다.

fetch('https://api.example.com/notifications')
  .then(function (response) {
    // 응답 처리
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('API 오류');
    }
  })
  .then(function (data) {
    // 응답 데이터를 사용하여 알림을 보냅니다.
    data.forEach(function (notification) {
      sendNotification(notification.title, {
        body: notification.body,
        icon: notification.icon
      });
    });
  })
  .catch(function (error) {
    // 오류 처리
    console.error(error);
  });

위 코드에서는 백엔드 API로부터 받은 알림 데이터를 반복하여 알림을 보냅니다. 응답이 성공할 경우 response.json()을 통해 JSON 데이터를 추출하고, 각 알림 데이터를 사용하여 sendNotification() 함수를 호출합니다.

마치며

자바스크립트 fetch API를 사용하여 웹 알림을 구현하는 방법을 알아보았습니다. 알림 권한 요청, 알림 생성 및 클릭 시 동작 설정, 그리고 백엔드 API와의 연동에 대해 알아보았습니다. 이를 활용하여 사용자에게 중요한 정보를 실시간으로 전달하는 웹 알림을 구현해 보세요.