자바스크립트 Push Notifications를 활용한 실시간 세일 알림

10 Nov 2023

javascript

push-notifications

세일 기간 동안 고객들에게 실시간으로 알림을 전달하는 것은 매우 중요한 마케팅 전략입니다. 그러나 전통적으로는 이메일 또는 문자 메시지를 사용하여 알림을 보내기 때문에 고객들의 관심을 끌기 어렵습니다.

이제는 자바스크립트의 Push Notifications를 활용하여 실시간으로 세일 알림을 고객에게 전달할 수 있습니다. 이 기능은 웹 브라우저나 모바일 앱에서 동작하며, 사용자의 동의를 받아야만 작동됩니다.

Push Notifications란?

Push Notifications는 서비스 제공자가 사용자에게 곧바로 메시지를 전달하는 기능입니다. 이러한 알림은 활성화된 디바이스에 표시되며, 사용자들에게 중요하고 시급한 정보를 전달하기에 적합합니다.

자바스크립트 Push Notifications 구현하기

서비스 워커 등록하기

우선, 사용자의 디바이스에서 Push Notifications를 사용하기 위해서는 서비스 워커를 등록해야 합니다. 이는 웹 애플리케이션의 백그라운드에서 실행되는 스크립트입니다.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('service-worker.js')
  .then(function() {
    console.log('Service Worker Registered');
  });
}

Push Subscription 요청하기

사용자가 Push Notifications를 수신하기 위해서는 서비스 워커에 대한 구독(subscription)을 요청해야 합니다.

const publicKey = 'your-public-key-from-push-service';

navigator.serviceWorker.ready
.then(function(serviceWorkerRegistration) {
  return serviceWorkerRegistration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(publicKey)
  });
})
.then(function(subscription) {
  console.log('User is subscribed.', subscription);
})
.catch(function(error) {
  console.error('Failed to subscribe the user.', error);
});

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

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

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

  return outputArray;
}

서비스 워커를 통한 Push Notifications 전송하기

구독이 성공적으로 이루어지면, 서비스 워커를 통해 Push Notifications를 사용자에게 보낼 수 있습니다.

function sendNotification() {
  fetch('/send-notification', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: '세일 알림',
      message: '30% 할인 중입니다!'
    })
  })
  .then(function(response) {
    console.log('Notification sent successfully.');
  })
  .catch(function(error) {
    console.error('Failed to send notification.', error);
  });
}

결론

자바스크립트 Push Notifications를 사용하면 실시간으로 고객들에게 세일 알림을 포함한 다양한 메시지를 전달할 수 있습니다. 이는 고객들의 관심을 끌고 구매 확률을 높이는데 도움이 될 것입니다. 자바스크립트 Push Notifications를 활용하여 마케팅 전략을 업그레이드하세요!

#WebDevelopment #JavaScript