ChatGPT와 FCM 개발 - 알림 수신

88. 알림 수신

다음과 같은 과정을 거처 푸시 알림 서비스를 개발합니다.

1. 알림 수신 허가를 받고 Token 얻기
2. Token을 firestore에 저장하기
3. firebase functions cloud 함수를 이용하여 알림 보내기
4. 웹앱에서 알림을 받아 나타내기

ChatGPT에게 물었습니다.

Create a function to receive push notifications and display them on the screen.

푸시 알람을 받아 화면에 나타내는 기능을 만들어 줘.

ChatGPT

To create a function that receives push notifications and displays them on the screen, you need to follow these steps:
푸시 알림을 수신하여 화면에 표시하는 기능을 만들려면 다음 단계를 따라야 합니다.

1. Set Up Firebase Messaging in Your Vue.js App: Configure Firebase Messaging to receive push notifications.
   Vue.js 앱에서 Firebase 메시징 설정: 푸시 알림을 받도록 Firebase 메시징을 구성합니다.
2. Register a Service Worker: The Service Worker will handle the background tasks, including receiving push notifications.
   서비스 워커 등록: 서비스 워커는 푸시 알림 수신을 포함한 백그라운드 작업을 처리합니다.
3. Handle Notifications in the Service Worker: Display notifications when they are received.
   서비스 워커에서 알림 처리: 알림이 수신되면 표시합니다.
4. Show Notifications in Your Vue.js App: Handle the notification display in your app when it is in the foreground.
   Vue.js 앱에 알림 표시: 앱이 포그라운드에 있을 때 앱의 알림 표시를 처리합니다.

1. Set Up Firebase Messaging

1. Firebase 메시징 설정

First, ensure that Firebase and Firebase Messaging are properly configured in your Vue.js app.
먼저 Vue.js 앱에 Firebase 및 Firebase 메시징이 올바르게 구성되어 있는지 확인하세요.

Install Firebase:

npm install firebase

 

Initialize Firebase Messaging in your main.js or a separate Firebase config file:
main.js 또는 별도의 Firebase 구성 파일에서 Firebase 메시징을 초기화하세요:

import { initializeApp } from 'firebase/app';
import { getMessaging, onMessage } from 'firebase/messaging';

// Your Firebase configuration
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Initialize Firebase Messaging
const messaging = getMessaging(app);

2. Register a Service Worker

2. 서비스 워커 등록

You need a service worker to receive push notifications when the app is not in the foreground.
앱이 포그라운드에 있지 않을 때 푸시 알림을 받으려면 서비스 워커가 필요합니다.

Create firebase-messaging-sw.js in the public directory:

공개 디렉터리에 firebase-messaging-sw.js를 생성합니다:

importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js');

// Your Firebase configuration
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Retrieve Firebase Messaging object.
const messaging = firebase.messaging();

// Handle background messages
messaging.onBackgroundMessage(function(payload) {
  console.log('Received background message ', payload);
  // Customize notification here
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});

Register the Service Worker in your main.js:

main.js에 서비스 워커를 등록하세요:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/firebase-messaging-sw.js')
  .then((registration) => {
    console.log('Service Worker registered with scope:', registration.scope);
  }).catch((err) => {
    console.error('Service Worker registration failed:', err);
  });
}

3. Handle Notifications in the Foreground

3. 포그라운드에서 알림 처리

In your Vue.js app, listen for incoming messages when the app is in the foreground:
Vue.js 앱에서 앱이 포그라운드에 있을 때 수신 메시지를 수신합니다.

Add the following code in your main.js or a component:

main.js 또는 구성요소에 다음 코드를 추가하세요:

onMessage(messaging, (payload) => {
  console.log('Message received. ', payload);
  // Show a notification in the foreground
  new Notification(payload.notification.title, {
    body: payload.notification.body,
    icon: '/firebase-logo.png'
  });
});

4. Display Notifications

4. 알림 표시

When a notification is received, the Service Worker will display it if the app is in the background. If the app is in the foreground, the Vue.js app will handle the display.
알림이 수신되면 앱이 백그라운드에 있으면 서비스 워커가 알림을 표시합니다. 앱이 포그라운드에 있으면 Vue.js 앱이 디스플레이를 처리합니다.

5. Request Notification Permission

5. 알림 권한 요청

Make sure to request notification permission from the user:
사용자에게 알림 권한을 요청하세요.

Notification.requestPermission().then((permission) => {
  if (permission === 'granted') {
    console.log('Notification permission granted.');
  } else {
    console.log('Unable to get permission to notify.');
  }
});

Summary 요약

• Service Worker: Receives push notifications and displays them when the app is in the background.
  서비스 워커: 푸시 알림을 수신하고 앱이 백그라운드에 있을 때 표시합니다.
• Foreground Handling: Uses onMessage to handle push notifications when the app is in the foreground and displays them using the Web Notification API.
  포그라운드 처리: 'onMessage'를 사용하여 앱이 포그라운드에 있을 때 푸시 알림을 처리하고 웹 알림 API를 사용하여 표시합니다.
• Permission: Always ensure you have permission from the user to display notifications.
  권한: 항상 사용자로부터 알림 표시 권한을 받았는지 확인하세요.

This setup allows your Vue.js app to handle push notifications, displaying them both when the app is in the foreground and in the background. 이 설정을 통해 Vue.js 앱은 푸시 알림을 처리하여 앱이 포그라운드에 있을 때와 백그라운드에 있을 때 모두 표시할 수 있습니다.