728x90
Expo FCM 푸시알림 구현하기!
1. 라이브러리 설치
npm i expo-notifications
npm i @react-native-firebase/messaging
2. FCM 토큰 받기
/**
* FCM 토큰을 받습니다.
*/
const getFcmToken = async () => {
const fcmToken = await messaging().getToken();
console.log('[+] FCM Token :: ', fcmToken);
};
/**
* FCM 메시지를 앱이 foreground 상태일 경우 메시지를 수신합니다.
*/
const subscribe = messaging().onMessage(async remoteMessage => {
console.log('[+] Remote Message ', JSON.stringify(remoteMessage));
});
토큰은 expo-notification을 통해 받을 수도 있다. expo는 expo용 토큰과 fcm토큰 둘다 받을 수 있음.
728x90
3. 테스트 해보기
firebase 사이트 접속 후 프로젝트 생성
계정 선택 후 프로젝트 만들기!
cloud messaging 클릭
앱 추가(난 웹 선택함)
프로젝트에 라이브러리 추가설치
npm install firebase
그 후 SDK값 초기화작업
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "ㅁㄴㅇㄴㅁㅇ",
authDomain: "ㅁㄴㅇㅁㅇㄴㅁㅇ",
projectId: "ㅁㄴㅇㄴㅁㅇ",
storageBucket: "ㅁㄴㅇㄴㅁㅇ",
messagingSenderId: "ㅇㅁㄴㅇㄴㅁ",
appId: "ㅁㄴㅇㅁㄴㅇㄴㅁㅇ",
measurementId: "G-JLMJLPPL47"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
추가하면 캠페인 만들기가 뜬다.
제목, 텍스트 입력 후 테스트 메시지 전송 클릭
기기 FCM 토큰 입력해주면
뜬다~
- 참고
728x90
'개발 > Javascript & Typescript' 카테고리의 다른 글
[Next] Next.js로 5분 만에 웹 앱 폭주! 이걸 몰랐다면 개발자로서 이미 뒤처진 거다! (51) | 2025.01.14 |
---|---|
[RN] Expo FCM 푸시알림 구현하기 (2) (198) | 2024.06.04 |
[RN] WebView와 Web 통신하기 (184) | 2024.05.17 |
[React] Vite로 React 프로젝트 만들기 (173) | 2024.05.13 |
[RN] expo eas 관련 명령어 정리 (203) | 2024.05.09 |