Skip to content
Snippets Groups Projects
Commit f2a000e5 authored by 석찬 윤's avatar 석찬 윤
Browse files

Update README.md

parent 3003564f
No related branches found
No related tags found
No related merge requests found
# Step 1.
# Getting Started with Create React App
# 아이템 선정 동기
브라우저에서 브랜드의 알림이나 업데이트를 구독한 적이 있었는데 데스크톱 화면 오른쪽 상단에 주기적으로 팝업되는 알림이 어떻게 작동하는지 궁금하여 사용해 봐야겠다고 생각했습니다. 그 기능이 "웹 푸시"라는 기능이었고 최근 웹푸시를 지원하는 브라우저가 많아지면서 이에 대한 관심이 많아지고 있다는 것을 알고 직접 기능을 개발하면서 공식 문서나 제대로 정리되어 있는 블로그가 없다는 것을 느꼈습니다. 이에 자주 쓰던 React환경에서 PWA를 적용하여 PC나 모바일에서 원활하게 웹푸시를 보낼 수 있도록 하는 FCM 사용법을 모든 사람들에게 알려주고 싶어 아이템을 선정하게 되었습니다.
# 개발하면서 발생했던 문제점
## 1. <StrictMode> must be deleted because token issuance requests are made twice.
StrictMode가 적용되어있어 api콜(token발급)이 두번씩 되는 오류가 있었습니다. <StrictMode>삭제 하여 해결하였습니다.
## 2. You must manage the key received from fcm through the .env file.
한번 테스트로 VAPID key를 공개로 github에 노출했다가 알림이 무차별적으로 요청되는 고역이 있었습니다.
새 프로젝트를 만들어 중요한 firebase VAPIDkey나 SDK key 를 .env 파일에 안전하게 보관했습니다.
## 3. ServiceWorker Error
3.1. 공식 문서에서는 Firebase SDK를 firebase-messaging-sw에 넣어 초기화하라고 되어있었지만, service워커는 오프라인 환경에서도 동작하여 firebase library를 제대로 import해오지 못하는 오류
3.2. public폴더 내부에 있기 때문에 SDK key값을 환경변수로 지정시 .env파일에 있는 환경변수를 제대로 불러오지 못하는 오류 (공식문서에서 messaging기능만 사용시 SDK key는 공개해도 상관없지만)
3.3. firebase-messaging-sw에서 export한 객체를 app.js에서 import해오지 못하는 문제
-> firebase SDK설정을 하는 component를 src파일내에 따로 하나 만들어서 해결.
## 4. Edit manifast.json
PWA환경 구성중 manifest.json 대표 아이콘설정 오류가 발생하여 해결했습니다.
-> Add "purpose": "maskable" to one of the icons
# 감상
# FCM (with PWA) 사용법 간단 정리
## Step 1.
### Getting Started with Create React App
npx create-react-app <project name>
# Install firebase
#### Install firebase
npm install firebase
---
# Step 2.
# PWA settings
## Edit manifast.json
## Step 2.
#### PWA settings
### Edit manifast.json
Add "purpose": "maskable" to one of the icons
## Create firebase-messaging-sw.js in public folder
### Create firebase-messaging-sw.js in public folder
### Add eventlistener of "push" & "notificationclick"
---
---
# Step 3.
# FCM setting
## Create .js file in /src for Firebase initial settings
## Step 3.
### FCM setting
## Request permission of Notification
### Create .js file in /src for Firebase initial settings
## Get token using vapidKey
---
### Request permission of Notification
---
# Step 4.
# Test message in firebase console
### Get token using vapidKey
---
# Additional considerations
## 1. <StrictMode> must be deleted because token issuance requests are made twice.
## 2. You must manage the key received from fcm through the .env file.
\ No newline at end of file
## Step 4.
### Test message in firebase console
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment