자바스크립트 푸시 알림으로 뉴스 속보 알림 구현하기

10 Nov 2023

javascript

이번 블로그 포스트에서는 자바스크립트를 사용하여 뉴스 속보 알림을 구현하는 방법에 대해 알아보겠습니다. 이 기능을 구현하기 위해서는 푸시 알림 서비스를 사용해야 합니다. 여기서는 Firebase Cloud Messaging(FCM)을 사용하여 푸시 알림을 보내는 방법을 소개하겠습니다.

FCM 설정 및 서비스 등록

Firebase 콘솔에 접속하고 프로젝트를 생성합니다.
프로젝트 설정에서 “클라우드 메시징” 탭으로 이동합니다.
FCM 서비스 등록을 위해 구성 파일(google-services.json 또는 GoogleService-Info.plist)을 다운로드하고 프로젝트에 추가합니다.

브라우저에서 알림 요청하기

자바스크립트로 푸시 알림을 보내기 위해 브라우저에서 알림 권한을 요청해야 합니다. 이를 위해 Notification.requestPermission() 메서드를 사용합니다. 다음은 예제 코드입니다.

if ('Notification' in window) {
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      // 알림 권한이 승인되었을 때의 동작
    } else {
      // 알림 권한이 거부되었거나 사용자가 무시했을 때의 동작
    }
  });
}

푸시 알림 보내기

뉴스 속보 알림을 보내기 위해서는 서버에서 클라이언트로 푸시 알림 메시지를 전송해야 합니다. 서버와의 통신에는 FCM 서비스를 사용하며, firebase-admin 패키지를 이용하여 서버에서 푸시 알림을 보낼 수 있습니다. 다음은 예제 코드입니다.

const admin = require('firebase-admin');

// Firebase Admin SDK 초기화
admin.initializeApp({
  credential: admin.credential.applicationDefault(),
});

// FCM 토큰을 받아와서 메시지 전송
const sendPushNotification = (token, title, body) => {
  const message = {
    token,
    notification: {
      title,
      body,
    },
  };

  admin.messaging().send(message)
    .then((response) => {
      console.log('Successfully sent push notification:', response);
    })
    .catch((error) => {
      console.error('Error sending push notification:', error);
    });
};

// 푸시 알림 보내기 예제
const fcmToken = 'DEVICE_FCM_TOKEN';
const newsTitle = '속보: 새로운 뉴스가 있습니다';
const newsBody = '자세한 내용을 확인하세요';

sendPushNotification(fcmToken, newsTitle, newsBody);

마무리

이렇게 자바스크립트 푸시 알림을 사용하여 뉴스 속보 알림을 구현할 수 있습니다. Firebase Cloud Messaging을 통해 푸시 알림을 보내는 기능은 알림 서비스나 실시간 업데이트를 필요로 하는 웹 애플리케이션에 유용하게 사용될 수 있습니다. 자세한 내용은 Firebase 공식 문서를 참고하시기 바랍니다.

참고 자료

Firebase 공식 문서: Firebase Cloud Messaging