Firebase Cloud Messaging (FCM)으로 웹 푸시 알림 구현하기

Firebase Cloud Messaging(FCM)를 이용하여 웹 푸쉬 알림을 구현해보겠습니다.

모바일에서 푸쉬알림 구현을 해보고 싶었는데, 생각보다 어렵지 않게 구현이 가능했습니다.

참고로 vue.js 기준으로 개발했으니 참고 바랍니다.

1) 환경세팅

Firebase 8 버전을 사용하여 Vue.js에서 푸시 알림을 구현하는 방법을 안내해드리겠습니다. ( 처음에 12버전을 설치했다가 잘 안되서, 8버전으로 진행합니다.)

아래 단계들을 따라 설정할 수 있습니다

1.firebase 프로젝트 생성 및 키값 받기

톱니바퀴 눌러서 들어가면 키 확인이 가능합니다.

2. npm install firebase@8

3.Vue.js 프로젝트에서 Firebase를 초기화합니다. src/firebase.js 파일을 만들어 다음과 같이 구성합니다:

4.firebase-messaging-sw.js 파일생성

public 폴더밑에 firebase-messaging-sw.js파일을 만들어줍니다.

5.serviceWorker.js 파일생성

서비스워커 등록

6.main.js 세팅

7.권한요청 및 토큰값 획득

아래 소스는 클라이언트 소스에서 호출해서 권한요청 받은 후 사용자의 토큰값을 받아옵니다. ( 해당 토큰은 DB에 따로 저장 후, 저장 된 토큰에 푸쉬메세지 전송이 가능합니다.)

2) 결과

위와 같이 세팅 후 개발자도구로 열었을 때 서비스 워커가 보이면 성공입니다.

이제 백엔드에서 저장 된 토큰에 메세지를 보내는 작업을 이어서 해보겠습니다.

위 내용은 이어서 포스팅하도록 하겠습니다.

Firebase Cloud Messaging (FCM)으로 웹 푸시 알림 구현하기(2편)

읽어주셔서 감사합니다. 궁금하신 점 있다면 댓글 남겨주세요.