자바스크립트 Push API를 활용한 실시간 식당 예약 알림
이번 포스트에서는 자바스크립트 Push API를 활용하여 실시간으로 식당 예약 알림을 받아보는 방법에 대해서 알아보겠습니다.
목차
- Push API란?
- 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를 활용하여 실시간으로 식당 예약 알림을 받을 수 있는 시스템을 구축할 수 있습니다. 푸시 알림을 통해 사용자에게 빠르고 효과적으로 예약 알림을 전달할 수 있으며, 서비스 워커를 통해 브라우저 백그라운드에서도 알림을 수신할 수 있습니다.
관련 자료:
#JavaScript #PushAPI