HOME
회사소개
포트폴리오
커뮤니티
고객평가
갤러리
무료봉사
온라인마케팅
최근 신기술
제작/컨설팅
솔루션

파이어베이스 웹푸시 > 자료실

본문 바로가기

홈페이지

어플

프로그램

오늘 방문자

제작상담

■ 어떠한 것이든 설명이 가능하시면 제작이 가능합니다.
■ 저희는 거의 임진왜란 직후부터 개발해온 회사입니다.
■ 저희가 개발한 플랫폼 = 평생 무료 하자보수.
■ 요청고객께 6개월마다 홍보용 홈페이지를 무료제작
AI 인공지능,AR,VR 개발 가능합니다.
유지보수를 원하시는 모든형태로 가능합니다.
■ 고객의 아이디어가 저희 포트폴리오에 있을 확률 80%

고객평가

  • 니즈가 명확하지 않아 ...
  • 기획 단계부터 먼저 여...
  • 저희 앱이 일본어 사전...
  • 과격한 표현으로 말하자...
  • 앱 쪽에 정보가 많이 ...
  • 디몬스터를 처음 만났을...
  • 처음했던 외주 개발인데...

궁금해요

  • AI 전반정리

    AI 전반정리

  • 단말기, 이용료, 유지비 없는 POS…

    단말기, 이용료, 유지비 없는 POS…

  • POS 연동에 대한 오해와 진실

    POS 연동에 대한 오해와 진실

고객리뷰

  • (주)**경매  정**대표님

    (주)**경매 정**대표님

  • (주)타이어핏 홍** 대표님

    (주)타이어핏 홍** 대표님

  • (주)아토비엔 임** 대표님

    (주)아토비엔 임** 대표님

숏츠/릴스

  • 상품 태그가 가능한 커뮤니티 쇼핑몰 …

    상품 태그가 가능한 커뮤니티 쇼핑몰 …

  • 인공지능 의료 서비스 제작을 위한 머…

    인공지능 의료 서비스 제작을 위한 머…

자료실

웹 | 파이어베이스 웹푸시

페이지 정보

작성자 김영준 조회77,483회 댓글0건

본문

1. 첫 방문시 알림 허용/차단 여부를 판단
  • 제일 먼저 웹 사용자 인증 정보를 구성해야한다.
    • Firebase Console - Setting - Cloud messaging - 웹 구성
    • 웹 푸시 인증서 탭에서 키 쌍 생성을 클릭한다.
    • 여기서 가져온 키를 잘 저장해 둔다.
  • 이제 FCM을 사용하기위해 Firebase 기본 설정을 해준다
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import '@firebase/messaging';

const config = {
  projectId: "team-5dd61",
  apiKey: "Your api key",
  messagingSenderId: "Your sender ID",
};

firebase.initializeApp(config);
const messaging = firebase.messaging()
messaging.usePublicVapidKey("Your Web push key");
Notification.requestPermission().then(function(permission) {
  if (permission === 'granted') {
    console.log('Notification permission granted.');
  } else {
    console.log('Unable to get permission to notify.');
  }
});
  • Notification.requestpermission() : 푸시 알람에 대한 동의 대화상자를 표시해준다

    • 여기서 거부를 누르면 다음에 이어질 토큰을 가져올 수 없다
  • 토큰값을 가져오기 전에 메시징 서비스에 필요한 firebase-messaging-sw.js 파일을 만들어야 한다.

    • Firebase 공식문서에는 이 파일을 도메인의 루트에 저장해야 한다고 나와있다.
    • 최상위 루트가아닌 도메인 루트 에 저장해야한다
    • 제대로 경로를 잡지 않은 경우 에러가 발생한다
     
    1
    
    DOM Error The script has an unsupported MIME type ('text/html')
    
    • 내 경우 public 에 넣으니까 해결이 되었다.
  • 알람을 허용을 했으니까 이제 토큰값을 가져와 보자

 
1
2
3
messaging.getToken().then(token =>{
    console.log(token)
})

 

2. 알람을 허용한 유저에게 글(포스트, 포트폴리오) 등록시 푸시 알람 보내기
  • 위에서 가져온 토큰 값을 가지고 푸시 알람 요청을 보내보자
  • 일단 POSTMAN으로 테스트를 해보자

postman_test

  • 그림와 같이 POST 요청을 보내주는데 header에 API KEY와 body에 notifiction에대한 정보, to에 토큰값을 넣어서 요청을 보내면 알람이 뜬다 !!
  • 이제 테스트한걸 코드로 구현한다.
 
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
newPostPush(url,token){
    const message = {
      notification :{
          "body" : "새 포스트가 등록되었습니다.",
          "title": "진격의巨鳥",
          "icon": "favicon.ico",
          "click_action": "http://localhost:8080/",
       },
      to : token
    }
    fetch(url ,{
      method: 'POST',
      body: JSON.stringify(message),
      headers: new Headers({
        'Content-type': 'application/json',
        'Authorization' : 'Your API Key'
      })
    }).then(response => {
      if (response.status < 200 || response.status >= 400) {
        throw 'Error subscribing to topic: '+response.status + ' - ' + response.text();
      }
    }).catch(e =>{
      console.log(e)
    })
  },
  • 평소에 axios요청을 주로 사용했지만 이번엔 ajax 요청을 사용해보았다.
  • 요청은 잘 된다.
  • 근데 생각을 해보니 토큰값으로 알람을 보내면 새 글이나 새 포스트가 등록 되었을 때 해당 토큰값을 가진 유저에게만 알람이 가게된다.
  • 토큰값을 하나하나 저장해서 한꺼번에 요청을 해볼까도 했지만 간단한 방법을 사용기로 했다.
  • 토큰이 아닌 주제(Topic)를 사용해 보자
  • 주제로 메세지를 보내려면 주제를 등록해야한다.
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
subscribeTokenToTopic(token, topic) {
 fetch('https://iid.googleapis.com/iid/v1/'+token+'/rel/topics/'+topic, {
      method: 'POST',
      headers: new Headers({
        'Authorization': 'Your API key'
      })
    }).then(response => {
      if (response.status < 200 || response.status >= 400) {
        throw 'Error subscribing to topic: '+response.status + ' - ' + response.text();
      }
    }).catch(error => {
      console.error(error);
    })
  },
  • 원하는 주제를 토큰값과 함께 정의한 subscribeTokenToTopic 함수에 넣어 요청하면 해당 토큰에 주제를 추가해준다

    • POSTMAN으로 확인

    postman_test2

    • post와 portfolio 두개가 주제로 구독이 된 걸 확인 !
  • 이제 주제를 구독한 사람에게 메세지를 보내기 위해 함수를 수정해주자

 
1
2
3
newPostPush(url){
      to : "/topics/post"
    }
  • to 를 위 그림과 같이 수정하면 post 주제를 구독한 모든 유저에게 알람이 간다

  • 이제 메세지를 보냈으니 보낸 메세지를 가져와 알람이 나오게 해야한다
  • 메세지의 동작은 페이지가 포커스를 갖는 포그라운드 상태인지, 백그라운드 상태인지, 다른 탭 뒤에 숨겨저 있는지, 완전히 닫혀있는지에 따라 다르기 때문에 경우에 따른 처리가 필요하다.
  • 내 경우 포그라운드 상태에서의 onMessage 콜백을 처리해줬다.
 
1
2
3
4
5
6
7
8
9
messaging.onMessage(function(payload){
  console.log('onMessage: ', payload);
  var title = payload.notification.title;
  var options = {
    body: payload.notification.body,
    icon: payload.notification.icon
  };
  var notification = new Notification(title,options);
});
  • Notification을 통해 payload된 데이터를 가져와 알람을 띄워준다
    • Notification 대신 alert나 div를 만들어서 띄울수도 있다.

 

+++ 

파이어 베이스 버전은 7.8.0로 해줘야하고

firebase-messaging-sw.js 파일을 루트파일로 생성해줘야한다.

 

 

 

이런식으로 셋팅해줘야함 

importScripts('https://www.gstatic.com/firebasejs/7.8.0/firebase-app.js');

importScripts('https://www.gstatic.com/firebasejs/7.8.0/firebase-messaging.js');

firebase.initializeApp({

 

....

/// 셋팅 정보들

...

})

const messaging = firebase.messaging()

messaging.setBackgroundMessageHandler(function (payload) {

  return self.registration.showNotification(payload)

})

 

 

 


| 디몬스터 | TEL : 070-7621-0572 / 070-5022-0572 | HP : 010-7574-0572 | E-mail : jackee@naver.com
| 서울 구로구 구로동 222 7번지 코오롱디지털타워빌란트 15층 1509,10호 | 부천시 길주로 272 2001호(중동 코스모폴리탄) | 부산시 금정구 금정로 225 4층,5층 | 몽골사무실- Ulaannaatar.mongola bayangol district 3-khoroo agro center 9-02
당사의 어플방식은 저작권 및 특허출원중입니다. 복제,모방,변용 및 유사 상행위 적발시,경고,통보없이 민형사상 책임을 진행합니다
Copyright © www.dmonster.co.kr All rights reserved.Since 2008 (주)세미콜론즈 · 사업자번호: 801-88-00338