Firebase(FCM)를 사용하여 웹 푸시 알림을 보내는 방법은 무엇입니까?

게시 됨: 2021-12-29

웹, IOS 및 Android에서 알림 서비스를 용이하게 하기 위해 Firebase는 클라우드 서비스를 사용합니다. FCM(Firebase Cloud Messaging) 은 각 장치에 고유한 토큰을 생성하고 나중에 이를 사용하여 각 장치에 메시지를 보내는 방식으로 작동합니다. 웹 푸시 알림 을 보내기 위해 Firebase는 자바스크립트를 사용하여 토큰을 생성합니다.

이 블로그에서는 웹 푸시 알림 Firebase 를 구현하는 방법에 대한 모든 것을 알게 될 것입니다.

Firebase 클라우드 메시징이란 무엇입니까?

Firebase 클라우드 메시징이란?

Firebase 클라우드 메시징은 Google의 무료 모바일 알림 서비스입니다. 이를 통해 타사 앱 개발자는 GCM(Google Cloud Messaging) 서버에서 사용자에게 알림을 보낼 수 있습니다. 이를 통해 동기화할 수 있는 다양한 데이터를 실시간으로 사용자에게 알릴 수 있습니다.

사용자 앱에서 FCM 서버로 메시지를 업스트림하고 FCM 서버에서 사용자 앱으로 메시지를 다운스트림합니다. FCM을 사용하여 전 세계 어디에 있든 사용자의 참여를 유도하고 유지하며 리타게팅할 수 있습니다.

Firebase를 사용하여 웹 푸시 알림을 보내면 어떤 이점이 있습니까?

다음은 Firebase에서 웹 푸시 알림 을 보낼 때의 이점입니다.

  • 무료 시작: FCM 사용에 대해 Google에 비용을 지불할 필요가 없습니다. 푸시 알림 서비스. 게다가 확장하기도 쉽습니다.  
  • 권한에 대한 걱정 없음: FCM 라이브러리는 매니페스트 병합을 사용하므로 필요한 권한이 자동으로 추가됩니다. 이렇게 하면 수행해야 하는 노력의 양이 줄어듭니다.
  • 간소화된 등록: FCM이 장치에 메시지를 전달하는 데 사용하는 주소를 "등록 토큰"이라고 합니다. 이 프로세스는 이제 비동기화되었습니다. Google 라이브러리에 자동으로 토큰이 할당됩니다. 따라서 토큰을 요청하면 등록 토큰이 전송됩니다. 메시징을 시작하려면 이 토큰을 서버로 보내기만 하면 됩니다.
  • 손쉬운 구현: FCM 구현은 빠르고 쉽습니다. 단일 SDK에서 직관적인 API를 사용할 수 있으므로 복잡한 인프라를 구축하지 않고도 고객의 문제를 즉시 해결할 수 있습니다.
  • 분석: Firebase에서 무료로 무제한 분석을 받을 수 있습니다. 사용자의 앱 사용, 광고 클릭 등에 대한 귀중한 데이터를 얻을 수 있습니다. 다른 Firebase 기능은 Firebase Analytics와 잘 작동합니다. 따라서 모든 작업을 수행할 수 있습니다.
  • 교차 플랫폼 지원: API는 C++, JavaScript, Android 및 iOS용 단일 SDK에서 사용할 수 있으므로 인프라를 변경하지 않고도 다양한 플랫폼으로 API를 확장할 수 있습니다.
  • 공통 주제 메시징: 특정 주제에 관심이 있는 사용자에게 알리려면 FCM에 메시지를 게시하기만 하면 됩니다. FCM은 해당 주제를 구독한 모든 사용자에게 전달합니다. 가장 좋은 점은 주제 메시징에 제한이 없다는 것입니다.
  • 다양한 주제 메시징: FCM은 또한 고객 세분화를 통해 관련 메시지를 보낼 수 있습니다. 예를 들어 사용자에게 교통 관련 알림을 보내는 경우 도시 A의 사용자는 해당 도시와 관련된 교통 메시지만 수신하고 도시 B의 사용자는 해당 도시와 관련된 교통 메시지만 받습니다.

Firebase를 사용하여 웹 푸시 알림을 보내는 방법은 무엇입니까?

다음은 웹 푸시 알림 Firebase를 구현하는 데 도움이 되는 단계별 지침 입니다.

1. Firebase 앱 등록

등록-Firebase-App
  1. https://console.firebase.google.com/u/0/ 링크를 방문하여 '프로젝트 추가' 탭을 누릅니다.
  2. 프로젝트 이름을 지정하고 국가를 선택하십시오. 그런 다음 '프로젝트 만들기' 탭을 누릅니다. Google은 프로젝트 이름의 가용성과 고유성을 확인합니다.
  3. 계속하려면 '이용약관 동의' 탭을 클릭하세요. 귀하의 프로젝트는
  4. 몇 초.
  5. 이제 Android/IOS/Web/Unity 앱을 프로젝트에 추가합니다. 이 블로그는 웹 푸시 알림 Firebase 에 중점을 두고 있으므로 </>로 표시된 웹 아이콘을 클릭하여 진행해야 합니다.
  6. 앱에 닉네임을 지정합니다. 이 닉네임은 사용자 전용입니다. 따라서 이 기능을 사용하여 내부 사용을 위해 프로젝트의 앱을 더 잘 구별할 수 있습니다.
  7. 프로젝트가 HTTPS 서버에서 실행되고 있지 않다면 이에 대한 호스팅을 추가하십시오. 그렇지 않은 경우 이 단계를 건너뛰십시오.
  8. 이제 '앱 등록'을 클릭합니다.  
  9. 이제 앱이 등록되었으므로 코드인 Firebase SDK를 받게 됩니다. 이 코드를 복사하십시오

아래에. 다음 섹션에서 사용할 것입니다. 지금 복사하지 않는 경우 '설정' 섹션에서 검색할 수 있습니다.

2. 프로젝트에 Firebase 추가

프로젝트에 Firebase 추가
  1. 대시보드로 이동합니다. 사이드바에서 '설정' 아이콘을 찾을 수 있습니다. 그것을 클릭하십시오. 표시되는 메뉴에서 프로젝트 설정을 클릭합니다.
  2. 설정 페이지(일반 설정)가 열리면 페이지 하단으로 스크롤하여 선택한 CDN에 대해 표시된 코드를 복사합니다.
  3. HTML 파일 끝에 다음 코드를 포함합니다. Firebase 메시징을 위한 CDN 스크립트도 포함합니다.

< 스크립트 src = “https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js” > </script>

<스크립트 src = “https://www.gstatic.com/firebasejs/8.3.2/firebase-analytics.js” > </script>

3. Firebase 서비스 운영

1. 위에서 언급한 코드의 경우 // Initialize Firebase가 있는 위치 다음에 맨 아래에 있는 코드를 추가합니다.

// Firebase 초기화

firebase.initializeApp(firebaseConfig); const 메시징=firebase.messaging(); //Firebase 서비스를 실행하기 위해 만든 사용자 정의 함수

  getStartToken(); //이 코드는 서버/앱에서 메시지를 수신하고 브라우저에서 프로젝트와 동일한 탭이 열리면 콘솔에 메시지를 인쇄합니다.

메시징.onMessage(함수(페이로드){console.log("onMessage",페이로드);});

2. HTML 페이지에 있는 별도의 js 파일에 맨 아래에 코드를 작성하거나 <script> 태그의 맨 위에 있는 코드에 추가할 수 있습니다.

Messaging.getToken() 은 Firebase SDK를 사용하여 토큰을 검색하는 데 사용되는 함수입니다. 토큰을 찾으면 저장할 서버로 보내고, 그렇지 않으면 RequestPermission() 함수를 통해 사용자의 권한을 찾습니다.

setTokenSentToServer() 는 이미 서버에 토큰을 보낸 경우 1을 sendTokenToServer의 값으로 할당하기 위해 로컬 저장소를 활용하는 또 다른 함수입니다. 서버 또는 Firebase SDK에서 검색됩니다.

4. 프로젝트에서 알림 보내기

프로젝트에서 메시지 보내기

이제 프로젝트에서 알림을 보내는 데 필요한 모든 것이 준비되었으므로 토큰을 알고 있는 최종 사용자에게 알림을 보내는 방법에 대한 세부 정보가 있습니다.

1. 처음에는 서비스 키를 받아야 합니다. 다음 단계를 수행하십시오.

  • Firebase 콘솔 열기
  • 프로젝트 설정을 클릭하십시오
  • '클라우드 메시징'을 탭합니다.
  • 서버 키 필드에서 코드를 찾을 수 있습니다. 복사합니다.

2. 푸시 알림 보내기

Postman 플랫폼을 사용하여 Firebase에서 웹 푸시 알림 을 보내 보겠습니다. 당신이해야 할 일은 다음과 같습니다 -

3. POST 요청 유형을 설정합니다.

4. URL 입력: https://fcm.googleapis.com/fcm/send

5. 헤더 섹션을 클릭합니다.

두 개의 헤더, 즉 권한 부여 및 콘텐츠 유형을 채워야 합니다.

· 권한 부여: 복사한 서버 키를 붙여넣습니다.

· 콘텐츠 유형: application/JSON(JavaScript Object Notation)

6. 이제 Body 섹션 열기를 클릭합니다. Firebase가 사용자 등록 시 검색한 사용자 토큰을 붙여넣습니다.

7. 이제 요청을 보냅니다. 서버에서 사용자에게 푸시 알림을 보낼 수 있습니다.

사용자에게 첫 번째 푸시 알림을 보낼 때 웹 브라우저는 알림을 받을 수 있는 권한을 요청합니다. 그/그녀가 권한을 부여한 경우에만 계속해서 푸시를 보낼 수 있습니다. 푸시 알림 팁에 따라 사용자가 권한을 부여했는지 확인할 수 있습니다.

마무리 지금쯤이면 Firebase를 사용하여 웹 푸시 알림을 보내는 것이 생각만큼 어렵지 않다는 것을 이해하셨을 것입니다. 많은 리소스가 필요하지 않으며 시간도 많이 걸리지 않습니다. 게다가 사용하는 웹 푸시 알림 Firebase 는 웹사이트 유지 관리 또는 웹 애플리케이션 비용에 영향을 미치지 않습니다. 기능에 대한 자세한 내용이 여전히 필요한 경우 Firebase 설명서를 참조하세요.

제품 둘러보기

또한 읽기:

  • 웹 푸시 알림의 7가지 과대평가된 요소
  • 웹 푸시 알림 | 다이렉트 이메일 마케팅 전술
  • 마케터가 알아야 할 41가지 웹 푸시 알림 통계
  • 2022년 최고의 푸시 알림 소프트웨어 및 도구 15개 {비교}
  • 웹 푸시 알림이 다른 마케팅 매체보다 어떻게 효과적입니까?