ChatGPT와 FCM 개발 - 구독자 정보 저장

77. 구독자 정보 저장

사용자가 푸시 알림을 구독하면 구독 정보를 Firestore에 저장합니다. 이렇게 저장된 구독자 정보를 이용하여 푸시 알림을 보낼 수 있습니다. 이들 구독자 정보를 Firestore에 저장하는 방법을 알아봅니다.

ChatGPT에게 물었습니다.

I want to store push notification subscriber information in firestore using vue.

vue를 사용하여 firestore에 푸시 알림 구독자 정보를 저장하고 싶어.

ChatGPT

 

To store push notification subscriber information in Firestore using Vue.js, you'll need to combine Vue's frontend capabilities with Firebase Firestore's backend to handle push notifications. Here's a step-by-step guide on how to achieve this.

Vue.js를 사용하여 Firestore에 푸시 알림 구독자 정보를 저장하려면 Vue의 프런트엔드 기능을 Firebase Firestore의 백엔드와 결합하여 푸시 알림을 처리해야 합니다. 이를 달성하는 방법에 대한 단계별 가이드는 다음과 같습니다.

1. Set Up Firebase in Your Vue.js Project

1. Vue.js 프로젝트에서 Firebase 설정

First, ensure Firebase is set up in your Vue project.
먼저 Vue 프로젝트에 Firebase가 설정되어 있는지 확인하세요.

1.1. Install Firebase

1.1. Firebase 설치

 

If you haven't already installed Firebase in your Vue.js project, you can do so using npm or yarn:
Vue.js 프로젝트에 Firebase를 아직 설치하지 않은 경우 npm 또는 Yarn을 사용하여 설치할 수 있습니다.

npm install firebase

1.2. Initialize Firebase

1.2. Firebase 초기화

 

Create a firebase.js file in your src directory to initialize Firebase:
Firebase를 초기화하려면 src 디렉터리에 firebase.js 파일을 만듭니다.

// src/firebase.js

import firebase from 'firebase/app';
import 'firebase/firestore';

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",
  measurementId: "YOUR_MEASUREMENT_ID"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

const db = firebase.firestore();

export { db };

2. Set Up Service Worker

2. 서비스 워커 설정

Your Service Worker (firebase-messaging-sw.js) is necessary for handling push notifications in the background.
백그라운드에서 푸시 알림을 처리하려면 서비스 워커(firebase-messaging-sw.js)가 필요합니다.

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

public 폴더에 firebase-messaging-sw.js를 생성합니다.

// public/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');

firebase.initializeApp({
  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",
  measurementId: "YOUR_MEASUREMENT_ID"
});

const messaging = firebase.messaging();

messaging.onBackgroundMessage(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/firebase-logo.png'
  };

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

3. Request Permission and Subscribe Users to Push Notifications

3. 권한 요청 및 사용자에게 푸시 알림 구독

Create a function in your Vue component to request permission to send push notifications, subscribe users, and store their subscription information in Firestore.
Vue 구성 요소에 함수를 만들어 푸시 알림을 보내고, 사용자를 구독하고, 구독 정보를 Firestore에 저장할 수 있는 권한을 요청하세요.

3.1. Create Subscription Function

3.1. 구독 기능 생성

 

In one of your Vue components (e.g., App.vue or a dedicated component for notifications): Vue 구성 요소 중 하나(예: 'App.vue' 또는 알림 전용 구성 요소):

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

<script>
import firebase from 'firebase/app';
import 'firebase/messaging';
import { db } from './firebase';

export default {
  methods: {
    async subscribeToNotifications() {
      try {
        const messaging = firebase.messaging();
        await Notification.requestPermission();

        const token = await messaging.getToken({
          vapidKey: 'YOUR_VAPID_PUBLIC_KEY', // Replace with your VAPID public key
        });

        if (token) {
          console.log('User is subscribed:', token);

          // Store the subscription token in Firestore
          await db.collection('subscriptions').add({
            token,
            subscribedAt: firebase.firestore.FieldValue.serverTimestamp(),
          });

          console.log('Subscription saved to Firestore');
        } else {
          console.warn('Failed to get push token for push notification.');
        }
      } catch (error) {
        console.error('Error subscribing to notifications:', error);
      }
    },
  },
};
</script>

3.2. Handle Push Notifications

3.2. 푸시 알림 처리

 

In your main.js or a similar entry file, register the Service Worker:
main.js 또는 유사한 항목 파일에서 서비스 워커를 등록합니다.

// src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import './firebase'; // Ensure firebase is initialized

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

createApp(App).mount('#app');

4. Test the Functionality

4. 기능 테스트

1. Run your Vue.js application and click the "Subscribe to Notifications" button.
   Vue.js 애플리케이션을 실행하고 "알림 구독" 버튼을 클릭하세요.
2. Grant notification permission when prompted.
   메시지가 표시되면 알림 권한을 부여합니다.
3. Check Firestore in the Firebase Console to see if the subscription information is stored correctly.
   Firebase 콘솔에서 Firestore를 확인하여 구독 정보가 올바르게 저장되었는지 확인하세요.

5. Security Rules in Firestore

5. Firestore의 보안 규칙

Ensure your Firestore security rules allow writing to the subscriptions collection, but in production, secure this by requiring authentication:
Firestore 보안 규칙에서 '구독' 컬렉션에 대한 쓰기를 허용하는지 확인하세요. 하지만 프로덕션에서는 인증을 요구하여 이를 보호하세요.

service cloud.firestore {
  match /databases/{database}/documents {
    match /subscriptions/{document=**} {
      allow write: if true; // For testing only, change to require auth for production
      allow read: if true;  // For testing only, change to require auth for production
    }
  }
}

Summary 요약

This guide explains how to store push notification subscriber information in Firestore using Vue.js. The key steps include setting up Firebase in your Vue project, creating a Service Worker, requesting push notification permissions, subscribing users, and saving the subscription tokens in Firestore. After implementing this, your Vue.js app will be able to manage push notifications and store subscription information efficiently.

이 가이드에서는 Vue.js를 사용하여 Firestore에 푸시 알림 구독자 정보를 저장하는 방법을 설명합니다. 주요 단계에는 Vue 프로젝트에서 Firebase 설정, 서비스 워커 생성, 푸시 알림 권한 요청, 사용자 구독, Firestore에 구독 토큰 저장이 포함됩니다. 이를 구현한 후 Vue.js 앱은 푸시 알림을 관리하고 구독 정보를 효율적으로 저장할 수 있습니다.

ChatGPT가 시키는 대로 했습니다.

ChatGPT가 대답한 내용 중에 firestore에 구독 정보를 저장하는 기능에 대한 설명만 사용합니다.

1. Firebase 초기화

2. 구독자 정보 생성 및 서버 전송

3. 실행

4. Source Code

src/sirebase/firebase.js

// src/sirebase/firebase.js

import firebase from 'firebase/compat/app';
import 'firebase/compat/messaging';
import 'firebase/compat/firestore';

// Your Firebase configuration (from Firebase Console)
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",
  measurementId: "YOUR_MEASUREMENT_ID"
};

firebase.initializeApp(firebaseConfig);

const db = firebase.firestore();

// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = firebase.messaging();

export { firebase, db, messaging };

src/notifications.js

Copy// src/notifications.js

import { firebase, db } from '@/firebase/firebase'

function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/-/g, '+')
    .replace(/_/g, '/');

  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }

  return outputArray;
}

export async function subscribeUserToPush() {
  try {
    const registration = await navigator.serviceWorker.ready;
    const permission = await Notification.requestPermission();

    if (permission === 'granted') {
      console.log('Notification permission granted.');

      const vapidPublicKey = "YOUR_VAPID_PUBLIC_KEY";  // Replace with your VAPID public key

      const subscription = await registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array(vapidPublicKey)
      });

      console.log('User is subscribed:', subscription);

      // Send subscription to server to store it
      await sendSubscriptionToServer(subscription);

      return subscription;

    } else {
      console.warn('Notification permission not granted.');
    }
  } catch (error) {
    console.error('Failed to subscribe the user: ', error);
  }
}

async function sendSubscriptionToServer(subscription) {

  const token = JSON.parse(JSON.stringify(subscription));
   // Store the subscription token in Firestore
   await db.collection('subscriptions').add({
    token,
    subscribedAt: firebase.firestore.FieldValue.serverTimestamp(),
  });

  console.log('Subscription saved to Firestore');
}