Firebase-React 연동

웹을 Firebase와 연동하기 위해서는 프로젝트 설정에서 내 앱에 WEB을 추가해야 한다.

 

추가를 성공했다면 위 이미지 처럼 웹 앱의 항목이 추가된 것을 볼 수 있다.

 

react에 npm install firebase를 입력하여 추가해 준다.

 

이제 react 소스에서 index.html이 있는 폴더 안에 firebase-messaging-sw.js 파일을 생성해준다.

 

파일 이름은 무조건 위의 이름으로 해야만 인식을 한다.

 

해당 파일에 아래 코드를 작성한다.

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 = {
  //추가한 웹 앱의 SDK 설정에 있는 firebaseConfig의 값을 넣으면 된다.
};
firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

 

이제 Firebase의 토큰을 생성하는 코드를 작성한다.

export const requestForToken = async () => {

    return await getToken(messaging, {vapidKey: //설정 - 클라우드 메시지 - 웹 푸시 인증서의 키값을 넣는다.})
        .then((currentToken : string) => {
            if (currentToken) {
                console.log('token : ' + currentToken)
            } else {
                console.log('No registration token available. Request permission to generate one.');
            }
        }).catch((err) => {
            console.log('An error occurred while retrieving token. ', err);
        });
}

 

개발자 툴에 

위와 같이 토큰 값이 생기면 사실상 Firebase 연동은 완료이다.

 

푸시 메시지를 보내고 싶다면

 

해당 부분에서 테스트 메시지를 전송 할 수 있다.