Firebase의 PWA 푸시 알림(클라우드 메시지) - 섹션 1

PWA에서 알림 밀어넣기

당신은 어떻게 유명하고 짜증나는 푸시 알림을 응용 프로그램에 추가할 생각을 했습니까?이 강좌에서, 나는 당신에게 Firebase Cloud Messaging을 어떻게 사용하여 이 점을 실현하는지 보여 드리겠습니다.
참고: 본 강좌는 PWAS 및 서비스 직원에 대한 기본 지식을 필요로 합니다.
너는 내가 보화영도와 서비스 종사자에 대한 소개를 좀 볼 수 있다
PWA 및 알림 정보
시작하기 전에 알림 API와 푸시 API가 다르다는 것을 분명히 해야 합니다.사람들은 항상 그들을 헷갈리게 한다.
푸시 API: 푸시 API는 웹 응용 프로그램이 서버에서 푸시된 메시지를 받을 수 있도록 합니다. 웹 응용 프로그램이 프론트에 있든 현재 사용자 에이전트에 불러왔든 상관없습니다.이로써 개발자는 가입을 선택한 사용자에게 비동기적인 알림과 업데이트를 제공하여 신속한 새로운 내용에 더욱 잘 참여할 수 있다.

시작합시다!!

최종 코드는 환매 내부의 마지막 지점에 있다.

클론 이 재구매: https://github.com/devpato/pwa-FCM-notifications-tutorial

보시다시피 저는 응용 프로그램의 기본 구조를 만들었습니다. Firebsae 클라우드 메시지 서비스를 사용하여 알림을 전송하여 메시지를 보내는 방법만 걱정하면 됩니다.

인덱스로 이동합니다.html 파일.Firebase를 가져왔습니다.

<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-messaging.js"></script>

javascript

Firebase로 이동합니다.com 계정을 만들고 없으면.

Firebase 콘솔에 들어가면 프로젝트 설정으로 이동합니다(프로젝트가 없으면 그곳에서 프로젝트를 만듭니다.)

은 프로젝트 설정의 일반 탭 아래에서 아래로 스크롤하여 Firebase SDK 코드 세그먼트를 찾습니다(아직 없으면 응용 프로그램을 추가해야 하는 새 프로젝트를 만들었음을 의미합니다. 어떤 식으로든 SDK 코드 세그먼트가 있는 동일한 위치에서 완성할 수 있습니다. 일반 탭 아래에서).안전한 곳에 복사/붙여넣습니다.코드 세그먼트는 다음과 같이 해야 한다.

인덱스로 이동합니다.js 파일과 전역 변수를 설명한 후에 다음 내용을 복사/붙여넣습니다.프로젝트의 사용자 정의 코드 - 4단계의 코드 세션으로 대체합니다.

const config = {
  apiKey: "XXXXXXXXXXXXXXX",
  authDomain: "XXXXXXXXXXXXXXX",
  databaseURL: "XXXXXXXXXXXXXXX",
  projectId: "XXXXXXXXXXXXXXX",
  storageBucket: "XXXXXXXXXXXXXXX",
  messagingSenderId: "XXXXXXXXXXXXXXX",
  appId: "XXXXXXXXXXXXXXX",
  measurementId: "XXXXXXXXXXXXXXX"
};

javascript

이후 - Firebase 실례를 초기화합니다.

firebase.initializeApp(config);

, 그리고 messaging이라는 상수를 만들고 이를 Firebase 메시지 서비스로 설정합니다.

const messaging = firebase.messaging();

Firebase cloud messaging에서 권한을 요청하는 시간입니다.일단 우리가 엄지손가락을 세우면, 그들은 우리에게 영패를 약속할 것이다.

messaging
  .requestPermission()
  .then(() => {
    message.innerHTML = "Notifications allowed";
    return messaging.getToken();
  })
  .then(token => {
    tokenString.innerHTML = "Token Is : " + token;
  })
  .catch(err => {
    errorMessage.innerHTML = errorMessage.innerHTML + "; " + err;
    console.log("No permission to send push", err);
  });

그렇다면 우리는 messaging.onMessage() 방법을 사용할 것이다.이것은 현재 페이지를 보고 있는 모든 사용자의 데이터와 알림의 유효한 하중을 수신하는 데 사용됩니다.

이를 위해 다음 코드를 추가했습니다.

messaging.onMessage(payload => {
  console.log("Message received. ", payload);
  const { title, ...options } = payload.notification;
});

Firebase 메시지 소프트웨어를 주의하십시오.js 파일.Firebase SDK에서 이 파일 이름을 검색합니다.파일은 항목의 루트 디렉터리에 있어야 합니다.Firebase SDK는 백그라운드에서 마력을 발휘하여 파일을 서비스 종사자로 등록합니다.

은 Firebase 메시지 소프트웨어에 있습니다.js, messagingSenderId를 전송하여 Firebase 응용 프로그램을 초기화합니다.다음 그림과 같이 보낸 사람 ID는 항목 설정에서 찾을 수 있습니다.

firebase.initializeApp({
  messagingSenderId: "XXXXXXX"
});

은 백그라운드 메시지를 처리할 수 있도록 Firebase 메시지 전달의 실례를 검색합니다.

const messaging = firebase.messaging();

javascript

백그라운드 메시지 프로세서 (페이지가 백그라운드에 있을 때 이 프로세서를 호출합니다)

messaging.setBackgroundMessageHandler(payload => {
  const notification = JSON.parse(payload.data.notification);
  const notificationTitle = notification.title;
  const notificationOptions = {
    body: notification.body
  };
  //Show the notification :)
  return self.registration.showNotification(
    notificationTitle,
    notificationOptions
  );
});

테스트 알림

은 모든 http server을 사용하여 응용 프로그램을 실행합니다.

은 클라우드 메시지 전달 설정(Firebase Console > Project Settings의 옵션 카드)에서 서버 키를 복사합니다.

만약에 Postman http 클라이언트가 있다면 다음과 같이 하십시오.

게시물 URL: *https://fcm.googleapis.com/fcm/send*
제목:
컨텐츠 유형 - 응용 프로그램/json
권한 부여 - 키 = 서버 _ 키
본문:

{
    "notification": {
        "title": "Testing Notification!",
        "body": "Firebase is awesome",
        "click_action": "http://127.0.0.1:5501/index.html",
        "icon": "http://the-link-to-image/icon.png"
    },
    "to": "YOUR TOKEN GOES HERE"
}

그런 다음 보내기 버튼을 클릭합니다.이 때, 만약 우리의 응용 프로그램이 프론트 데스크톱에 있다면, 우리는 콘솔에서 보내는 메시지를 볼 수 있습니다. - messaging.onMessage으로 처리됩니다.
그러나 백그라운드에 있으면 서비스 종사자 messaging.setBackgroundMessageHandler이 처리합니다.

Firebase나 다른 위탁 관리 공급업체에 배치하여 실제 장치에서 응용 프로그램을 테스트합니다.Firebase에서 응용 프로그램을 호스팅하려면 확인하십시오.
다음 강좌에서 구독 알림을 성공적으로 구독하고 Firebase 컨트롤러로 푸시하는 방법을 보여 드리겠습니다.
이Dot유한공사는 미디어 흐름과 실험실 흐름 두 가지를 포함하는 컨설팅 회사입니다.이런 점 매체는 개발자에게 웹 플랫폼의 최신 진전을 이해하게 하는 것을 책임진다.이 Dot 실험실은 지도와 교육 등 방법을 사용하여 팀에게 네트워크 플랫폼 전문 지식을 제공한다.