[javascript] 모바일 디바이스의 푸시 알림 기능 활용하기

05 Dec 2023

javascript

푸시 알림은 모바일 디바이스에서 중요한 메시지나 알림을 받을 수 있는 기능입니다. 이 기능을 활용하면 앱의 사용자에게 중요한 정보나 업데이트를 실시간으로 전달할 수 있습니다.

본 문서에서는 JavaScript를 사용하여 모바일 디바이스의 푸시 알림 기능을 활용하는 방법에 대해 알아보겠습니다.

푸시 알림 설정하기

앱에서 푸시 알림을 보내기 위해서는 몇 가지 설정을 해야 합니다.

1. 서비스 워커 등록하기

푸시 알림을 받기 위해서는 먼저 서비스 워커를 등록해야 합니다. 서비스 워커는 백그라운드에서 실행되는 스크립트로, 앱이 오프라인일 때도 푸시 알림을 받을 수 있도록 합니다.

서비스 워커를 등록하기 위해서는 다음과 같은 코드를 작성합니다.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker 등록 성공:', registration);
    })
    .catch(function(error) {
      console.log('Service Worker 등록 실패:', error);
    });
}

위의 코드는 브라우저가 서비스 워커를 지원하는지 확인한 후, service-worker.js 파일을 등록하는 과정입니다.

2. 푸시 알림 구독 요청하기

서비스 워커가 등록되면, 푸시 알림을 받을 사용자에게 구독을 요청해야 합니다. 사용자가 구독을 허용하면, 앱 서버에서 해당 사용자를 대상으로 푸시 알림을 전송할 수 있습니다.

구독 요청은 다음과 같이 수행할 수 있습니다.

function subscribeUserToPush() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.ready.then(function(registration) {
      registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array('공개 키')
      })
      .then(function(subscription) {
        console.log('푸시 알림 구독 성공:', subscription);
      })
      .catch(function(error) {
        console.log('푸시 알림 구독 실패:', error);
      });
    });
  }
}

function urlBase64ToUint8Array(base64String) {
  var padding = '='.repeat((4 - base64String.length % 4) % 4);
  var base64 = (base64String + padding)
    .replace(/\-/g, '+')
    .replace(/_/g, '/');

  var rawData = window.atob(base64);
  var outputArray = new Uint8Array(rawData.length);

  for (var i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  
  return outputArray;
}

위의 코드에서 공개 키를 설정하는 부분은 앱 서버에서 제공하는 유효한 키로 대체해야 합니다.

푸시 알림 보내기

푸시 알림을 보내기 위해서는 백엔드 서버에서 해당 알림을 생성하고, 클라이언트의 토큰을 이용하여 알림을 전송해야 합니다.

백엔드에서 푸시 알림을 생성하는 예제는 다음과 같습니다.

// 푸시 알림 생성
function createPushNotification(notification) {
  // 클라이언트의 구독 정보를 가져옴
  const subscriptions = await getSubscriptionsFromDatabase();

  // 모든 구독에 대해 알림 전송
  for (const subscription of subscriptions) {
    sendPushNotification(subscription, notification);
  }
}

// 클라이언트에 푸시 알림 전송
function sendPushNotification(subscription, notification) {
  webpush.sendNotification(subscription, JSON.stringify(notification));
}

위의 코드를 실행하면 앱 서버는 각 구독자에게 푸시 알림을 보낼 수 있습니다.

결론

이제 JavaScript를 사용하여 모바일 디바이스의 푸시 알림 기능을 활용하는 방법에 대해 알아보았습니다. 푸시 알림을 통해 앱의 사용자에게 중요한 정보를 실시간으로 전달할 수 있습니다. 알림을 보내는 백엔드 서버 코드는 앱의 요구사항에 따라 작성되어야 합니다.

더 자세한 내용은 공식 문서를 참조하세요.