firebase 푸시 알림 adventcalender 2019-12-07

푸시 알림

웹 서비스 인 기능이지만 포트폴리오에 푸시 알림
샘플 데모 같은 것이 없다고 생각하고 만들기로 결정했습니다.

시스템 구성

프론트 페이지 firebase
백엔드 google cloud platform
SDK 버전 8.6.3

이번 완성 이미지도

이번에는 GCP 내에 사이트를 배치하고 GCP 기능으로 전송하도록했습니다.

최종 아티팩트 URL

구현 설명

기본으로는 다음 공식 사이트를 보면서 진행합니다.

완성형

디렉토리 구성
이번에는 백그라운드에서 알림을 받는 부분과 표시하는 페이지를 준비했습니다.

사이트 페이지

       // firebase.messaging()を呼び出すときは、appIdを設定しておくこと
       const firebaseConfig ={
        apiKey: "AIzaSyBKRl.....Y9rrbvMBkA",
        authDomain: "PROJECT_ID.firebaseapp.com",
        projectId: "PROJECT_ID",
        storageBucket: "....",
        messagingSenderId: ".....",
        appId: "....",
        measurementId: "......"
      };
      // firebaseのsdkを使えるように初期化
      firebase.initializeApp(firebaseConfig);

      // Retrieve an instance of Firebase Messaging so that it can handle background
      const messaging = firebase.messaging();
      // 送信先としてのトークン設定
      messaging.getToken({ vapidKey: 'BL9LaayZOeYBIArkEUkXi8sH8SWlLZ3_C4sGFLG91n_BEUyhR5LcHU3fqjYT8ADeHJE7cgpEAT2QD7bKzhraFvs' }).then((currentToken) => {
        if (currentToken) {
          // Send the token to your server and update the UI if necessary
          // ...
        } else {
          // Show permission request UI
          console.log('No registration token available. Request permission to generate one.');
          // ...
        }
      }).catch((err) => {
        console.log('An error occurred while retrieving token. ', err);
        // ...
      });

firebase-messaging-sw.js

  // firebase sdk import index.htmlとバージョンをそろえる
  importScripts('https://www.gstatic.com/firebasejs/8.6.3/firebase-app.js');
  importScripts('https://www.gstatic.com/firebasejs/8.6.3/firebase-messaging.js');

  const firebaseConfig ={
        apiKey: "AIzaSyBKRl.....Y9rrbvMBkA",
        authDomain: "PROJECT_ID.firebaseapp.com",
        projectId: "PROJECT_ID",
        storageBucket: "....",
        messagingSenderId: ".....",
        appId: "....",
        measurementId: "......"
  };
  firebase.initializeApp(firebaseConfig);

  // Retrieve an instance of Firebase Messaging so that it can handle background
  const messaging = firebase.messaging();

  // Get registration token. Initially this makes a network call, once retrieved
  // サイトを閉じているときにpush通知を受信
  messaging.onBackgroundMessage((payload) => {
      console.log('[firebase-messaging-sw.js] Received background message ', payload);
      // Customize notification here
      const notificationTitle = 'advent 通知チャレンジ完了';
      const notificationOptions = {
            body: '',
            icon: '/firebase-logo.png'
      };

      self.registration.showNotification(notificationTitle,
      notificationOptions);
  });

JavaScript 측의 알림 수신 부분

실제로 게시해 보았습니다.

구현했기 때문에 cloud messaging에서 게시물을 시도합니다.

감상

이번에는 실제로 cloudmessaging처럼 투고한 사이트로 통지가 나오는 곳까지 시도해도 좋았다.

Web디자인을 좀 더 정돈하면, 제품의 체험까지는 서버의 구현은 없이도 할 수 있을 것 같다는 인상.

이용자료

공식의 다음 URL에서 완성된 이미지의 아이콘을 이용했습니다.