Firebase를 사용하여 React에서 알림을 밀어넣습니다.js

소개하다.

"Push 알림은 애플리케이션이 열려 있지 않더라도 사용자 장치에""Push""알림입니다."웹 전송 알림이 있을 때 웹 응용 프로그램은 서버에서 수시로 메시지를 전송합니다.여기에는 응용 프로그램이 활성 상태이거나 비활성 상태이거나 브라우저에서 열리지 않았거나 브라우저가 비활성 상태인 경우도 포함됩니다.Firebase Cloud Messaging은 플랫폼을 뛰어넘는 메시지 전달 솔루션으로 무료로 신뢰할 수 있는 메시지를 보낼 수 있습니다.
이 강좌에서는 응용 프로그램에서 웹 전송 알림을 받을 수 있도록 Firebase 클라우드 메시지를 설정하는 방법을 소개합니다.js 응용 프로그램.

Firebase 설정

계정이 없으면 https://firebase.google.com에 계정을 만드십시오.계정을 성공적으로 만들면 https://console.firebase.google.com으로 이동하여 프로젝트 만들기 버튼을 클릭하고 필요한 필드를 입력하여 프로젝트를 만들 수 있습니다.

프로젝트 작성이 완료되면만든 항목을 클릭하고 서비스를 연결할 플랫폼을 선택하십시오.웹 프로젝트를 처리하고 있기 때문에 (>) 아이콘을 누르면 웹 옵션을 선택할 수 있습니다.이것은 웹 응용 프로그램에 Firebase를 추가하는 인터페이스로 들어갑니다.앱 닉네임 필드를 작성하고 Register 앱 버튼을 누르면 설정 대상이 생성될 것입니다. 다음 단계에서 React 앱에 전달해야 합니다.

Firebase 클라우드 메시징을 응용 프로그램에 연결

1. 다음 명령을 실행하여 React 프로젝트에 Firebase를 설치합니다.

npm install firebase

2. firebase.js이라는 새 파일을 만들고 다음 코드 줄을 추가합니다.

import { initializeApp } from 'firebase/app';

// Replace this firebaseConfig object with the configurations for the project you created on your firebase console. 
var firebaseConfig = {
 //... 
};

initializeApp(firebaseConfig);

3. Firebase 메시지 모듈을 firebase.js 파일로 가져오기:

import { getMessaging } from "firebase/messaging";

//...

const messaging = getMessaging();

4. requestForToken이라는 함수를 만들고 이 함수는Firebase의 getToken 방법을 사용합니다.이것은 알림을 전송하기 위해 프로그램을 구독할 수 있게 할 수 있다.공지 권한이 부여되지 않은 경우 이 메서드는 사용자에게 공지 권한을 요청합니다.그렇지 않으면, 영패를 되돌려주거나 잘못으로 약속을 거절할 것이다.

//....
import { getMessaging, getToken} from 'firebase/messaging';

//....

export const requestForToken = () =>; {
  return getToken(messaging, { vapidKey: REPLACE_WITH_YOUR_VAPID_KEY })
    .then((currentToken) =>; {
      if (currentToken) {
        console.log('current token for client: ', currentToken);
        // Perform any other necessary action with the token
      } else {
        // Show permission request UI
        console.log('No registration token available. Request permission to generate one.');
      }
    })
    .catch((err) =>; {
      console.log('An error occurred while retrieving token. ', err);
    });
};

참고: getToken 메서드는 자발적인 어플리케이션 서버 ID 또는 VAPID 키를 전달해야 합니다.다음 절차에 따라 사용할 수 있습니다.

은Firebase 콘솔에서 프로젝트의 프로젝트 설정을 클릭하고 클라우드 메시지 옵션 카드로 이동하여 웹 설정 부분으로 스크롤합니다.

웹 Push 인증서 탭에서 키 쌍 생성 을 클릭합니다.

5. 마지막으로 필요한 곳에 firebase.js 파일을 가져오면 프로젝트의 나머지 부분에 연결할 수 있습니다.이 경우 Notification 구성 요소를 생성할 수 있습니다.

import React from 'react';
import { requestForToken } from './firebase';

const Notification = () =>; {
 requestForToken();
 //....
}

추가 단계:

메시징 서비스는 정상적으로 작동하려면 firebase-messaging-sw.js 파일이 필요합니다.나는 이 안내서의 백엔드 탐지기 설정 부분에서 이 파일을 상세하게 설명할 것이다.현재 프로젝트의 공용 폴더에 firebase-messaging-sw.js이라는 빈 파일을 만듭니다.
응용 프로그램의 브라우저 컨트롤러로 이동하여Firebase 클라우드 메시지 서비스에 연결할 수 있는지 테스트합니다.만약 성공한다면, 당신은 받은 영패를 보게 될 것입니다.

무슨 일이야?

1) 권한이 부여되지 않았지만 차단된 것에 대한 오류가 발생하면 브라우저에서 알림 권한을 허용으로 설정해야 합니다.

2) 필수 인증 자격 증명이 없는 경우 잘못된 VAPID 키가 전달될 수 있습니다.

메시지 수신

초기 설정이 완료되면 메시지 탐지기를 설정해야 합니다.페이지에 초점이 있을 때 (즉 사용자가 웹 응용 프로그램을 포함하는 브라우저 옵션 카드에 있을 때), 프론트 데스크톱 메시지 탐지기가 호출되고, 사용자가 다른 옵션 카드에 있을 때, 심지어는 우리의 응용 프로그램을 포함하는 옵션 카드가 닫힐 때, 프론트 데스크톱 메시지 탐지기가 호출된다.

프론트 데스크 탐지기 설정

응용 프로그램이 프런트에 있을 때 메시지를 처리하려면 onMessage 파일에서Firebase의 firebase.js 메서드를 사용합니다.

import { getMessaging, getToken, onMessage } from 'firebase/messaging';
//......
const messaging = getMessaging();
//......
export const onMessageListener = () =>;
  new Promise((resolve) =>; {
    onMessage(messaging, (payload) =>; {
      console.log("payload", payload)
      resolve(payload);
    });
  });

그리고 Notification 구성 요소에서 이 방법을 호출할 수 있습니다.이 강좌에서, 나는 react-hot-toast 라이브러리를 사용하여 메시지 탐지기에서 받은 알림의 상세한 정보를 표시하기 위해 toast UI를 만들 것이다.

import React, {useState, useEffect} from 'react'
import toast, { Toaster } from 'react-hot-toast';
import { requestForToken, onMessageListener } from './firebase';

const Notification = () =>; {
  const [notification, setNotification] = useState({title: '', body: ''});
  const notify = () => toast(<ToastDisplay/>);
  function ToastDisplay() {
    return (
      <div>
        <p><b>{notification?.title}</b></p>
        <p>{notification?.body}</p>
      </div>
    );
  };

  useEffect(() => {
    if (notification?.title ){
     notify()
    }
  }, [notification])

  requestForToken();

  onMessageListener()
    .then((payload) => {
      setNotification({title: payload?.notification?.title, body: payload?.notification?.body});     
    })
    .catch((err) => console.log('failed: ', err));

  return (
     <Toaster/>
  )
}

export default Notification

백그라운드 탐지기 설정

백그라운드 메시지를 처리하려면 서비스 직원을 사용해야 합니다.서비스 담당자는 스크립트로 브라우저가 백엔드에서 실행되며 웹 페이지와 분리되어 웹 페이지나 사용자의 상호작용이 필요 없는 기능을 지원한다.firebase-messaging-sw.js 파일에 다음 코드 행을 계속 추가할 수 있습니다.

// Scripts for firebase and firebase messaging
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing the generated config
const firebaseConfig = {
  apiKey: `REPLACE_WITH_YOUR_FIREBASE_MESSAGING_API_KEY`,
  authDomain: `REPLACE_WITH_YOUR_FIREBASE_MESSAGING_AUTH_DOMAIN`,
  projectId: `REPLACE_WITH_YOUR_FIREBASE_MESSAGING_PROJECT_ID`,
  storageBucket: `REPLACE_WITH_YOUR_FIREBASE_MESSAGING_STORAGE_BUCKET`,
  messagingSenderId: `REPLACE_WITH_YOUR_FIREBASE_MESSAGING_SENDER_ID`,
  appId: `REPLACE_WITH_YOUR_FIREBASE_MESSAGING_APP_ID`,
  measurementId: `REPLACE_WITH_YOUR_FIREBASE_MESSAGING_MEASUREMENT_ID`,
};

firebase.initializeApp(firebaseConfig);

// Retrieve firebase messaging
const messaging = firebase.messaging();

messaging.onBackgroundMessage(function(payload) {
  console.log('Received background message ', payload);
 // Customize notification here
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
  };

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

테스트 알림

알림이 정상적으로 작동하는지 테스트하려면 다음 절차에 따라 Firebase 콘솔에서 테스트 알림을 트리거할 수 있습니다.

은 프로젝트 대시보드에서 클라우드 메시지 부분으로 스크롤합니다.

알림 탭에서 새 알림 버튼

을 클릭합니다.

알림 제목 및 알림 텍스트 정보 작성

장치 미리 보기 섹션에서 클릭하여 테스트 메시지 보내기

열린 팝업 창에서 FCM 등록 토큰으로 콘솔에 기록된 클라이언트 토큰을 입력하고 + 버튼을

FCM 토큰이 선택되어 있는지 확인하고 테스트 를 클릭합니다.전체 작성 알림 부분을 작성한 다음 페이지 밑에 있는 보기 단추를 누르면 여러 대상 프로그램에 보낼 수 있습니다.

브라우저 옵션 카드에서 프로그램을 열면 알림 팝업을 볼 수 있습니다.
응용 프로그램의 브라우저 탭이 포커스에 없는 경우 기본 시스템 알림 팝업 창이 표시됩니다.
참고: 백그라운드에서 알림을 받을 때 알림 배너를 보려면 시스템의 알림 설정에서 브라우저의 기능을 켜야 합니다.

무슨 일이야?

어떤 경우 사용자는 즉시 또는 아예 통지를 받을 수 없을 수도 있다.이것은 여러 가지 원인으로 인해 일어난 것일 수 있는데, 그 중 일부 원인은 here에 소개되어 있다.

저장소 코드

이 자습서의 GitHub repo는 https://github.com/AudreyHal/React-Firebase-Cloud-Messaging-Demo에서 찾을 수 있습니다.