PWA

ChatGPT와 FCM 개발 - 푸시 알림 보내기

그랜파 개발자 2024. 9. 23. 20:24

81. 푸시 알림 보내기

my-fcm 웹앱에서 Firebase Functions의 ‘'sendPushNotification' 함수를 호출하여 푸시 알림을 보내는 기능을 만들어 봅시다.

ChatGPT에게 물었습니다.

Create a function to send push notifications by calling sendPushNotification in the pwa web app made with Vue.

vue로 만들어진 pwa 웹앱에서 sendPushNotification를 호출하여 푸시 알림을 보내는 기능을 만들어줘.

ChatGPT

 

To create a function that sends push notifications from a Progressive Web App (PWA) built with Vue.js by calling a sendPushNotification function in Firebase, follow these steps. This setup will involve:

Firebase에서 'sendPushNotification' 함수를 호출하여 Vue.js로 구축된 프로그레시브 웹 앱(PWA)에서 푸시 알림을 보내는 함수를 만들려면 다음 단계를 따르세요. 이 설정에는 다음이 포함됩니다.

  1. Creating the sendPushNotification function on your server using Firebase Functions.
    Firebase Functions를 사용하여 서버에 'sendPushNotification' 함수를 만듭니다.
  2. Integrating push notification subscription in your Vue.js PWA.
    Vue.js PWA에 푸시 알림 구독을 통합합니다.
  3. Sending the push notification request from the PWA to the server.
    PWA에서 서버로 푸시 알림 요청을 보냅니다.

Step 1: Create sendPushNotification Function in Firebase Functions

1단계: Firebase Functions에서 sendPushNotification 함수 만들기

This function will send push notifications to users who have subscribed.
이 기능은 구독한 사용자에게 푸시 알림을 보내는 기능입니다.

1.1. Set Up Firebase Functions

1.1. Firebase 함수 설정

 

Ensure you have initialized Firebase Functions in your project:
프로젝트에서 Firebase 함수를 초기화했는지 확인하세요.

firebase init functions

Install the Firebase Admin SDK:
Firebase Admin SDK를 설치합니다.

npm install firebase-admin

1.2. Define the sendPushNotification Function

1.2. sendPushNotification 기능 정의

 

In functions/index.js:
functions/index.js에서:

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

admin.initializeApp();

async function sendPushNotification(title, body, tokens) {
  const message = {
    notification: {
      title: title,
      body: body,
    },
    tokens: tokens,
  };

  try {
    const response = await admin.messaging().sendMulticast(message);
    console.log('Notifications sent:', response.successCount);
    console.log('Failed notifications:', response.failureCount);

    return response;
  } catch (error) {
    console.error('Error sending notifications:', error);
    throw error;
  }
}

exports.triggerPushNotification = functions.https.onRequest(async (req, res) => {
  try {
    const { title, body, tokens } = req.body;

    if (!title || !body || !tokens) {
      return res.status(400).json({ error: 'Missing title, body, or tokens' });
    }

    const response = await sendPushNotification(title, body, tokens);
    res.status(200).json({ message: 'Notifications sent successfully', response });
  } catch (error) {
    res.status(500).json({ error: 'Failed to send notifications' });
  }
});

 

Deploy the function to Firebase:
Firebase에 함수를 배포합니다.

firebase deploy --only functions

 

Step 2: Integrate Push Notification Subscription in Your Vue.js PWA

2단계: Vue.js PWA에 푸시 알림 구독 통합

In your Vue.js PWA, you need to handle the subscription to push notifications and send the subscription data to your backend (Firebase).
Vue.js PWA에서는 푸시 알림 구독을 처리하고 구독 데이터를 백엔드(Firebase)로 보내야 합니다.

2.1. Register Service Worker

2.1. 서비스 워커 등록

 

In your public folder, create a firebase-messaging-sw.js file:
public 폴더에 firebase-messaging-sw.js 파일을 만듭니다.

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

firebase.initializeApp({
  apiKey: 'your-api-key',
  authDomain: 'your-auth-domain',
  projectId: 'your-project-id',
  storageBucket: 'your-storage-bucket',
  messagingSenderId: 'your-messaging-sender-id',
  appId: 'your-app-id',
});

const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/firebase-logo.png'
  };

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

 

In src/main.js (or wherever you initialize your app):
src/main.js(또는 앱을 초기화하는 모든 위치):

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

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

app.mount('#app');

2.2. Request Push Notification Permission

2.2. 푸시 알림 권한 요청

In your Vue component (e.g., App.vue), you can request permission for push notifications:
Vue 구성 요소(예: App.vue)에서 푸시 알림에 대한 권한을 요청할 수 있습니다.

<template>
  <div>
    <button @click="subscribeToNotifications">Subscribe to Notifications</button>
  </div>
</template>

<script>
import { getMessaging, getToken } from "firebase/messaging";

export default {
  methods: {
    async subscribeToNotifications() {
      const messaging = getMessaging();
      try {
        const token = await getToken(messaging, { vapidKey: 'your-web-push-certificate-key-pair' });
        if (token) {
          console.log('FCM token:', token);
          // Send the token to your backend to save it in the database
          await fetch('https://your-server-url/save-token', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({ token }),
          });
          alert('Subscribed to notifications!');
        } else {
          console.warn('No registration token available. Request permission to generate one.');
        }
      } catch (error) {
        console.error('An error occurred while retrieving token:', error);
      }
    }
  }
}
</script>

Step 3: Send the Push Notification Request from the PWA

3단계: PWA에서 푸시 알림 요청 보내기

 

When you want to send a notification to all subscribed users, you can call the Firebase Function you deployed earlier.
구독한 모든 사용자에게 알림을 보내려면 앞서 배포한 Firebase 함수를 호출하면 됩니다.

For example, in your Vue component:
예를 들어 Vue 구성 요소에서는 다음과 같습니다.

<template>
  <div>
    <button @click="sendNotification">Send Notification</button>
  </div>
</template>

<script>
export default {
  methods: {
    async sendNotification() {
      try {
        const response = await fetch('https://your-region-your-project-id.cloudfunctions.net/triggerPushNotification', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            title: 'Hello!',
            body: 'This is a test notification.',
            tokens: ['token_1', 'token_2'], // Replace with actual tokens from your database
          }),
        });
        const result = await response.json();
        console.log('Notification sent:', result);
      } catch (error) {
        console.error('Error sending notification:', error);
      }
    }
  }
}
</script>

Summary 요약

This setup allows your Vue.js PWA to subscribe users to push notifications, store their FCM tokens, and then trigger push notifications using Firebase Functions. You create a sendPushNotification function in Firebase Functions and call it from your Vue.js app to send notifications to subscribed users.

이 설정을 통해 Vue.js PWA는 사용자에게 푸시 알림을 구독하고 FCM 토큰을 저장한 다음 Firebase Functions를 사용하여 푸시 알림을 트리거할 수 있습니다. Firebase Functions에서 'sendPushNotification' 함수를 만들고 Vue.js 앱에서 호출하여 구독한 사용자에게 알림을 보냅니다.