Web Push

줌 포털 알람 모듈

FCM 관련 firebase 공식문서 https://firebase.google.com/docs/cloud-messaging/js/client

참고 기획서 링크 https://docs.google.com/presentation/d/1yMPaH36AyIYc3u_2bsDbMCodth-1l0EiQUxunWVF6oQ/edit#slide=id.g1211f86e692_2_59

Requirement

• Firebase zum-app 권한 필요 (firebase console)
  • firebase config options
  • vapid key
  • firebase-messaging-sw.js

firebase-messaging-sw.js

푸시 알람을 붙이고자하는 프로젝트에 해당 파일을 생성 후 public 폴더에 추가

import { ZumWebPush } from '@zum-front-core/web-push';

const firebaseConfig = {
  // ...config options
};

ZumWebPush.onBackgroundMessage({ firebaseConfig });

Foreground Message (브라우저 창이 열려있을 때 알람)

사용법

onForegroundMessage 옵션

// FCM 사용을 위한 firebase console 계정 config
firebaseConfig
vapidKey
projectName = 'zum-app'
appType = 'web'

// 알람을 받는 로그인 사용자 아이디 (비로그인 = guest)
userId = 'guest'
        
/* 
 * 모두 기본동작이 정의되어 있어서 따로 만들어주지 않아도 되지만 특정 동작을 원하는 경우 오버라이드 가능 
 * */
onMessageHandler // Notification 알람 
onPermissionDenied // Notification API 권한 거절
onPermissionError // Notification API 에러
onPermissionGranted // Notification API 권한 수락

import { ZumWebPush } from '@zum-front-core/web-push';

const firebaseConfig = {
  // ...options
};

const vapidKey = '...'

ZumWebPush.onForegroundMessage({ firebaseConfig, vapidKey });

Background Message (브라우저 창이 꺼져있을 때 서비스 워커를 사용한 알람)

기본적으로 FCM (firebase cloud message)에서 백그라운드와 관련된 알람을 내부에서 처리해주기 때문에 원하는 동작을 위해서는 service worker file이 필요

사용법

onBackgroundMessage 옵션

// FCM 사용을 위한 firebase console 계정 config
firebaseConfig

// firebase-messaging-sw.js
import { ZumWebPush } from '@zum-front-core/web-push';

ZumWebPush.onBackgroundMessage({ firebaseConfig });