개발중인 프로젝트에 알람기능이 필요하여 웹소켓과 fcm중에서 어떤게 좋을 지 시니어분께 자문을 구했었는데
아무래도 웹소켓은 사용자가 적을때는 괜찮지만 많아질수록 서버 관리비용이 높아지기때문에
관리 비용적인 측면이나 개발적은 측면에서도 적용도 쉬운 fcm을 적용하는 것을 제안해주셨다.
FCM을 등록하기 이전에 앞서서 서비스워커라는 것을 등록해야한다. 서비스워커는 기존에 사용할 일이 없어서 백그라운드에서 돌아가게 해주는 것 정도로 알고 있는데 조금더 자세히 알아봤다.
💡 서비스 워커는 출처와 경로에 대해 등록하는 이벤트 기반 워커로서 JavaScript 파일의 형태를 갖고 있습니다. 서비스 워커는 연관된 웹 페이지/사이트를 통제하여 탐색과 리소스 요청을 가로채 수정하고, 리소스를 굉장히 세부적으로 캐싱할 수 있습니다. 이를 통해 웹 앱이 어떤 상황에서 어떻게 동작해야 하는지 완벽하게 바꿀 수 있습니다.
(제일 대표적인 상황은 네트워크를 사용하지 못할 때입니다. ⇒ 즉, 오프라인 문제가 생겼을 경우를 대비하여 등장한 개념이다)
서비스 워커는 워커 맥락에서 실행되기 때문에 DOM에 접근할 수 없습니다. 또한 앱을 구동하는 주 JavaScript와는 다른 스레드에서 동작하므로 연산을 가로막지 않습니다(논 블로킹). 서비스 워커는 온전히 비동기적으로 설계됐으며, 그로 인해 동기적 XHR이나 웹 저장소 등의 API를 서비스 워커 내에서 사용할 수 없습니다
출처 : https://developer.mozilla.org/ko/docs/Web/API/Service_Worker_API
서비스워커에 대한 설명이 잘 되어있는 블로그글을 참고했다. https://so-so.dev/web/service-worker/
기존의 firebase project와 동일한 key들을 사용해서 진행하면 된다.
우선 만들어둔 파이어베이스 프로젝트에 들어간 후 프로젝트 설정을 눌러준다
그럼 메세징 탭을 들어간 후 하단에 적힌 해당 서버 키와 발신자 ID를 적어두어야한다.
구글링을 하다보면 nuxtjs/firebase를 쓰는 경우가 많은데 해당 라이브러리가 없어도
구글내에서 자바스크립트로 잘 제공하고 있으므로 자바스크립트로 구현 할 예정이다.
라이브러리를 쓰다보면 간혹 그 라이브러리에 대한 버전이슈가 있기 때문에 필수적인 경우가 아니라면 사용하지 않는 것을 선호한다.
전혀 어렵지 않음!!!
구글에서 샘플 코드도 제공하고 있다.
https://github.com/firebase/quickstart-js/tree/master/messaging
GitHub - firebase/quickstart-js: Firebase Quickstart Samples for Web
Firebase Quickstart Samples for Web. Contribute to firebase/quickstart-js development by creating an account on GitHub.
github.com
우선 plugins/firebase.client.ts를 만들어준다.
앱이 시작할 때 해당 메세지스크립트도 실행되어야 하므로 플러그인에 넣는다
이미 firebase를 사용하고 있다면 거기에 추가하면 된다.
import { defineNuxtPlugin } from '#app'
import { getMessaging, onMessage, getToken } from "firebase/messaging";
import { onBackgroundMessage } from "firebase/messaging/sw";
export default defineNuxtPlugin(async (nuxtApp) => {
const firebaseConfig = {
apiKey: config.FIREBASE_API_KEY,
authDomain: config.FIREBASE_AUTH_DOMAIN,
projectId: config.FIREBASE_PROJECT_ID,
storageBucket: config.FIREBASE_STORAGE_BUCKET,
messagingSenderId: config.FIREBASE_MESSAGING_SENDER_ID,
appId: config.FIREBASE_APP_ID,
measurementId: config.FIREBASE_MEASUREMENT_ID
};
const app = firebase.initializeApp(firebaseConfig);
const messaging = getMessaging(app);
const token = await getToken(messaging, { vapidKey: config.fCM_KEY })
//메세지 테스트를 위해 토큰이 필요하다. 저장하기
console.log(token)
onMessage(messaging, (payload) => {
console.log('Message received. ', payload);
// ...
});
})
public/firebase-messaging-sw.js 로 파일을 추가해주자
importScripts('<https://www.gstatic.com/firebasejs/9.2.0/firebase-app-compat.js>')
importScripts(
'<https://www.gstatic.com/firebasejs/9.2.0/firebase-messaging-compat.js>'
)
const config = {
apiKey: 'api-key',
authDomain: 'project-id.firebaseapp.com',
databaseURL: '<https://project-id.firebaseio.com>',
projectId: 'project-id',
storageBucket: 'project-id.appspot.com',
messagingSenderId: 'sender-id',
appId: 'app-id',
measurementId: 'G-measurement-id',
}
firebase.initializeApp(config)
const messaging = firebase.messaging()
messaging.onBackgroundMessage(function (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: '/alarm.png',
}
self.registration.showNotification(notificationTitle, notificationOptions)
})
해당 코드까지 작성했다면 사실상 fcm은 끝..
저장을 하고 실행하면 하단과 같은 알림 표시가 뜬다.
허용해주자
허용안하면 알림이 안온다
허용을 하면 이렇게 비어있던 서비스워커가
이렇게 실행되어 지고 있는 것을 확인 할 수 있다!
이제 마지막으로 알람을 보내서 확인해보자
메세지 보내는 테스트를 위해서
파이어베이스의 클라우드 메세지로 들어가면 send your first message로 테스트가 가능하다!
다른 단계는 하지 않고 제목과 텍스트를 작성 후 테스트 메세지 전송버튼을 클릭하면 된다.
해당 토큰을 등록해서(상단 코드에서 콘솔로 찍은 부분!!!)
테스트를 하면!
백그라운드에 있어도 알람이 날라오는 것을 확인 할 수 있다!
콘솔에서 Message received 는 창이 떠있을 때 날라오는 부분이며
Received background message는 백그라운드에서 날라오는 알람이다
차이가 있으니 구분하여 사용하자
