47. mylog 여러 기기에 알림

마이로그 웹앱은 PC에서도, 모바일에서도 사용할 수 있습니다. 알림 요청에 대해 각 회원당 하나의 FCM 토큰을 저장하고 있다면 하나의 기기에만 FCM을 전송할 수 있습니다. 그러므로 FCM 토큰은 한 사람의 회원에 대해 여러개의 토큰을 저장할 수 있어야 합니다. 이것에 대해 개선을 해 봅시다.

ChatGPT에게 물었습니다.

How can the same member receive FCM on PC and mobile?

같은 회원이 PC와 모바일에 fcm을 받으려면?

ChatGPT

 

To allow the same member to receive Firebase Cloud Messaging (FCM) notifications on both PC and mobile devices, you need to ensure that each device registers for FCM and saves its unique FCM token in a shared location (e.g., Firestore or your database). Each device (PC or mobile) will have its own distinct FCM token, but both tokens will be associated with the same user.

 

동일한 구성원이 PC와 모바일 기기 모두에서 FCM(Firebase Cloud Messaging) 알림을 수신할 수 있도록 하려면 각 기기가 FCM에 등록하고 고유한 FCM 토큰을 공유 위치(예: Firestore 또는 데이터베이스)에 저장하는지 확인해야 합니다. 각 장치(PC 또는 모바일)에는 고유한 FCM 토큰이 있지만 두 토큰 모두 동일한 사용자와 연결됩니다.

 

Steps to Enable FCM on PC and Mobile for the Same Member

동일한 회원에 대해 PC와 모바일에서 FCM을 활성화하는 단계

1. Register FCM tokens on each device (PC and mobile).
   각 기기(PC 및 모바일)에 FCM 토큰을 등록합니다.
2. Save each device's FCM token in a central database (e.g., Firestore) associated with the user's account.
   각 기기의 FCM 토큰을 사용자 계정과 연결된 중앙 데이터베이스(예: Firestore)에 저장합니다.
3. Send notifications to all the saved FCM tokens for the user.
   사용자를 위해 저장된 모든 FCM 토큰에 알림을 보냅니다.

 

1. Register FCM Token on Each Device

1. 각 장치에 FCM 토큰 등록

Every time a user logs into your app on a new device (PC or mobile), generate and retrieve the FCM token for that specific device.
사용자가 새 기기(PC 또는 모바일)에서 앱에 로그인할 때마다 해당 특정 기기에 대한 FCM 토큰을 생성하고 검색합니다.
On both PC and mobile, use the same function to request notification permission and retrieve the FCM token. Here’s an example of how to do this for a user:
PC와 모바일 모두 동일한 기능을 사용하여 알림 권한을 요청하고 FCM 토큰을 검색합니다. 다음은 사용자에 대해 이 작업을 수행하는 방법에 대한 예입니다.

import { getToken } from "firebase/messaging";
import { messaging, db } from './firebase'; // Firebase Messaging and Firestore

// Get FCM Token and Save It to Firestore
export const getAndSaveFCMToken = async (userId) => {
  try {
    // Request permission from the user
    const permission = await Notification.requestPermission();
    if (permission === "granted") {
      const token = await getToken(messaging, { vapidKey: "YOUR_VAPID_KEY" });
      if (token) {
        console.log("FCM Token: ", token);
        // Save the token to Firestore under the user's document
        await saveFCMToken(userId, token);
      } else {
        console.log("No FCM token available.");
      }
    } else {
      console.log("Permission not granted for notifications.");
    }
  } catch (error) {
    console.error("Error getting FCM token:", error);
  }
};

// Save the FCM Token to Firestore
const saveFCMToken = async (userId, token) => {
  try {
    const userRef = db.collection('users').doc(userId);
    await userRef.update({
      fcmTokens: firebase.firestore.FieldValue.arrayUnion(token) // Add the token to an array
    });
    console.log("FCM token saved to Firestore");
  } catch (error) {
    console.error("Error saving FCM token:", error);
  }
};

 

2. Save Multiple FCM Tokens in Firestore

2. Firestore에 여러 FCM 토큰 저장

For each user, save their FCM tokens as an array in Firestore. Each time the user logs in from a new device, you add that device’s FCM token to the array.
각 사용자에 대해 FCM 토큰을 Firestore에 배열로 저장합니다. 사용자가 새 장치에서 로그인할 때마다 해당 장치의 FCM 토큰을 어레이에 추가합니다.

Example Firestore structure:

Firestore 구조 예시:

{
  "users": {
    "userId": {
      "fcmTokens": ["token1", "token2"]  // List of FCM tokens for PC, mobile, etc.
    }
  }
}

 

Here’s how you would update the fcmTokens array with a new token:
새 토큰으로 fcmTokens 배열을 업데이트하는 방법은 다음과 같습니다.

import { db } from './firebase'; // Firestore

// Update FCM tokens for the user
const saveFCMToken = async (userId, token) => {
  try {
    const userRef = db.collection('users').doc(userId);
    await userRef.update({
      fcmTokens: firebase.firestore.FieldValue.arrayUnion(token) // Add the new token
    });
    console.log("FCM token saved to Firestore");
  } catch (error) {
    console.error("Error saving FCM token:", error);
  }
};

 

3. Sending Notifications to All Devices

3. 모든 장치에 알림 보내기

When you send a notification to the user, you need to send it to all their registered FCM tokens (i.e., for both PC and mobile devices). This can be done from your backend using Firebase Cloud Functions or your server.
사용자에게 알림을 보낼 때 등록된 모든 FCM 토큰(예: PC 및 모바일 장치 모두)에 알림을 보내야 합니다. 이는 Firebase Cloud Functions 또는 서버를 사용하여 백엔드에서 수행할 수 있습니다.
Here’s an example using Firebase Admin SDK in Node.js to send notifications to multiple tokens:
다음은 Node.js에서 Firebase Admin SDK를 사용하여 여러 토큰에 알림을 보내는 예입니다.

Install Firebase Admin SDK if you haven't:
아직 설치하지 않은 경우 Firebase Admin SDK를 설치하세요.

 

npm install firebase-admin

 

Use the Admin SDK to send notifications:
Admin SDK를 사용하여 알림을 보냅니다.

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

// Initialize Firebase Admin SDK
admin.initializeApp({
  credential: admin.credential.applicationDefault(), // Make sure your credentials are set up
});

// Function to send notifications to multiple FCM tokens
const sendNotificationToUser = async (userId, notification) => {
  try {
    // Retrieve FCM tokens from Firestore
    const userRef = db.collection('users').doc(userId);
    const userDoc = await userRef.get();
    const tokens = userDoc.data().fcmTokens;

    if (tokens && tokens.length > 0) {
      // Notification message payload
      const message = {
        notification: {
          title: notification.title,
          body: notification.body,
        },
        tokens: tokens, // Send to all tokens
      };

      // Send notification to all devices
      const response = await admin.messaging().sendMulticast(message);
      console.log('Notifications sent successfully:', response);
    } else {
      console.log('No FCM tokens available for user:', userId);
    }
  } catch (error) {
    console.error('Error sending notifications:', error);
  }
};

 

This sendNotificationToUser function fetches all FCM tokens for a user and sends notifications to all their devices (PC, mobile, etc.).
이 sendNotificationToUser 함수는 사용자의 모든 FCM 토큰을 가져오고 사용자의 모든 장치(PC, 모바일 등)에 알림을 보냅니다.

 

4. Handling Token Cleanup (Optional)

4. 토큰 정리 처리(선택 사항)

 

Over time, FCM tokens may become invalid (for example, when the user logs out from a device). To handle this, Firebase provides a way to clean up invalid tokens. After sending a message, Firebase will return the results for each token. If a token is invalid, you can remove it from Firestore.

시간이 지남에 따라 FCM 토큰이 유효하지 않게 될 수 있습니다(예: 사용자가 장치에서 로그아웃하는 경우). 이를 처리하기 위해 Firebase는 잘못된 토큰을 정리하는 방법을 제공합니다. 메시지를 보낸 후 Firebase는 각 토큰에 대한 결과를 반환합니다. 토큰이 유효하지 않으면 Firestore에서 삭제할 수 있습니다.

 

Here’s an example of how to handle token cleanup:
다음은 토큰 정리를 처리하는 방법에 대한 예입니다.

const sendNotificationToUser = async (userId, notification) => {
  try {
    const userRef = db.collection('users').doc(userId);
    const userDoc = await userRef.get();
    const tokens = userDoc.data().fcmTokens;

    if (tokens && tokens.length > 0) {
      const message = {
        notification: {
          title: notification.title,
          body: notification.body,
        },
        tokens: tokens,
      };

      const response = await admin.messaging().sendMulticast(message);

      const invalidTokens = [];
      response.responses.forEach((res, idx) => {
        if (!res.success) {
          console.log(`Token ${tokens[idx]} is invalid`);
          invalidTokens.push(tokens[idx]);
        }
      });

      // Remove invalid tokens from Firestore
      if (invalidTokens.length > 0) {
        await userRef.update({
          fcmTokens: admin.firestore.FieldValue.arrayRemove(...invalidTokens),
        });
        console.log('Invalid tokens removed from Firestore.');
      }
    }
  } catch (error) {
    console.error('Error sending notification:', error);
  }
};

 

Conclusion 결론

 

To ensure that the same member can receive FCM notifications on both PC and mobile:
동일한 회원이 PC와 모바일 모두에서 FCM 알림을 받을 수 있도록 하려면:

1. Request FCM token for each device (PC, mobile).
   기기별 FCM 토큰을 요청합니다(PC, 모바일).
2. Store each token in Firestore under the user’s document in an fcmTokens array.
   Firestore의 사용자 문서 아래 fcmTokens 배열에 각 토큰을 저장합니다.
3. Send notifications to all saved tokens using Firebase Admin SDK from your backend.
   백엔드에서 Firebase Admin SDK를 사용하여 저장된 모든 토큰에 알림을 보냅니다.
4. Optionally, clean up invalid tokens after sending notifications. 선택적으로 알림을 보낸 후 잘못된 토큰을 정리합니다.

This allows seamless notification delivery to both PC and mobile devices for the same user.
이를 통해 동일한 사용자에 대해 PC와 모바일 장치 모두에 원활한 알림 전달이 가능합니다.