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

2020.01.02

Vue.js 프로젝트에 FCM(Firebase Cloud Messaging)을 적용하는 방법을 정리합니다.

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

Vue.js 외에 다른 프레임워크를 사용해도 프로젝트 생성과 코드 작성, 빌드 방법 등을 제외하면 과정은 크게 다르지 않을 것 같습니다.

프로젝트 등록

먼저, Firebase에 프로젝트를 생성해야 합니다.

콘솔에서 프로젝트를 등록합니다.

프로젝트 설정 → 일반의 ‘내 앱’ 항목에 앱을 추가합니다(플랫폼은 웹).

project_setting

추가된 후 Firebase SDK Snippet의 ‘구성’을 선택하면 다음과 같이 설정에 사용할 스니펫을 볼 수 있습니다.

const firebaseConfig = {
  apiKey: "AIzaSyCteH_YyLh1nq4KjCCeC00evSvo3nfl7jQ",
  authDomain: "vue-fcm-6ff39.firebaseapp.com",
  databaseURL: "https://vue-fcm-6ff39.firebaseio.com",
  projectId: "vue-fcm-6ff39",
  storageBucket: "vue-fcm-6ff39.appspot.com",
  messagingSenderId: "902231810000",
  appId: "1:902231810000:web:4c8725619f7c3e55f7a3d5"
}

‘클라우드 메시징’ 탭의 ‘웹 구성’ 항목에서 ‘키 쌍 생성’을 클릭하면 다음과 비슷한 키 쌍을 얻을 수 있습니다.

web_push_cert

BHtTUZeVoHuJQc40ao2g41EQ6VY_w4D53hb7PGU6UA-8m12tO5OnNmZXsi_TbqjmdpWLYnPTi37zBHYo8QfHVOM

클라이언트 초기화에 위의 두 설정이 필요하니 복사해놓습니다.

Vue.js 프로젝트 세팅

vue-cli로 Vue.js 프로젝트를 생성합니다.

특별히 세팅할 내용은 없으며, 여기서는 TypeScript를 사용합니다.

vue create fcm-demo
cd fcm-demo

firebase 의존성 설치

npm install --save firebase

클라이언트 초기 설정

위에서 확인한 프로젝트 구성 값을 이용해 클라이언트를 초기화합니다.

src/main.ts:

import firebase from 'firebase/app'
import 'firebase/messaging'
// ...

const firebaseConfig = {
  apiKey: 'AIzaSyCteH_YyLh1nq4KjCCeC00evSvo3nfl7jQ',
  authDomain: 'vue-fcm-6ff39.firebaseapp.com',
  databaseURL: 'https://vue-fcm-6ff39.firebaseio.com',
  projectId: 'vue-fcm-6ff39',
  storageBucket: 'vue-fcm-6ff39.appspot.com',
  messagingSenderId: '902231810000',
  appId: '1:902231810000:web:4c8725619f7c3e55f7a3d5'
}

firebase.initializeApp(firebaseConfig)

const messaging = firebase.messaging()

messaging.usePublicVapidKey('BHtTUZeVoHuJQc40ao2g41EQ6VY_w4D53hb7PGU6UA-8m12tO5OnNmZXsi_TbqjmdpWLYnPTi37zBHYo8QfHVOM')

// 알림 수신을 위한 사용자 권한 요청
Notification.requestPermission()
  .then((permission) => {
    console.log('permission ', permission)
    if (permission !== 'granted') {
      alert('알림을 허용해주세요')
    }
  })

// TODO: Send token to server for send notification
messaging.getToken()
  .then(console.log)

// Handle received push notification at foreground
messaging.onMessage(payload => {
  console.log(payload)
  alert(payload.data.message)
})

// ...

푸시 알림 수신을 위해서는 서비스 워커가 필요한데, 다음과 같이 작성합니다.

src 가 아닌 public디렉터리에 위치합니다.

public/firebase-messaging-sw.js:

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here, other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.6.1/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
  apiKey: 'AIzaSyCteH_YyLh1nq4KjCCeC00evSvo3nfl7jQ',
  projectId: 'vue-fcm-6ff39',
  messagingSenderId: '902231810000',
  appId: '1:902231810000:web:4c8725619f7c3e55f7a3d5'
})

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging()

// 백그라운드 상태에서 받은 알림 처리
messaging.setBackgroundMessageHandler((payload) => {
  console.log('[firebase-messaging-sw.js] Received background message ', payload)
  // Customize notification here
  const notificationTitle = 'Background Message Title'
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  }

  return self.registration.showNotification(notificationTitle,
    notificationOptions)
})

주의: importScripts의 스크립트 버전과 pakcage.json에 명시된 firebase 의존성 버전(여기서는 7.6.1)이 일치하는지 확인하세요. 버전이 일치하지 않으면 올바르게 동작하지 않을 수 있습니다.

프로젝트를 실행해서 결과를 확인합니다.

npm run serve

브라우저에서 알림 권한을 허용하고 콘솔에 토큰이 출력되는지 확인합니다. (크롬의 시크릿 모드와 같은 일부 상황에서는 알림을 허용할 수 없습니다.)

푸시 요청 보내기

curl로 요청을 보내 푸시 알림이 오는지 확인합니다.

DEVICE_TOKEN은 브라우저에서 확인한 클라이언트 토큰이고, SERVER_KEY는 프로젝트 설정의 ‘클라우드 메시징’ 탭에서 확인할 수 있는 서버 키입니다.

server_key

curl -d '{ "to": "DEVICE_TOKEN", "data": {"message": "Hello"}}' \
-H "Accept: application/json" \
-H "Content-Type: application/json" \
-H "Authorization: key=SERVER_KEY" \
https://fcm.googleapis.com/fcm/send

브라우저로 푸시 알림이 오는지 확인합니다.

목록으로