#[Firebase] FCM 푸시 메세지 - Notification



프로젝트 도중 Firebase FCM을 적용하다가

내가 올린 포스팅으로는 설명이 좀 부족하다는 죄책감이... ㅎ

이번 글에서는

기존 포스팅에 올린 것을 좀 더 상세히 설명할 것이다.


부디 잘 참고해서

적용하기 바람 ㅎㅎ


1. firebase-messaging-sw.js

firebase-messaging-sw.js는 service worker 파일이다.

크롬에서 F12 -> Application -> Service Workers에

firebase-messaging-sw.js이 있다면 정상작동하는 것이다.



FCM을 통해 푸시메세지를 보냈을 때

사용자가 브라우저를 꺼놓거나 다른 페이지 화면을 보고 있을 경우

이 service worker에 등록되어있는 파일이 작동하는 것이다.


2. Background

다음은 저번 포스팅때 올린 코드의 일부분이다.


1
2
3
4
5
6
7
8
9
10
11
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function(payload){
 
    const title = "Hello World";
    const options = {
            body: payload.data.status
    };
 
    return self.registration.showNotification(title,options);
});
 
cs


FCM으로 데이터가 들어오면 Notification을 보여주는 코드이다.

BackgroundMessageHandler라는 용어를 볼 때,

백그라운드 상태일 때 동작한다는 것을 알 수 있다.


3. foreground

그렇다면 백그라운드의 반대인 포그라운드 상태일 때는???

그 동작을 onMessage에서 관리한다.

다음은 포그라운드 상태일 때 메세지 동작 코드이다.


1
2
3
4
5
6
7
8
9
messaging.onMessage(function(payload){
        console.log('onMessage: ', payload);
        var title = "고라니 서비스";
        var options = {
                body: payload.notification.body
        };
        
        var notification = new Notification(title, options);
});
cs


이 코드를 원하는 html 페이지에 삽입한다면

해당 페이지로 직접 <div>를 설정하여 실시간으로 메세지를 보여주던가

alert창 또는 나처럼 Notification을 새로 생성해도 된다.

브라우저 마다 Notification 지원기능이 다르기 때문에 다음 표를 참고하기 바란다.



4. options

Notification에는 다양한 옵션을 지정해 줄 수 있다.

https://developer.mozilla.org/en-US/docs/Web/API/notification/Notification

이 링크에 들어가면 굉장히 많은 옵션을 Notification에 줄 수 있다는 것을 알 수 있다.

난 그중에서 icon 옵션을 써봤는데

코드는 option에 icon만 추가해주면 된다.


1
2
3
4
5
6
7
8
9
10
messaging.setBackgroundMessageHandler(function(payload){
 
    const title = "고라니 서비스";
    const options = {
            body: payload.notification.body,
            icon: payload.notification.icon
    };     
    
    return self.registration.showNotification(title,options);
});
cs


icon 주소를 잘 보냈다면

다음처럼 푸시메세지에 이미지가 들어갈 것이다.



동그랗게 고라니 그림이 들어간 것을 볼 수 있다.

참고로

나는 웹 앱을 만들어서 AWS를 이용해 서버를 올렸다.

그래서 스마트폰으로 푸시메세지를 테스트 할 수 있었다.

모바일 환경과 데스크톱 환경은 생각보다 다른 점이 많아서

정말 며칠동안 FCM 하나가지고 삽질을 했다 ㅠㅠ

단순히 기능이 된다고 끝이 아니라

기능 구현하는 코드를 이해해야

해당 기능을 자신의 프로젝트에 맞게 구현할 수 있다는 것을 명심해야 한다.



To be continued.........




Made by 꿩

'Database > Firebase' 카테고리의 다른 글

[Firebase] FCM 푸시 메세지  (1) 2018.12.09

#[Firebase] FCM 푸시 메세지



이 글을 읽고 있는 당신!!!

FCM을 이용해 푸시 메세지를 보낸 적이 있는가?

완전 짱 신기함!!!!

쉽고

빠르게

대량 푸시를 하여

누군가에게 차단당할 수 있다!!!

ㅎㅎㅎ

장난이고

이번 주는 Firebase FCM 기능을 이용한 푸시 메세지를 포스팅하려 한다.


생각보다 간단하고 무료이므로

관심없는 이들도

재미삼아 만들어 보는 것도 좋을 듯하다.


작동원리를 간단히 설명하자면

당신의 컴퓨터에서 Firebase Cloud에 메세지를 보낸다.

당연히 메세지를 보낼 때

당신이 누구인지?, 누구에게 보낼 건지?, 메세지 내용 등

을 포함해서 보낸다.

그러면 Firebase가 해당 컴퓨터나 스마트폰에 푸시 메세지를 날려준다.


1. Firebase 계정만들기

Firebase FCM을 이용하므로 당연히 계정을 만들어야한다.

(무료 요금제 - Spark 요금제)


계정을 만들었으면 프로젝트를 추가한다.

위치는 대한민국이 있으니 설정하고 긍정적으로 체크하고 프로젝트를 만든다.


2. 푸시 메세지를 보내기 위한 정보 찾기

왼쪽 위의 설정버튼에서 프로젝트 설정을 클릭한다.



클라우드 메세징 탭을 보면

당신의 서버 키가 보일 것이다!!

이걸 복사하여 메모장에 잠시 가져다 놓자


다시 홈 화면으로 돌아오면

여기서 맨 오른쪽 거 </>라고 생긴 것을 클릭하자

이 버튼이 웹 앱에 Firebase를 추가하는 버튼이다.


그럼 다음과 같은 창이 뜰 것이다.

이것도 복사를 해 메모장에 일단 보관해놓자!


3. html 파일 만들기

html 파일을 만드는 이유는 토큰 값을 얻기 위해서다.

토큰 값은 쉽게 말해 바로 누구에게 보낼 지 알려주는 값이다.

나도 자세히는 모르지만

약간 주소 같은 느낌이 들었다.

주소를 알아야 택배 아저씨가 택배를 가져다 주니까...ㅎ


근데 스마트폰의 토큰 값은 바뀌지 않고

데스크 톱 토큰 값은 한번 껏다키니까 바뀌어 있었다.

이 부분에 대해서는 더 공부해야 할 듯 싶다(과연? ㅎ)


오늘 포스팅은 intellij로~

Web Application으로 프로젝트를 만든다.

아 !! 톰캣 꼭 설치되어 있어야 한다.


프로젝트를 만들고나면

아무 html 파일과 firebase-messaging-sw.js를 만들자!

(주의!) firebase-messaging-sw.js 이거 글자 틀리면 안된다!!


자바스크립트 파일(firebase-messaging-sw.js)은 다음과 같이 작성한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');
 
// Initialize Firebase
var config = {
  apiKey: "enter api key",
    authDomain: "test-4e9a6.firebaseapp.com",
    databaseURL: "https://test-4e9a6.firebaseio.com",
    projectId: "test-4e9a6",
    storageBucket: "test-4e9a6.appspot.com",
    messagingSenderId: "90275796882"
};
firebase.initializeApp(config);
 
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function(payload){
 
    const title = "Hello World";
    const options = {
            body: payload.data.status
    };
 
    return self.registration.showNotification(title,options);
});
cs


html 파일도 다음과 같이 작성한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
 
<h1 id="order"></h1>
 
<h1> 파이어 메세지</h1>
<script src="https://www.gstatic.com/firebasejs/5.5.9/firebase.js"></script>
<script>
    // Initialize Firebase
    var config = {
        apiKey: "API KEY를 넣어주세요~~~~~~~~~~~~~~~~~~~~~~~~",
        authDomain: "test-4e9a6.firebaseapp.com",
        databaseURL: "https://test-4e9a6.firebaseio.com",
        projectId: "test-4e9a6",
        storageBucket: "test-4e9a6.appspot.com",
        messagingSenderId: "90275796882"
    };
    firebase.initializeApp(config);
 
    const messaging = firebase.messaging();
 
    //token값 알아내기
    messaging.requestPermission()
        .then(function(){
            console.log("Have permission");
            return messaging.getToken();
        })
        .then(function(token){
            console.log(token);
        })
        .catch(function(arr){
            console.log("Error Occured");
        });
 
 
</script>
 
</body>
</html>
cs

apikey에 자신의 api key를 넣고

톰캣을 실행한다.

html 파일에 들어가면


다음과 같이 토큰값이 정상적으로 나오는 것을 확인할 수 있다.

이 토큰 값을 메모장에 옮겨놓는다.


4. 푸시 메세지 보내기

빨리 자고싶어서.....

메세지 보내는 html 파일 만들지는 않고

간단히 Restlet으로 해보려고 한다ㅎㅎ


Authorization에 서버 키를 넣고

"to" : 에는 토큰 값을 넣는다.


send 버튼을 누르면

겁나 빨리

푸시 메세지가 뜨는 것을 볼 수 있다.


친구에게 푸시 메세지를 보내고 싶다면

자신의 서버를 열어놔야 한다.


서버를 열어 해킹당할까봐 무섭다면

Firebase의 Hosting 서비스를 사용할 수 있다.


아까 만든 html과 js 파일을 hosting해놓고

친구가 호스팅 주소에 들어가 토큰 값을 알려준다면

당신은 그 친구에게 무한 푸시를 할 수 있다.


물론 차단하면 모든 노력은 물거품이 되지만... ㅎㅎ


안드로이드까지는 무리없이 웹으로 쉽게 푸시가 가능하다.

그러나 ios는 인증 과정을 거쳐야 해서 까다롭다.

역시 나는 안드로이드가 좋다.


언젠간...

Firebase FCM 푸시 메세지를 호스팅하는 글을 올려야 할 듯 싶다ㅎㅎ




To be continued.........




Made by 꿩












'Database > Firebase' 카테고리의 다른 글

[Firebase] FCM 푸시 메세지 - Notification  (2) 2019.01.06

+ Recent posts

티스토리툴바