🚌 ionic fcm - android 버전

🕹 FCM

하이브리드앱을 개발하는 사람이라면 누구나 다 fcm을 사용해야 한다고 생각한다. 하이브리드를 해도 플랫폼이 2개이니 android,ios ....

그리하여 이번에는 ionic capacitor에서 fcm을 사용하는 법을 알아보자. fcm은 android,ios 둘다 알림을 보내줄수있는 알림 플랫폼이라고 생각하면 될것같다.

 

 📞 FCM 세팅하기

처음에는 FireBase에가서 안드로이드 세팅이 필요하다. 아래 사진처럼 프로젝트 설정을 눌러주자

다음으로 안드로이드를 클릭해주자

그러면은 google-services.json을 얻을 수 있다.

 

 

 

다음으로는 google-services.json 을 ionic 프로젝트에 android < app 폴더쪽으로 이동시키자.

 

 

위처럼 하면 FCM관련된것은 세팅이 완료 되었다.

 

 

 📇  FCM module 설치

npm install @capacitor/push-notifications
ionic cap sync android

 

위 모듈 설치 후 android sync를 맞춰주자.

 

 

🍔 FCM API 활용하기

총 4가지의 함수를 이용해 볼 것이다. checkPermissions, requestPermissions, register , addListener

를 이용해볼 것이다.

 

checkPermissions    : 권한 체크

requestPermissions : 권한 요청

register: FCM 등록

addListener : 이벤트 감지(다양한 이벤트가 존재하여 https://capacitorjs.com/docs/apis/push-notifications 에서 이벤트 확인이 가능하다.)

 

나 같은 경우에는 코드를 아래처럼 만들었다. 권한 체크 후 없으면 => 권한 요청 => FCM 등록 => addListener("registration") 을 통해 token 얻기. 

 

import { defineComponent, onMounted } from "vue";
import { PushNotifications, Token } from "@capacitor/push-notifications";

export default defineComponent({
  name: "App",
  components: {
    IonApp,
    IonRouterOutlet,
  },
  setup() {
    onMounted(async () => {
      //권한 체크 하기
      const { receive } = await PushNotifications.checkPermissions();

      if (receive === "prompt") {
        const { receive: permisson } = await fcmRequestPermisson();
        if (permisson === "granted") {
          //권한 등록
          await PushNotifications.register();

          //토근 얻기
          getFcmToken();
        }
      } else {
        //토근 얻기
        getFcmToken();
      }
    });

    //권한 요청
    const fcmRequestPermisson = async () => {
      return await PushNotifications.requestPermissions();
    };

    //token get
    const getFcmToken = async () => {
      PushNotifications.addListener("registration", (token: Token) => {
        console.log("token.value : ", token.value);
      });

      PushNotifications.addListener("registrationError", (err) => {
        console.error("get token error : ", err);
      });
    };
  },
});

🌭 FCM 테스트

코드를 통해서 얻은 token은 아래처럼 테스트 해볼 수 있다.

FireBase에서 테스트 전송을 할 수 있으며 token을 등록한다.

위 사진처럼 알림을 받을 수 있다.