[TIL] 22.01.15 파이어베이스 FCM 알림 허용시 푸쉬알림 테스트 적용

 

기능 설명

사용자가 알림 팝업창에 팝업 허용 시  파이어 베이스 메시지 알림 요청 보내서 푸시 알림 확인하기 

 

---

푸시 알림을 구현하기 전에 먼저 GCM , FCM에 관련해서 알아봤다 

GCM (Google Cloud Messaging )

• 구글에서 제공하는 Server와 Client app 간에 푸시 메시지를 보낼 수 있는 서비스
• Android & iOS를 지원

FCM (Firebase Cloud Messaing)

• GCM의 새 버전이며  Android & iOS & Mobile Web 등의 다양한 플랫폼을 모두 커버할 수 있다고 한다.

앞으로 구글에서는 새로운 기능들을 모두 FCM 쪽에만 추가하고, GCM 에는 추가하지 않을 것이라고 한다.

따라서, GCM 은 결국 FCM의 일부이며 GCM으로 기 구현된 서비스들도 FCM으로 동일하게 구현이 가능하다고 한다.

---

프로젝트의 기획은 사용자가 백그라운드 일 때에도 푸시 알림을 보내주어야 하기 때문에 파이어 베이스의 클라우드 메시지를 사용했다  

 

 

1. 알림 권한 요청 

 사용자에게 알림 권한에 대해 Notification.permission 요청을 하게 되는데 권한을 허용한 유저에게만 메시지 토큰을 받을 수 있다 

기획에서 알림 권한 팝업이 별도로 기획되어있었고 추가로 Notification.permission 요청을 보내면 2번이나 유저가 알림은 받을 것인가를 확인해야 했기 때문에 우리는 해당 토글을 허용자에게 토큰은 내려주는 형태로 진행했다 

2. 푸시 요청 

프런트 쪽에서 직접 파이어 베이스로 send요청을 보내서 메시지의 토큰 값을 넘겨주었다 

여러 블로그를 찾아보고 서버 쪽에서 연결했지만 파이어 베이스 요청 오류 에러 메시지가 생겨서 프런트에서 조금 더 확실하게 확인하고 다시 서버와 통신해보자 라는 생각에 공식문서를 많이 찾아봤으며

토큰과 서버 키를 가지고 있으면 푸시 테스트를 해볼 수 있는 링크를 확인했다 

해당 링크로 토큰을 넣어보니 세상에!!! 

브라우저에 알림이 들어오는 걸 확인할 수 있었고  토큰에는 문제가 없었다 

// firebase
import firebase from "firebase/compat/app"; //firebase모듈을 import해줘야 합니다.
import { getMessaging, getToken } from "firebase/messaging";

const config = {
 //...
};
firebase.initializeApp(config);

const messaging = getMessaging();



getToken(messaging, {vapidKey:"" })
        .then((currentToken) => {
            if (currentToken) {
              history.test = currentToken;
              axios
                .post(
                  "https://fcm.googleapis.com/fcm/send",
                  {
                    notification: {
                      body: "새로운글",
                      title: "새로운 타이틀",
                    },
                    to: currentToken,
                  },
                  {
                    headers: {
                      "Content-type": "application/json",
                      Authorization:"",
                    },
                  }
                )
                .then((res) => {
                  console.log(res.data, res.config.data);
                });
            } else {
              console.log(
                "No registration token available. Request permission to generate one."
              );
            }
          })
          .catch((err) => {
            console.log("An error occurred while retrieving token. ", err);
          });

 

3. 포그라운드 상태와 백그라운드 상태일 때 메시지 처리하기 

서버에서 메시지를 보냈다는 가정하에 우리는 해당 푸시 이벤트를 어떻게 처리할 수 있을지 고민했고 

이벤트 리스너를 통해 사용자에게 메시지를 띄워주는 코드를 구현했다 

self.addEventListener("message", (event) => {
  if (event.data && event.data.type === "SKIP_WAITING") {
    self.skipWaiting();
  }
});

self.addEventListener("push", function (event) {
  const options = {
    body: event.data.text(),
  };

  event.waitUntil(self.registration.showNotification(title, options));
});

self.addEventListener("notificationclick", function (event) {
  event.notification.close();

//클릭시 해당링크로 이동 
  event.waitUntil(
    self.clients.openWindow("https://zzzapp.co.kr") 
  );
});

 

데스크톱 , 모바일 모두 푸시 알림이 정상적으로 왔고 백그라운드 상태일 때에도 알림이  오는 걸 확인했다 

 

 

 

FCM에서 제공하는 메시지 함수들도 있었지만 9 버전으로 업데이트되면서 

 

해당 모듈을 호출했을 때 

Uncaught TypeError: Failed to resolve module specifier "firebase/app". Relative references must start with either "/", "./", or "../"

참조를 하지 못한다는 에러 메시지를 보고 경로에 해당 패스들을 추가해주니 이젠 다른 에러가 나오기 시작했다 

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

모듈 스크립트를 로드하지 못했다... "text/html"의 MIME 유형으로 응답했다고 한다 

찾아보니  컴파일되지 않았기 때문에 그 오류가 발생했으므로 index.html에  type을 모듈로 바꾸면 된다는 의견이 많아서 

시도해봐도 적용되지 않았다

아직 이문제에 대해서는 해결하지 못했으며 가장 아쉬움이 남는다 뒤늦게 찾아보다가 파이어 베이스에서 메세징 관련 깃허브 자료 링크를 알게 되었는데 내일 다시 도전해보려고 한다 💪🏻💪🏻💪🏻https://github.com/firebase/quickstart-js/blob/master/messaging/firebase-messaging-sw.js

 

---

 

아직 서버 연결도 하지 못했고 이제 절반 왔지만 붙잡고 있었던 기능이어서 그런지  다른 날보다 더 뿌듯하고 기분이 좋았다 

내일은 구독 관련 정보와 FCM Node.js 관련 구독 정보를 함께 확인해서 적용해보고 백엔드 분들과 이야기하는 시간을 가져보자는 계획으로 오늘 하루를 마무리했다 

 

 

 

 

 

 

참고 링크 

https://joshua1988.github.io/web-development/fcm-gcm-difference/