푸시 알림을 PWA에 통합하는 방법
게시 됨: 2021-04-28목차
오늘 튜토리얼에서는 Firebase를 사용하여 푸시 알림을 PWA에 통합하거나 더 구체적으로 말하면 HTTPS 요청을 사용하여 메시지를 보낼 수 있는 클라우드 메시징 기능을 사용합니다.
프로그레시브 웹 앱 및 푸시 알림
프로그레시브 웹 앱은 끊임없이 변화하는 움직임이기 때문에 기술 자체가 기본 앱과 동등(기능 면에서)된 것을 보는 것은 놀라운 일이 아닙니다.
추천 자료: PWA 대 네이티브: 어느 것이 더 잘 어울리나요?
알림 트리거는 개발자가 사용자의 장치가 비행기 모드에 있는 경우에도 알림을 예약할 수 있는 기능을 제공합니다.
Jon Krafcik, Chrome Dev Summit 2019
이러한 모든 급진적인 변화가 있는 상태에서 PWA에 더 많은 수익을 창출하기 위해 이를 활용하지 않는 것은 낭비입니다. 그리고 이 튜토리얼을 사용하여 자신만의 푸시 알림 기능을 쉽게 설정할 수 있으므로 지나치게 복잡하지도 않습니다.
추천 자료: 전자 상거래를 위한 프로그레시브 웹 앱(PWA)의 9가지 필수 기능
푸시 알림을 PWA에 통합하는 방법
오늘 튜토리얼에서는 Firebase 를 사용하여 푸시 알림을 PWA에 통합할 것입니다. 특히 HTTPS 요청을 사용하여 메시지를 보낼 수 있는 클라우드 메시징 기능입니다.
전제 조건
- Firebase 계정(Firebase 내에서 프로젝트를 생성할 예정이므로)
- 프로그레시브 웹 앱. 간단한 데모를 위해 명령을 사용하여 만들 수 있는 기본 PWA인 create-react-app을 사용합니다.
1단계 : 기본 PWA 만들기
create-react-app을 사용하여 기본 PWA를 만들 것이므로 먼저 NodeJS를 다운로드하겠습니다. NodeJS 설치가 끝나면 NodeJS 명령 프롬프트 를 열고 다음 명령을 실행합니다.
지정된 디렉토리에 간단한 React 앱을 생성하려면:
npx create-react-app your-pwa-directory
현재 작업 디렉토리를 새로 생성된 React 앱으로 변경합니다.
cd your-pwa-디렉토리
프로젝트에 Firebase JavaScript 라이브러리를 추가합니다.
npm install firebase --save
2단계: push-notification.js 만들기
다음 단계는 모든 알림 처리를 담당할 모듈을 만드는 것입니다. <your-pwa-directory>\src 에서 push-notification.js 라는 파일을 만듭니다.
먼저 Firebase를 초기화하고 프로젝트 키를 전달하는 함수를 만들어 보겠습니다. Firebase > 프로젝트 개요 → 프로젝트 설정으로 이동하여 다음 아이콘을 클릭하여 프로젝트의 키를 찾을 수 있습니다.
그러면 PWA용 Firebase SDK가 포함된 다른 페이지로 이동합니다.
이제 프로젝트에 대한 키가 있으므로 다음 코드를 push-notification.js 에 추가해 보겠습니다.
'firebase'에서 firebase 가져오기;
내보내기 const initializeFirebase = () => {
firebase.initializeApp({
API 키: "XXXXXXXXXXXXX",
인증 도메인: "XXXXXXXXXXXXX",
데이터베이스 URL: "XXXXXXXXXXXXX",
프로젝트 ID: "XXXXXXXXXXXXX",
storageBucket: "XXXXXXXXXXXXX",
MessagingSenderId: "XXXXXXXXXXXXX",
앱 ID: "XXXXXXXXXXXXX"
});
} 이것으로 모든 알림 처리를 담당하는 함수를 만들었습니다. 이제 이 함수를 가져와서 호출해야 합니다. index.js 를 다음과 같이 편집하십시오.
'반응'에서 React 가져오기;
'react-dom'에서 ReactDOM을 가져옵니다.
가져오기 './index.css';
'./App'에서 앱 가져오기;
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
'./reportWebVitals'에서 reportWebVitals 가져오기;
'firebase'에서 firebase 가져오기;
import { initializeFirebase } from './push-notification';
ReactDOM.render(<앱 />, document.getElementById('루트'));
initializeFirebase();3단계: 서비스 워커 생성
서비스 워커는 오프라인 기능, 푸시 알림 및 리소스 캐싱을 지원하는 프로그레시브 웹 앱 이면의 기술 이름입니다.
SimiCart, 프로그레시브 웹 앱에 대해 알아야 할 모든 것
onMessage 이벤트를 수신하고 결과적으로 사용자의 장치로 알림을 보낼 수 있도록 하려면 서비스 작업자가 필요합니다. 기본적으로 Firebase는 firebase-messaging-sw.js 라는 파일을 자동으로 찾습니다.
파일이 제공되는 디렉토리에 firebase-messaging-sw.js 를 추가해 보겠습니다. 우리는 create-react-app 프로젝트이기 때문에 이 firebase-messaging-sw.js 는 우리의 공개 폴더에 들어갈 것입니다:
importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js');
firebase.initializeApp({
API 키: "XXXXXXXXXXXXX",
인증 도메인: "XXXXXXXXXXXXX",
데이터베이스 URL: "XXXXXXXXXXXXX",
프로젝트 ID: "XXXXXXXXXXXXX",
storageBucket: "XXXXXXXXXXXXX",
MessagingSenderId: "XXXXXXXXXXXXX",
앱 ID: "XXXXXXXXXXXXX"
});
const 메시징 = firebase.messaging();아직 PWA Service Worker에 대해 들어보지 못했다면 이 놀라운 기술에 대해 모두 배울 수 있는 독점 기사가 있습니다.
4단계: 알림을 보낼 수 있는 사용자 권한 요청
지금은 개인 정보의 시대이며 원치 않는 무단 알림을 보내 사용자를 귀찮게 하고 싶지 않습니다!
사용자의 권한을 요청하려면 다음을 push-notification.js 에 추가하기만 하면 됩니다.
'firebase'에서 firebase 가져오기;
내보내기 const initializeFirebase = () => {
firebase.initializeApp({
API 키: "XXXXXXXXXXXXX",
인증 도메인: "XXXXXXXXXXXXX",
데이터베이스 URL: "XXXXXXXXXXXXX",
프로젝트 ID: "XXXXXXXXXXXXX",
storageBucket: "XXXXXXXXXXXXX",
MessagingSenderId: "XXXXXXXXXXXXX",
앱 ID: "XXXXXXXXXXXXX"
});
}
내보내기 const askForPermissionToReceiveNotifications = 비동기() => {
노력하다 {
const 메시징 = firebase.messaging();
Messaging.requestPermission()을 기다립니다.
const 토큰 = messaging.getToken()을 기다립니다.
console.log('귀하의 토큰은:', 토큰);
반환 토큰;
} 잡기(오류) {
console.error(오류);
}
} 그리고 이 함수는 어딘가에서 호출해야 하므로 버튼 클릭으로 추가할 것입니다. 다음과 같이 /src/ 디렉토리에서 app.js 파일을 편집하십시오.
'./logo.svg'에서 로고 가져오기;
가져오기 './App.css';
'./push-notification'에서 { askForPermissionToReceiveNotifications} 가져오기;
함수 앱() {
반품 (
<div className="앱">
<header className="앱 헤더">
<img src={로고} className="앱 로고" alt="로고" />
<p>
<code>src/App.js</code>를 편집하고 저장하여 다시 로드합니다.
</p>
<아
className="앱 링크"
href="https://reactjs.org"
대상="_blank"
rel="noopener noreferrer"
>
반응 배우기
</a>
<버튼 onClick={askForPermissionToReceiveNotifications} >
알림을 받으려면 클릭하세요.
</버튼>
</헤더>
</div>
);
}
기본 앱 내보내기;이제 프로젝트를 시작하고 다음과 같은 알림을 받으려면 클릭 버튼이 표시되어야 합니다.
버튼을 클릭하면 권한을 묻는 팝업이 표시됩니다.
허용 을 클릭하고 브라우저의 콘솔을 확인하십시오. 토큰을 알리는 메시지가 표시되어야 합니다.
다음 단계에서 필요하므로 이제 이 토큰을 다른 곳에 저장 하십시오.
5 단계 : Postman으로 푸시 알림 보내기
다음 단계에서는 Postman을 사용하여 Firebase의 클라우드 메시징 서비스를 통해 알림을 보냅니다.
Postman에서 다음 정보를 사용하여 POST 요청을 생성합니다.
- 요청 URL : https://fcm.googleapis.com/fcm/send
- 헤더 : POST 요청의 헤더에 다음 키가 필요합니다.
권한 부여: 키= SERVER_KEY
콘텐츠 유형 : application/json
참고 : SERVER_KEY 는 Firebase 설정의 클라우드 메시징 탭에서 찾을 수 있습니다.
- Body : POST 요청의 본문을 다음 코드로 채웁니다.
{
"알림": {
"제목": "SimiCart",
"body": "푸시 알림 테스트",
"click_action": "http://localhost:3000/",
"아이콘": "https://i.imgur.com/5zO5cce.png"
}
"to": "USER_TOKEN"
} USER_TOKEN 을 4단계에서 얻은 토큰으로 바꿉니다( 알림을 받으려면 클릭 버튼 클릭 ). Body type을 raw 및 JSON 으로 선택하는 것을 잊지 마십시오.
이제 보내기 를 클릭하면 오른쪽 하단 모서리에 알림 팝업이 표시됩니다.
참고 : 이 알림은 앱이 백그라운드에 있거나 최소화된 경우에만 나타납니다.
축하합니다! 이제 PWA에서 알림을 보낼 수 있습니다!
결론
이 가이드를 통해 이제 자신만의 푸시 알림 기능을 자신 있게 설정할 수 있기를 바랍니다. 새로운 기술인 Progressive Web Apps는 기술에 정통하지 않은 사용자에게는 복잡한 일입니다. 이것이 PWA에 대한 다년간의 경험으로 모든 요구를 처리할 수 있는 SimiCart와 같은 즉시 사용 가능한 솔루션 제공업체가 있는 이유입니다.