개발하기 이전 참고사항

Chrome Web Push알림 추가하는 방법 : https://www.daangn.com/wv/faqs/3304

학습 기대 효과

FCM은 Firebase Cloud Messaging으로 Web 기반의 푸시알림 기능이 필요할 때 유용하게 사용됩니다.

개발 시작이전에, Web Push 와 Firebase에 대해 학습해보고 둘사이의 관계를 파악하는데 도움이 되고자 기능을 개발하게 되었습니다.

사용방법

image.png

  1. Edit Base URL 을 클릭해 본인이 설정한 URL을 등록합니다.
  2. Get FCM Config를 통해 클라이언트로 Firebase Config를 전달합니다.
  3. Get Device Token을 통해 설정한 Config기반의 기기토큰값을 조회합니다.
  4. POST Device Token을 사용해 기기토큰값을 백엔드에서 가져가고 해당 토큰값으로 Web Push Notification을 전송합니다.

GET {{domain}}/fcmconfig

// response 예시
{
  "apiKey": "AIzaSyCo6tCmY813_8OASrZ1ATM1FIyzXYLPatX",
  "authDomain": "exampleapp.firebaseapp.com",
  "projectId": "exampleproject",
  "storageBucket": "examplebucket.appspot.com",
  "messagingSenderId": "1032870860000",
  "appId": "1:1032870860000:web:12345ada5ec7e3b7164107b",
  "measurementId": "G-EXAMPLEID",
  "vapidKey": "BBxk6UG4ZdGZNhgDft64aN1CV6dxskmvsHr3vv-2-heVyRAtq70ebt9ngbi6HT3F1c90lrzSysp6luzvU7kaNc"
}

개발자는 FireBase 어플리케이션을 시작하고, config값을 api 요청의 응답으로 설정합니다.

특이점은 vapidKey또한 동일하게 클라이언트로 전송해야합니다.