Firebase Web 채팅앱 만들기 - Cloud Messaging과 Functions을 이용한 푸시메세지 기능 - FCM Token 정보

휴고

추천 수 198

요즘 웹브라우저에서는 안드로이드 또는 IOS에서 볼 수 있는 푸시 기능을 지원하는 브라우저가 있습니다. 요즘 Youtube나 Facebook을 이용하시고, Chrome 또는 Firefox 브라우저를 사용하신다면 아래와 같은 푸시를 받아보셨을 것입니다.

이는 서비스 워커라는 브라우저에서 백그라운드로 실행되는 자바스크립트 기반의 워커를 통해서 메세지를 수신하고 노티피케이션을 구동하게 됩니다. 일반적인 웹 워커는 웹앱 내에서 자바스크립트로 멀티쓰레드 처리를 위해 사용됩니다. 서비스워커도 비슷하지만 차이점이 있습니다. 웹워커는 웹앱이 실행되는 동안만 유지되고 실행되지만 서비스워커의 경우 웹앱을 벗어나더라도 브라우저가 실행이 되어 있으면 지속적으로 이벤트를 받고 처리를 수행합니다.

이러한 서비스워커를 지원하는 브라우저는 현재 Chrome, Firefox, Opera 정도만이 지원하고 있습니다. 마이크로소프트 Edge브라우저와 애플의 Safari브라우저는 개발 중에 있다고 합니다.

그리고 Android나 IOS 등의 모바일 푸시는 모바일의 전원이 켜져있고 인터넷이 연결되어 있다면 언제든지 푸시를 받을 수 있지만 웹 푸시의 경우 브라우저가 구동되어야지만 받을 수 있는 단점이 있습니다.

이러한 제약사항이 있지만 푸시 기능은 사용자가 접속하도록 유도하는데 좋은 도구가 됩니다. 그래서 이번 예제에서는 접속한 유저에게 자꾸 푸시를 보내는 것은 썩 좋은 방법은 아닌듯해서 접속하지 않은 유저에게만 푸시를 보내도록 구현을 해보겠습니다. 그리고 푸시를 구현하면서 클라이언트 코드에서 바로 푸시를 보낼수도 있으나, 이는 푸시기능 구현에 이용하는 Firebase Cloud Messaging(이하 FCM)의 서버키를 노출시켜야 하므로 보안에 위험합니다. 그렇기 때문에 푸시 메세지를 보내는 동작은 클라이언트 코드가 아닌 서버코드를 사용하겠습니다. 서버는 Firebase Functions 를 이용하게 됩니다.

(1)알림(Notification) 권한 획득 및 FCM Token 정보 저장

FCM Token을 획득 해보겠습니다. FCM Token은 접속하게 되는 환경(브라우저, 모바일기기)에 따라 푸시를 받게될 장치의 개별적인 ID 값입니다.

웹페이지가 구동되면 FCM Token을 획득하고, 로그인 후에 Realtime Database에 저장하겠습니다.

모바일(Android, IOS)에서는 FCM ID를 획득하는데 있어서 권한을 요구하지 않지만, Web에서는 먼저 권한을 요구 합니다. 아래는 웹페이지가 구동이 되면서 사용자에게 권한을 요청하고, 권한 요청을 수락하게 되면 FCM Token정보를 받게 되는 코드입니다.

<script>
          /**
           * 초기 필드 변수 할당
           */
          FirebaseChat.prototype.init = function(){
              //...생략
              this.setCloudMessaging();
          }
          /**
           * Cloud Messaging 알림 권한 
           */
          FirebaseChat.prototype.setCloudMessaging = function () {
              //메세징
              var messaging = firebase.messaging();
              messaging.requestPermission()
                  .then(function(){
                      console.log('메세징 권한 획득');
                      return messaging.getToken();
                  })
                  .then(function(token){
                      console.log('fcm token : ', token);
                  })
                  .catch(function(e){
                      console.log('메세징 권한 획득 중 에러', e);
                  });
          }

view raw index.html hosted with ❤ by GitHub

브라우저를 띄워 접속해보면 아래의 그림과 같은 권한 요청이 뜹니다. 허용을 누르게 되면 then메소드가 실행되며, FCM Token발급되는 것을 확인할 수 있고, 차단을 누르게되면 catch메소드가 실행되며 콘솔에 에러로그가 찍히는 것을 확인할 수 있습니다.

이제 로그인 후 Realtime Database에 저장하겠습니다. 저장되는 위치는 'FcmId/유저UID' 아래에 Token정보가 저장됩니다.

<script>
         /**
           *  로그인 후 세팅
           */
          FirebaseChat.prototype.setLogin = function(user){  //user 파라미터 추
                  //...생략
                  this.saveFCMToken();
          }
          /**
           *  FCM Token 저장
           */
          FirebaseChat.prototype.saveFCMToken = function(){
              //로그인 후에 fcm 정보를 검색하여 저장
              var cbGetToekn = function(token){
                  console.log('setLogin fcmId get : ', token);
                  var userUid = this.auth.currentUser.uid;
                  var fcmIdRef= this.database.ref('FcmId/' +userUid);
                  fcmIdRef.set(token);
              }
              firebase.messaging().getToken()
                  .then(cbGetToekn.bind(this))
                  .catch(function(e){
                      console.log('fcmId 확인 중 에러 : ', e);
                  })
          }

view raw index.html hosted with ❤ by GitHub

유저별 FCM Token정보를 Realtime Database에 저장하였습니다.

챕터 완성 소스 :

12. Cloud Messaging과 Functions을 이용한 푸시메세지 기능 - F

출처: http://cionman.tistory.com/64 [Suwoni-Codelab]

< Prev Firebase Web 채팅앱 만들기 - Cloud Messaging과 Functions을 이용한 푸시메세지 기능 - Functions를

Firebase Web 채팅앱 만들기 - Storage를 이용한 파일 전송기능 Next >

♥

	<script>
	/**
	* 초기 필드 변수 할당
	*/
	FirebaseChat.prototype.init = function(){
	//...생략
	this.setCloudMessaging();
	}

	/**
	* Cloud Messaging 알림 권한
	*/
	FirebaseChat.prototype.setCloudMessaging = function () {
	//메세징
	var messaging = firebase.messaging();
	messaging.requestPermission()
	.then(function(){
	console.log('메세징 권한 획득');
	return messaging.getToken();
	})
	.then(function(token){
	console.log('fcm token : ', token);
	})
	.catch(function(e){
	console.log('메세징 권한 획득 중 에러', e);
	});
	}

	<script>
	/**
	* 로그인 후 세팅
	*/
	FirebaseChat.prototype.setLogin = function(user){ //user 파라미터 추
	//...생략
	this.saveFCMToken();
	}

	/**
	* FCM Token 저장
	*/
	FirebaseChat.prototype.saveFCMToken = function(){
	//로그인 후에 fcm 정보를 검색하여 저장
	var cbGetToekn = function(token){
	console.log('setLogin fcmId get : ', token);
	var userUid = this.auth.currentUser.uid;
	var fcmIdRef= this.database.ref('FcmId/' +userUid);
	fcmIdRef.set(token);
	}

	firebase.messaging().getToken()
	.then(cbGetToekn.bind(this))
	.catch(function(e){
	console.log('fcmId 확인 중 에러 : ', e);
	})
	}