현대의 웹 사이트는 방문자에게 중요한 업데이트나 정보를 전달하기 위해 다양한 기능을 제공합니다. 그 중 하나가 푸시 알림입니다. 푸시 알림은 웹사이트의 소식을 받고자 하는 사용자에게 실시간으로 알림을 전송하는 기능으로, 사용자 경험을 향상시키고 웹사이트의 재방문율을 높일 수 있습니다.

이번 블로그 포스트에서는 자바스크립트를 사용하여 웹사이트에 푸시 알림 기능을 추가하는 방법에 대해 알아보겠습니다.

푸시 알림 서비스 등록하기

첫 번째로 해야 할 일은 푸시 알림 서비스에 등록하는 것입니다. 많은 푸시 알림 서비스 업체들이 있지만, 여기서는 Firebase Cloud Messaging을 사용하여 예제를 설명하겠습니다.

Firebase Console에 로그인하고 프로젝트를 생성한 후, Cloud Messaging 탭으로 이동합니다. 그리고 푸시 알림을 보내기 위해 서비스 워커 파일을 다운로드 받습니다.

서비스 워커 등록하기

다음으로, 푸시 알림을 제공하기 위해 서비스 워커를 등록해야 합니다. 서비스 워커는 백그라운드에서 실행되는 스크립트로, 애플리케이션과 서버 간의 통신을 관리합니다.

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

위의 코드는 서비스 워커를 등록하는 간단한 예시입니다. navigator.serviceWorker.register() 메소드를 사용하여 서비스 워커 파일을 등록하고, 등록에 성공하면 성공 메시지를 출력합니다.

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

서비스 워커를 등록한 후에는 사용자에게 푸시 알림 권한을 요청해야 합니다. 이를 위해 Notification.requestPermission() 메소드를 사용할 수 있습니다.

if ('Notification' in window) {
  if (Notification.permission === 'default') {
    Notification.requestPermission()
      .then(function (permission) {
        if (permission === 'granted') {
          console.log('사용자가 푸시 알림 권한을 허용함');
        } else {
          console.log('사용자가 푸시 알림 권한을 거부함');
        }
      });
  }
}

위의 코드는 사용자에게 푸시 알림 권한을 요청하는 예시입니다. Notification.permission 속성을 통해 현재 권한 상태를 확인하고, 권한이 “default”인 경우에만 권한 요청을 시도합니다.

푸시 알림 보내기

푸시 알림 권한을 허용받은 후에는 사용자에게 알림을 보낼 수 있습니다. 이를 위해서는 알림에 대한 내용과 옵션을 설정해야 합니다.

function sendPushNotification() {
  if (Notification.permission === 'granted') {
    navigator.serviceWorker.getRegistration()
      .then(function(registration) {
        const options = {
          body: '안녕하세요! 새로운 소식이 있습니다.',
          icon: '/path/to/icon.png'
        };
  
        registration.showNotification('새로운 알림', options);
      });
  }
}

// 버튼 클릭 시 푸시 알림 보내기
document.getElementById('pushBtn').addEventListener('click', sendPushNotification);

위의 코드는 버튼을 클릭할 때 푸시 알림을 보내는 예시입니다. showNotification() 메소드를 사용하여 알림의 제목과 내용, 아이콘 등의 옵션을 설정할 수 있습니다.

마치며

이제 자바스크립트와 Firebase Cloud Messaging을 사용하여 웹사이트에 푸시 알림 기능을 추가하는 방법에 대해 알아보았습니다. 푸시 알림은 사용자에게 소식을 실시간으로 전달하고 웹사이트의 재방문율을 높이는데 큰 도움이 될 것입니다.

더 자세한 내용과 고급 기능은 참고 문서를 참조하시기 바랍니다.

• Firebase Cloud Messaging 문서
• Service Worker API 문서