자바스크립트 Push API를 활용한 실시간 식당 예약 알림

10 Nov 2023

javascript

이번 포스트에서는 자바스크립트 Push API를 활용하여 실시간으로 식당 예약 알림을 받아보는 방법에 대해서 알아보겠습니다.

1. Push API란?

Push API는 브라우저에서 서버로 메시지를 전송하고, 서버에서 브라우저로 메시지를 보내는 기술입니다. 벡그라운드 동작 중인 서비스 워커를 통해 메시지를 수신하고, 사용자에게 알림을 보낼 수 있습니다.

2. Push API를 사용한 식당 예약 알림 시스템 구축하기

2.1 서비스 워커 등록

먼저, 서비스 워커를 등록해야 합니다. 서비스 워커는 브라우저 백그라운드에서 실행되는 스크립트로, 푸시 알림을 받을 수 있게 해줍니다.

// service-worker.js

self.addEventListener('push', function(event) {
  const notificationData = event.data.json();

  self.registration.showNotification('식당 예약 알림', {
    body: notificationData.message,
    icon: 'restaurant-icon.png'
  });
});

2.2 푸시 알림 구독

푸시 알림을 받기 위해 사용자의 동의를 받아야 합니다. 아래 코드는 푸시 알림 구독을 위한 버튼을 생성하는 예시입니다.

// main.js

const publicKey = 'YOUR_PUBLIC_KEY';

// 서비스 워커 등록
navigator.serviceWorker.register('service-worker.js')
  .then(function(registration) {
    // 푸시 알림 구독 요청
    return registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: urlB64ToUint8Array(publicKey)
    });
  })
  .then(function(subscription) {
    console.log('푸시 알림 구독 완료:', JSON.stringify(subscription));
  })
  .catch(function(error) {
    console.error('푸시 알림 구독 실패:', error);
  });

2.3 식당 예약 알림 전송

서버에서는 원하는 시간에 맞춰 알림을 전송하는 API를 구현해야 합니다. 아래는 예약 알림을 전송하는 라우터의 예시입니다.

// reservationRouter.js

const express = require('express');
const webpush = require('web-push');

const publicKey = 'YOUR_PUBLIC_KEY';
const privateKey = 'YOUR_PRIVATE_KEY';

webpush.setVapidDetails('mailto:example@example.com', publicKey, privateKey);

const router = express.Router();

router.post('/reservation', function(req, res) {
  const message = req.body.message; // 예약 메시지
  const subscription = req.body.subscription; // 사용자의 구독 정보

  webpush.sendNotification(subscription, JSON.stringify({ message: message }))
    .then(function() {
      res.sendStatus(200);
    })
    .catch(function(error) {
      console.error('푸시 알림 전송 실패:', error);
      res.sendStatus(500);
    });
});

module.exports = router;

3. 결론

이렇게 하면 자바스크립트 Push API를 활용하여 실시간으로 식당 예약 알림을 받을 수 있는 시스템을 구축할 수 있습니다. 푸시 알림을 통해 사용자에게 빠르고 효과적으로 예약 알림을 전달할 수 있으며, 서비스 워커를 통해 브라우저 백그라운드에서도 알림을 수신할 수 있습니다.

목차