[Firebase] FCM을 활용한 웹 푸쉬 알림 구현방법 A to Z

소스코드

https://github.com/LDK1009/Supabase-FCM-Push-Notification

GitHub - LDK1009/Supabase-FCM-Push-Notification: Next.js + Supabase + FCM 을 활용한 푸쉬 알림 기능 소스코드 저장

 

프로젝트 파일별 설명

public / firebase-messaging-sw.js

파이어베이스 메시징 서비스워커가 작성되어있습니다.
서비스워커 실행/등록, 푸쉬 알림 도착/클릭 시 실행할 코드가 작성되어 있습니다.

public / manifast.json

PWA 관련 설정이 포함되어 있습니다.
파일을 수정하여 PWA 앱의 이름, 아이콘 등의 설정을 변경할 수 있습니다.
이 파일은 필자가 PWA 앱 내 푸쉬 알림 테스트를 위해 생성하였으며 웹 푸쉬 알림 구현과 무관합니다.

src / components / HomeContainer.tsx

홈에서 보여질 컴포넌트입니다.
현재 접속한 브라우저의 푸쉬 알림 지원 여부와 알림 권한 상태를 표시합니다.
푸쉬 알림 권한 요청 버튼을 통해 알림 권한을 요청합니다.
사용자가 알림 권한 수락 시 해당 기기의 FCM 토큰 정보를 확인할 수 있습니다.

src / lib / firebaseConfig.ts

파이어베이스 프로젝트 설정 관련 파일입니다.
프로젝트 설정, 프로젝트 초기화, 메세징 초기화를 담당합니다.
보안을 위해 프로젝트 설정 시 각 설정값은 환경변수(.env)을 사용합니다.

src / utils / pushNotification.ts

푸쉬 알림 관련 모듈 파일입니다.
푸쉬 알림 권한 요청, FCM 토큰 발급, 포그라운드 환경 푸쉬 알림 수신 관련 함수를 정의합니다.
firebaseConfig에서 초기화한 메세징을 사용합니다.
위 함수들을 컴포넌트에서 임포트하여 사용합니다.
ex) 알림 권한 요청 버튼 클릭 시 푸쉬 알림 권한 요청 함수와 FCM 토큰 발급 함수 호출

 

사용방법

프로젝트 세팅

git clone -b fcm-push-notification https://github.com/LDK1009/Supabase-FCM-Push-Notification.git

프로젝트 클론

cd ./Supabase-FCM-Push-Notification

프로젝트로 이동

npm install

의존성 설치

npx next dev --experimental-https

개발 서버 실행(HTTPS)

 

파이어베이스 프로젝트 생성

https://firebase.google.com/?hl=ko

Firebase | Google's Mobile and Web App Development Platform

파이어베이스 홈페이지에 접속합니다.

회원가입 및 로그인을 합니다

홈페이지 우측 상단 'go to console' 버튼을 클릭해 콘솔로 입장합니다.

'Firebase 프로젝트 만들기' 버튼을 클릭합니다.

프로젝트 생성 완료

 

파이어베이스 프로젝트 앱 생성

앱 이름 입력 후 앱 등록 버튼 클릭

파이어베이스 초기화 코드를 복사합니다.

복사한 초기화 코드는 이후 과정에서 쓰이니 잘 보관해주세요.

프로젝트 설정에서도 파이어베이스 초기화 코드 확인이 가능합니다.

파이어베이스 프로젝트 앱 생성 완료.

 

웹푸쉬 인증서 발급

프로젝트 설정 > 클라우드 메시징 > 웹 푸시 인증서

웹 푸시 인증서를 발급한 후 키쌍을 복사합니다.

 

파이어베이스 프로젝트 세팅

프로젝트 폴더 최상위 레벨에 .env 파일을 생성합니다.

# 파이어베이스 초기화
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=

# 파이어베이스 웹 푸시 인증서
NEXT_PUBLIC_FIREBASE_VAPID_KEY=

.env 파일에 위 코드를 복사 붙여넣기 후 이전에 복사했던 파이어베이스 초기화 코드를 하나씩 붙여넣습니다.

 

웹 푸시 알림 테스트

npx next dev --experimental-https

터미널에서 위 명령어를 입력하여 개발서버를 HTTPS 로 실행합니다.

이후 브라우저에서 localhost:3000에 접속합니다.

푸쉬 알림 권한 요청 버튼 클릭 후 하단에 발급된 FCM 토큰을 복사합니다.

테스트 메시징을 위해 파이어베이스 > 메시징 으로 접속합니다.

푸쉬 알림 제목, 알림 텍스트를 입력 후 테스트 메시지 전송 버튼을 클릭합니다.

복사했던 FCM 토큰을 등록 및 추가한 후 테스트 버튼을 클릭합니다.

위처럼 웹 푸쉬 알림이 정상적으로 작동합니다.

만약 테스트 메시징에도 웹 푸쉬 알림이 오지 않는다면 아래 사항을 검토하세요

1. 개발 서버를 HTTPS로 실행하세요.

2. .env 환경변수와 파이어베이스 초기화 변수 + 웹 푸쉬 인증서 변수가 일치한 지 검토하세요

3. 이 외 추가 질문이 있으시다면 댓글로 남겨주세요

 

+추가(모바일 웹 푸시 알림 테스트)

모바일 웹 푸쉬 알림은 배포 후 진행하여야합니다.

자세한 이유와 방법은 아래 글을 참고해주세요

배포 방법

https://sooncoding.tistory.com/282

[Vercel] Vercel 배포 접속 오류 해결 방법 | 연결이 비공개로 설정되어 있지 않습니다. | net::ERR_CERT_CO

https://sooncoding.tistory.com/103

[Vercel] 가비아 도메인 구매 방법 + Vercel 도메인 변경 방법

 

 

배포 후 진행해야하는 이유

https://sooncoding.tistory.com/274

[트러블슈팅] 서비스워커 등록 및 FCM 토큰 발급 오류 해결방법