ChatGPT와 FCM 개발 - FCM 디버깅 2

71. FCM 디버깅 2

Service Worker는 등록되었습니다. 그러나 messaging.requestPermission에서 에러가 납니다.

ChatGPT에게 물었습니다.

TypeError: _firebase_firebase__WEBPACK_IMPORTED_MODULE_0__.messaging.requestPermission is not a function

ChatGPT

The error firebase_firebase__WEBPACK_IMPORTED_MODULE_0__.messaging.requestPermission is not a function occurs because in Firebase v9, the API for Firebase Cloud Messaging (FCM) has changed, and the requestPermission() method has been removed.
'firebase_firebase__WEBPACK_IMPORTED_MODULE_0.messaging.requestPermission은 함수가 아닙니다' 오류는 Firebase v9에서 FCM(Firebase Cloud Messaging)용 API가 변경되고 'requestPermission()' 메서드가 제거되었기 때문에 발생합니다.

Solution: How to Handle Notification Permissions in Firebase v9

솔루션: Firebase v9에서 알림 권한을 처리하는 방법

In Firebase v9, you no longer use messaging.requestPermission() to request notification permissions. Instead, the permission request should be handled directly using the native Notification API provided by the browser. Here's how you can correctly handle notification permissions and retrieve the FCM token:

Firebase v9에서는 더 이상 'messaging.requestPermission()'을 사용하여 알림 권한을 요청하지 않습니다. 대신 브라우저에서 제공하는 기본 '알림' API를 사용하여 권한 요청을 직접 처리해야 합니다. 알림 권한을 올바르게 처리하고 FCM 토큰을 검색하는 방법은 다음과 같습니다.

Step 1: Request Notification Permission Using the Native API

1단계: 네이티브 API를 사용하여 알림 권한 요청

Before you can use FCM, you need to ask the user for permission to show notifications. This can be done using the browser's Notification API.
FCM을 사용하려면 먼저 사용자에게 알림 표시 권한을 요청해야 합니다. 이는 브라우저의 '알림' API를 사용하여 수행할 수 있습니다.

// Check if the browser supports notifications
if ('Notification' in window) {
  // Request permission from the user
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');
      // Initialize Firebase and get the FCM token
      getFcmToken();
    } else {
      console.log('Notification permission denied.');
    }
  });
} else {
  console.log('This browser does not support notifications.');
}

Step 2: Get the FCM Token Using Firebase v9 Modular SDK

2단계: Firebase v9 Modular SDK를 사용하여 FCM 토큰 가져오기

After getting permission, you can then initialize Firebase Messaging and retrieve the token.
권한을 얻은 후 Firebase 메시징을 초기화하고 토큰을 검색할 수 있습니다.

import { getMessaging, getToken } from "firebase/messaging";
import { initializeApp } from "firebase/app";

// Your web app's 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_SENDER_ID",
  appId: "YOUR_APP_ID"
};

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

// Function to get FCM token
function getFcmToken() {
  const messaging = getMessaging(app);
  getToken(messaging, { vapidKey: "YOUR_VAPID_KEY" })
    .then((currentToken) => {
      if (currentToken) {
        console.log("FCM Token:", currentToken);
        // Send the token to your server and update the UI if necessary
      } else {
        console.log("No registration token available. Request permission to generate one.");
      }
    })
    .catch((err) => {
      console.log("An error occurred while retrieving token. ", err);
    });
}

Step 3: Handle VAPID Key (Optional)

3단계: VAPID 키 처리(선택사항)

If you are using Web Push notifications, you'll need to specify the VAPID key, which is used to authenticate the sender (your server) with FCM:
웹 푸시 알림을 사용하는 경우 FCM으로 발신자(서버)를 인증하는 데 사용되는 VAPID 키를 지정해야 합니다.

• Replace "YOUR_VAPID_KEY" with your actual VAPID key.
  "YOUR_VAPID_KEY"를 실제 VAPID 키로 바꾸세요.
• You can generate a VAPID key from the Firebase Console under Project Settings -> Cloud Messaging.
  Firebase 콘솔의 프로젝트 설정 -> 클라우드 메시징에서 VAPID 키를 생성할 수 있습니다.

Full Example Integration

전체 예시 통합

Here is how everything ties together in a Vue.js component:
Vue.js 구성 요소에서 모든 것이 어떻게 연결되는지는 다음과 같습니다.

<template>
  <div>
    <h1>Firebase Cloud Messaging with Vue and Firebase v9</h1>
    <button @click="requestNotificationPermission">Enable Notifications</button>
  </div>
</template>

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

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

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

export default {
  name: "App",
  methods: {
    requestNotificationPermission() {
      if ("Notification" in window) {
        Notification.requestPermission().then((permission) => {
          if (permission === "granted") {
            console.log("Notification permission granted.");
            this.getFcmToken();
          } else {
            console.log("Notification permission denied.");
          }
        });
      } else {
        console.log("This browser does not support notifications.");
      }
    },
    getFcmToken() {
      const messaging = getMessaging(app);
      getToken(messaging, { vapidKey: "YOUR_VAPID_KEY" })
        .then((currentToken) => {
          if (currentToken) {
            console.log("FCM Token:", currentToken);
            // Send the token to your server and update the UI if necessary
          } else {
            console.log("No registration token available. Request permission to generate one.");
          }
        })
        .catch((err) => {
          console.log("An error occurred while retrieving token. ", err);
        });
    }
  }
};
</script>

Conclusion 결론

In Firebase v9, the requestPermission method is no longer part of the Firebase SDK. Instead, you should use the browser's native Notification.requestPermission method. Once permission is granted, you can obtain the FCM token using the getMessaging and getToken functions from the Firebase Messaging module. This approach will help you properly implement push notifications in your Vue.js app using Firebase v9.

Firebase v9에서는 'requestPermission' 메서드가 더 이상 Firebase SDK의 일부가 아닙니다. 대신 브라우저의 기본 Notification.requestPermission 메서드를 사용해야 합니다. 권한이 부여되면 Firebase 메시징 모듈의 getMessaging 및 getToken 함수를 사용하여 FCM 토큰을 얻을 수 있습니다. 이 접근 방식은 Firebase v9를 사용하여 Vue.js 앱에서 푸시 알림을 올바르게 구현하는 데 도움이 됩니다.

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

 

에러가 나타납니다.

FirebaseError: Messaging: A problem occurred while subscribing the user to FCM: Request is missing required authentication credential. Expected OAuth 2 access token, login cookie or other valid authentication credential.

여러가지 질문을 했지만 문제를 해결하지 못합니다.

검색을 통해 Service Worker와 관계가 있다는 것을 알게 되었습니다.