ChatGPT와 FCM 개발 - FCM 구현

69. FCM 구현

푸시 알림은 디바이스가 알림을 허용해야 하고, 앱이 실행 중이 아니라도 알림을 받을 수 있어야 합니다.

1. 알림을 받는 것을 허용해야 합니다.
   messaging.requestPermission()
2. 메시지를 받아 처리합니다.
   messaging.onMessage((payload)

ChatGPT에게 물었습니다.

How do I implement fcm with vue and vuetify?

vue, vuetify로 fcm을 구현하려면 어떻게 해야 하지?

mplementing Firebase Cloud Messaging (FCM) in a Vue.js application using Vuetify involves several steps, including setting up Firebase, integrating FCM in your Vue project, and handling notifications. Here's a guide to help you through the process:

Vuetify를 사용하여 Vue.js 애플리케이션에 Firebase 클라우드 메시징(FCM)을 구현하려면 Firebase 설정, Vue 프로젝트에 FCM 통합, 알림 처리 등 여러 단계가 필요합니다. 이 과정을 안내하는 가이드는 다음과 같습니다.

Step 1: Set Up Firebase

1단계: Firebase 설정

1. Create a Firebase Project:

    Firebase 프로젝트 만들기:

2. Go to the Firebase Console.
    Firebase 콘솔로 이동합니다.

3. Create a new project or use an existing one.
    새 프로젝트를 만들거나 기존 프로젝트를 사용하세요.

4. Add Firebase to Your Web App:

   웹 앱에 Firebase를 추가:

5. In the Firebase Console, go to "Project Settings" and select "Add App" to add a web app.
    Firebase 콘솔에서 "프로젝트 설정"으로 이동하여 "앱 추가"를 선택하여 웹 앱을 추가하세요.

6. You'll receive a Firebase config object containing API keys and other details.
    API 키와 기타 세부정보가 포함된 Firebase 구성 개체를 받게 됩니다.

7. Enable Cloud Messaging:

    클라우드 메시징 활성화:

8. Go to the Firebase Console, and under the "Cloud Messaging" tab, configure your notifications and get the server key.
    Firebase 콘솔로 이동하여 '클라우드 메시징' 탭에서 알림을 구성하고 서버 키를 받으세요.

Step 2: Install Required Packages

2단계: 필수 패키지 설치

In your Vue.js project, install the Firebase SDK: Vue.js 프로젝트에서 Firebase SDK를 설치합니다.

npm install firebase

Step 3: Configure Firebase in Your Vue Project

3단계: Vue 프로젝트에서 Firebase 구성

Create a firebase.js file in your project (e.g., in a src/firebase directory) to initialize Firebase:
Firebase를 초기화하려면 프로젝트(예: 'src/firebase' 디렉터리)에 'firebase.js' 파일을 만듭니다.

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

// 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_SENDER_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_MEASUREMENT_ID"
};

firebase.initializeApp(firebaseConfig);

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

export { messaging };

Step 4: Request User Permission for Notifications

4단계: 알림에 대한 사용자 권한 요청

In your main Vue component (e.g., App.vue), request permission to send notifications:
기본 Vue 구성 요소(예: App.vue)에서 알림을 보낼 수 있는 권한을 요청하세요.

import { messaging } from './firebase/firebase';

export default {
  name: 'App',
  mounted() {
    // Request permission to send notifications
    messaging.requestPermission()
      .then(() => {
        console.log('Notification permission granted.');

        // Get token
        return messaging.getToken();
      })
      .then((token) => {
        console.log('FCM Token:', token);
        // Send this token to your server for later use
      })
      .catch((err) => {
        console.log('Unable to get permission to notify.', err);
      });

    // Handle incoming messages
    messaging.onMessage((payload) => {
      console.log('Message received. ', payload);
      // Show notification using Vuetify's snackbar or dialog
      this.$vuetify.snackbar = {
        text: payload.notification.title,
        color: 'info',
        timeout: 6000,
        visible: true,
      };
    });
  },
};

Step 5: Implement Service Worker (for Background Notifications)

5단계: 서비스 워커 구현(백그라운드 알림용)

To handle background notifications, you need a service worker. Create a file named firebase-messaging-sw.js in your public directory:
백그라운드 알림을 처리하려면 서비스 워커가 필요합니다. 공개 디렉터리에 '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');

// Initialize Firebase in Service Worker
firebase.initializeApp({
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_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);
  // Customize notification here
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/firebase-logo.png' // Add a custom icon if needed
  };

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

 

Make sure to register this service worker in your main.js file:
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.log('Service Worker registration failed:', err);
    });
}

Step 6: Testing and Debugging

6단계: 테스트 및 디버깅

• Run your application and ensure that notifications are working as expected.
  애플리케이션을 실행하고 알림이 예상대로 작동하는지 확인하세요.
• Test sending messages using the Firebase Console or your server.
  Firebase 콘솔 또는 서버를 사용하여 메시지 전송을 테스트합니다.
• Check the browser's console for FCM token and incoming messages.
  브라우저의 콘솔에서 FCM 토큰 및 수신 메시지를 확인하세요.

Step 7: Sending Notifications

7단계: 알림 보내기

You can send notifications via the Firebase Console or programmatically using Firebase Admin SDK on your server.
Firebase 콘솔을 통해 또는 서버에서 Firebase Admin SDK를 사용하여 프로그래밍 방식으로 알림을 보낼 수 있습니다.

Optional: Customize Notifications with Vuetify

선택 사항: Vuetify로 알림 사용자 정의

You can further customize how notifications appear using Vuetify components like v-snackbar or v-dialog.
v-snackbar 또는 v-dialog와 같은 Vuetify 구성요소를 사용하여 알림이 표시되는 방식을 추가로 사용자 정의할 수 있습니다.

Conclusion 결론

By following these steps, you'll have FCM integrated with your Vue.js and Vuetify application, allowing you to send and receive notifications seamlessly.
다음 단계를 따르면 FCM이 Vue.js 및 Vuetify 애플리케이션과 통합되어 알림을 원활하게 보내고 받을 수 있습니다.

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

1. firebase 프로젝트

firebase 프로젝트를 만들고, 앱을 추가한 후 API keys 와 각 설정값들을 받아 두세요.

2. Vue 프로젝트

vue create my-fcm

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n

2. vuetify 설치

cd my-fcm

vue add vuetify

? Choose a preset: (Use arrow keys)
Vuetify 2 - Configure Vue CLI (advanced)
> Vuetify 2 - Vue CLI (recommended)
Vuetify 2 - Prototype (rapid development)
Vuetify 3 - Vite (preview)
Vuetify 3 - Vue CLI (preview)

3. firebase SDK 설치

npm install firebase

4. 폴더

5. Firebase 구성

6. 알림에 대한 사용자 권한 요청

7. 서비스 워커 구현(백그라운드 알림용)

8. 서비스 워커 등록

9. 실행

npm run serve

10. 오류

Service Worker가 등록되지 않습니다.
디버깅을 계속합니다.