ChatGPT와 FCM 개발 - 알림에 링크 추가

90. 알림에 링크 추가

알림에 링크를 추가하고자 합니다.

ChatGPT에게 물었습니다.

How to put a link in onMessage()?

onMessage()에 link를 넣는 방법은?

ChatGPT

 

To include a link in the notification displayed by onMessage() when using Firebase Cloud Messaging (FCM) with Firebase v9, you can modify the notification options to include a click_action or handle the click event manually. Here's how you can do it:
Firebase v9에서 FCM(Firebase Cloud Messaging)을 사용할 때 'onMessage()'에 의해 표시되는 알림에 링크를 포함하려면 알림 옵션을 수정하여 'click_action'을 포함하거나 클릭 이벤트를 수동으로 처리하면 됩니다. 방법은 다음과 같습니다.

1. Modify onMessage to Handle Clicks:

1. 클릭을 처리하도록 onMessage 수정

When a message is received while the app is in the foreground, you can customize the notification to include a clickable link.
앱이 포그라운드에 있는 동안 메시지가 수신되면 클릭 가능한 링크를 포함하도록 알림을 맞춤설정할 수 있습니다.

Example:

import { initializeApp } from 'firebase/app';
import { getMessaging, onMessage } from 'firebase/messaging';

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"
};

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

// Handle incoming messages in the foreground
onMessage(messaging, (payload) => {
  console.log('Message received: ', payload);

  // Extract notification data
  const title = payload.notification.title;
  const options = {
    body: payload.notification.body,
    icon: payload.notification.icon || '/default-icon.png',
    data: { url: payload.notification.click_action || 'https://default-url.com' } // Custom data for the click event
  };

  // Show notification
  if (Notification.permission === 'granted') {
    const notification = new Notification(title, options);

    // Handle click event on the notification
    notification.onclick = (event) => {
      event.preventDefault(); // Prevent the browser from focusing the Notification's tab
      window.open(notification.data.url, '_blank'); // Open the URL in a new tab
    };
  }
});

2. Sending the Message from the Server:

2. 서버에서 메시지 보내기:

To ensure that the click_action or URL is included in the message, you should send it from your server-side (Firebase Functions, for example) with the click_action parameter.
click_action 또는 URL이 메시지에 포함되도록 하려면 click_action 매개변수를 사용하여 서버측(예: Firebase Functions)에서 이를 보내야 합니다.

Example:

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

admin.initializeApp({
  credential: admin.credential.applicationDefault()
});

const message = {
  notification: {
    title: 'Check this out!',
    body: 'Click to see something awesome',
  },
  data: {
    click_action: 'https://your-website.com/special-page' // URL to open when the notification is clicked
  },
  token: 'user-device-token'
};

admin.messaging().send(message)
  .then((response) => {
    console.log('Successfully sent message:', response);
  })
  .catch((error) => {
    console.error('Error sending message:', error);
  });

Key Points: 핵심 사항

• data.click_action: This is a custom field you can include in the notification data payload to specify a URL that will be opened when the notification is clicked.
  data.click_action: 이는 알림을 클릭할 때 열리는 URL을 지정하기 위해 알림 데이터 페이로드에 포함할 수 있는 사용자 정의 필드입니다.
• Notification Click Event: In the onMessage handler, you can listen for the click event on the notification and then redirect the user to the desired URL.
  알림 클릭 이벤트: onMessage 핸들러에서 알림의 click 이벤트를 수신한 다음 사용자를 원하는 URL로 리디렉션할 수 있습니다.

Summary: 요약:

1. Set up onMessage to display a notification with a clickable link.
   클릭 가능한 링크가 포함된 알림을 표시하려면 onMessage를 설정하세요.
2. Handle the click event on the notification to open the link in a new tab.
   알림에서 클릭 이벤트를 처리하여 새 탭에서 링크를 엽니다.
3. Send the message from the server with a click_action or custom URL in the data payload.
   데이터 페이로드에 'click_action' 또는 맞춤 URL을 사용하여 서버에서 메시지를 보냅니다.

This approach allows you to incorporate a clickable link within the onMessage() function when handling notifications in the foreground.
이 접근 방식을 사용하면 포그라운드에서 알림을 처리할 때 onMessage() 함수 내에 클릭 가능한 링크를 통합할 수 있습니다.

ChatGPT에게 물었습니다.

Service Worker에 link를 추가하는 방법은?

ChatGPT

 

To add a link to a notification displayed by a Service Worker, you can include a click_action in the notification data and handle the notificationclick event within the Service Worker. This will allow the notification to open a specific URL when clicked.

서비스 워커가 표시하는 알림에 대한 링크를 추가하려면 알림 데이터에 'click_action'을 포함하고 서비스 워커 내에서 'notificationclick' 이벤트를 처리하면 됩니다. 이렇게 하면 알림을 클릭할 때 특정 URL이 열리도록 허용됩니다.

Here’s how you can implement this in your Service Worker:
서비스 워커에서 이를 구현하는 방법은 다음과 같습니다.

1. Modify the Service Worker (firebase-messaging-sw.js):

1. 서비스 워커 수정(firebase-messaging-sw.js):

First, ensure your Service Worker is set up to handle the notificationclick event.
먼저 서비스 워커가 notificationclick 이벤트를 처리하도록 설정되었는지 확인하세요.

// Import Firebase scripts
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');

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"
};

// Initialize Firebase in the Service Worker
firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

// Handle background messages
messaging.onBackgroundMessage((payload) => {
  console.log('Received background message: ', payload);

  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: payload.notification.icon || '/default-icon.png',
    data: {
      url: payload.notification.click_action || 'https://your-default-url.com' // URL to open when notification is clicked
    }
  };

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

// Handle notification click event
self.addEventListener('notificationclick', function(event) {
  event.notification.close(); // Close the notification

  // Open the URL specified in the notification's data
  event.waitUntil(
    clients.openWindow(event.notification.data.url)
  );
});

2. Send the Push Notification from the Server:

2. 서버에서 푸시 알림 보내기:

When sending the push notification, include the click_action in the data payload to specify the URL that should be opened when the user clicks on the notification.
푸시 알림을 보낼 때 데이터 페이로드에 click_action을 포함하여 사용자가 알림을 클릭할 때 열려야 하는 URL을 지정합니다.

Example Server-Side Code (Firebase Functions):

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

admin.initializeApp({
  credential: admin.credential.applicationDefault()
});

const message = {
  notification: {
    title: 'New Update Available!',
    body: 'Click to learn more about the update.',
  },
  data: {
    click_action: 'https://your-website.com/update-page' // URL to open when the notification is clicked
  },
  token: 'user-device-token'
};

admin.messaging().send(message)
  .then((response) => {
    console.log('Successfully sent message:', response);
  })
  .catch((error) => {
    console.error('Error sending message:', error);
  });

3. Testing the Setup:

3. 설정 테스트:

• Ensure your web app is served over HTTPS (required for Service Workers and push notifications).
  웹 앱이 HTTPS를 통해 제공되는지 확인하세요(서비스 워커 및 푸시 알림에 필요).
• Register the Service Worker in your web app.
  웹 앱에 서비스 워커를 등록하세요.
• Send a test notification from the server and check that clicking on the notification opens the specified link.
  서버에서 테스트 알림을 보내고 알림을 클릭하면 지정된 링크가 열리는지 확인합니다.

Summary: 요약:

• click_action: Use the click_action field in the notification data payload to specify the URL to be opened.
  click_action: 알림 데이터 페이로드의 click_action 필드를 사용하여 열려는 URL을 지정합니다.
• Service Worker notificationclick Event: The Service Worker listens for the notificationclick event and opens the specified URL using clients.openWindow().
  서비스 워커 notificationclick 이벤트: 서비스 워커는 notificationclick 이벤트를 수신하고 clients.openWindow()를 사용하여 지정된 URL을 엽니다.

This setup will allow you to display notifications that, when clicked, open a specific URL, providing a seamless experience for the user. 이 설정을 사용하면 클릭 시 특정 URL이 열리는 알림을 표시하여 사용자에게 원활한 경험을 제공할 수 있습니다.