Promise를 활용한 웹사이트의 푸시 알림 기능 구현

13 Sep 2023

Promise

푸시 알림은 웹사이트의 사용자들에게 중요한 업데이트나 알림을 전달하는 기능입니다. 이 기능을 구현하기 위해서는 Promise를 활용하여 비동기적인 작업을 처리하고, 웹 브라우저의 Notification API를 사용할 수 있습니다.

1. 사용자의 허용 요청 받기

푸시 알림을 보내기 위해서는 사용자의 허용이 필요합니다. 먼저 사용자의 허용을 요청하는 코드를 작성해봅시다.

function askForNotificationPermission() {
  return new Promise((resolve, reject) => {
    if (!('Notification' in window)) {
      reject(new Error('푸시 알림을 지원하지 않는 브라우저입니다.'));
    } else if (Notification.permission === 'granted') {
      resolve();
    } else if (Notification.permission !== 'denied') {
      Notification.requestPermission().then(permission => {
        if (permission === 'granted') {
          resolve();
        } else {
          reject(new Error('사용자가 푸시 알림 수신을 거부했습니다.'));
        }
      });
    } else {
      reject(new Error('사용자가 푸시 알림 수신을 거부했습니다.'));
    }
  });
}

이 코드는 브라우저에서 푸시 알림을 지원하는지 확인하고, 사용자의 허용 여부를 확인하는 로직입니다. 사용자가 알림을 허용하면 resolve를 호출하여 Promise를 완료시키고, 허용하지 않으면 reject를 호출하여 에러 메시지를 반환합니다.

2. 푸시 알림 보내기

사용자의 허용을 받았다면, 이제 실제 푸시 알림을 보낼 수 있습니다. 아래 코드를 이용하여 푸시 알림을 보내는 함수를 작성해봅시다.

function sendPushNotification(title, options) {
  return new Promise((resolve, reject) => {
    if (!('Notification' in window)) {
      reject(new Error('푸시 알림을 지원하지 않는 브라우저입니다.'));
    } else {
      if (Notification.permission === 'granted') {
        new Notification(title, options);
        resolve();
      } else {
        reject(new Error('사용자가 푸시 알림 수신을 거부했습니다.'));
      }
    }
  });
}

이 코드는 전달받은 제목과 옵션을 사용하여 새로운 Notification 객체를 생성하고, 사용자의 허용 여부를 확인합니다. 허용되었다면 resolve를 호출하여 Promise를 완료시키고, 거부되었다면 reject를 호출하여 에러 메시지를 반환합니다.

3. 예제 사용법

askForNotificationPermission()
  .then(() => {
    sendPushNotification('새로운 업데이트', { body: '새로운 기능이 추가되었습니다.' });
  })
  .catch(error => {
    console.error(error);
  });

위 코드는 푸시 알림을 사용하기 위해서는 먼저 사용자의 허용을 받아야 하는 로직입니다. askForNotificationPermission 함수를 호출하여 사용자의 허용을 요청하고, 허용된 경우 sendPushNotification 함수를 호출해서 실제 푸시 알림을 보낼 수 있습니다.

이와 같이 Promise를 활용하여 웹사이트의 푸시 알림 기능을 간단하게 구현할 수 있습니다. 사용자의 허용 여부를 확인하고 알림을 보내는 로직을 적절히 활용하여 원하는 기능을 구현해보세요.

#webdevelopment #pushnotification