Vue PWA - Firebase Cloude Messaging 설정(web push)

목적

• Vue.js를 사용하면서 web push를 사용하고 싶다.
• Firebase를 사용해서 web push 시스템을 만들고 싶다.
• 다음 사이드 프로젝트에서 사용할 것이다.
• 모바일팀에서 firebase를 이용해 푸시 시스템을 쓰고 있는데, '언젠가... 웹에도 적용할 수도 있을 것 같다'라는 말을 듣고... 연습 삼아...

 

Firebase setting

필요 모듈 (npm install -g)

• firebase-tools

window 경우에는 cmd를 권한 있는 창으로 키셔야 합니다.

 

프로젝트 root에 firebase를 초기화해줍니다.

자세한 설치는 여기서 설명

 

Firebase console

프로젝트 설정에서 firebase cloude messaging 설정을 찾을 수 있습니다.

firebase cloude messaging

여기서 중요한 것은 서버 키를 잘 기억해야 하는데, 나중에 푸시 보낼 때 헤더에 넣어야 하기 때문입니다.

그리고 아래에 키 쌍 생성 버튼을 눌러줍니다.

 

위와 같은 키 쌍이 생기는데, 이 키는 추후 프론트 코드에 들어가야 합니다.

키 쌍: 추후 들어갈 firebase cloude messaging ID 키 값

 

"테스트용으로 만든 프로젝트라 키값을 공개하는 것입니다"

 

Vue 프로젝트

필요 모듈

• firebase
• @firebase/messaging

디렉터리 구조 

firebase cloude message를 사용하려면  firebase service worker 가 필요합니다.

vue pwa 세팅을 하면, 기본적으로 registerServiceWorker가 src/ 에 있습니다.

하지만 firebase-messaging-sw.js 파일은 직접 만들어서 public 폴더 아래에 넣어주시면 됩니다.

 

firebase-messaging-sw.js

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

const config = {
    apiKey: '--------------',
    authDomain: '---------',
    databaseURL: '-------------',
    projectId: '------------',
    storageBucket: '----------',
    messagingSenderId: '------------',
    appId: '------------',
    measurementId: '------------',
};

firebase.initializeApp(config);
const messaging = firebase.messaging();

// 백그라운드 상태에서 받은 알림 처리
messaging.setBackgroundMessageHandler((payload) => {
  console.log('Message received. ', payload);
  // Customize notification here
  const title = 'Background Message Title'
  const options = {
    body: payload.data.message,
    icon: '/firebase-logo.png'
  }

  return self.registration.showNotification(title, options);
});

public에 들어가는 jsavascript라서 firebase 세팅을 별도로 해줘야 합니다.

 

 

services/messaging/messaging.ts

import { ref } from '@vue/composition-api';
import firebase from 'firebase/app';
import '@firebase/messaging';
import config from '../../../firebaseConfig';

firebase.initializeApp(config);

const token = ref<string>('');
const messaging = firebase.messaging();
messaging.usePublicVapidKey(/* 키 쌍 쪽에서 만든 firebase cloude messaging ID 키 값 */);

messaging.getToken().then((currentToken) => {
    if (currentToken) {
        console.log(currentToken);
        token.value = currentToken;
    } else {
        // Show permission request.
        console.log('No Instance ID token available. Request permission to generate one.');
    }
});
messaging.onMessage((payload) => {
    console.log(payload);
    const title = 'Title';
    const options = {
        body: payload.data.message,
        icon: '/firebase-logo.png',
    };
    const notification = new Notification(title, options);
    return notification;
});

export {
    token,
    messaging,
};

위에서 만든 키 값을 넣어줍니다.

 

App.vue

<template>
    <div class="home">
        토큰: {{ token }}
    </div>
</template>

<script>
import { token } from '@/services/messaging/messaging';

export default {
    name: 'Home',
    setup() {
        return {
            token,
        };
    },
};
</script>

 

토큰 값이 잘 나오는 것을 확인할 수 있습니다.

 

 

이 토큰으로 해당 브라우저에 푸시를 날릴 수 있습니다.

key='위에서 설명한 서버 키'입니다.

POST // https://fcm.googleapis.com/fcm/send

{ "to": "여기에는 방금 받은 토큰 값", "data": {"message": "Hello"}}

 

모바일에서도 해당 토큰으로 쏘면 푸시가 가는 것을 볼 수 있습니다.

 

지도는 테스트 하다가...

 

 

어려웠던 점

firebase에서 firebase-messaging-sw.js를 서비스 워커에 등록하라는데...

이미 vue-pwa에서 만들어진 서비스 워커가 있는데 겹쳐도 상관없는지를 모르겠고...

모바일에서는 캐시가 엄청 귀찮게 안 지워지고... ㅠ

정보가 생각보다 많이 없어서 리서치가 힘들었습니다.

 

참고

파이어베이스 공식 문서

Vue.js 프로젝트에 FCM 사용하기

 

질문받습니다!