lighthouse.log

lighthouse.log

Angular + Firebase + PWAでPush通知機能を実装する（Firebase Functions側）

2018-12-23

Push 機能実装：Firebase Functions 側

Angular + Firebase + PWA で Push 通知機能を実装する（アプリ側） に引き続き、Firebase Functions 側の実装です。

Firebase の functions を初期化し、関数を作成する

firebase init functions

※ 作成の詳細手順については、こちらを見てください！

初期化すると、以下の構成になります！

myproject
  +- .firebaserc    # Hidden file that helps you quickly switch between
  |                 # projects with `firebase use`
  |
  +- firebase.json  # Describes properties for your project
  |
  +- functions/     # Directory containing all your functions code
      |
      +- package.json  # npm package file describing your Cloud Functions code.
      |
      +- tsconfig.json # Config file containing compiler options.
      |
      +- tslint.json   # Optional file containing rules for TypeScript linting.
      |
      +- src/     # Directory containing TypeScript source
      |   |
      |   +- index.ts     # main source file for your Cloud Functions code
      |
      +- lib/
          |
          +- index.js     # JavaScript output from TypeScript source.
          |
          +- index.js.map # Sourcemap file for TypeScript source.

ここからは、functions/src/index.ts を修正していきますー！

index.ts を修正

DB に更新がある度に、トリガーによって onCreate() が実行されます。

また、DB に保存されている FCM トークンを取得し、メッセージデータを用いてユーザーに送信するペイロードが作られます。

functions/src/index.ts
import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
admin.initializeApp();

export const fcmSend = functions.database
  .ref('') // ←ここは、各自のDB構造に合わせて定義してください（例：/article/{articleId}）
  .onCreate((snapshot, context) => {
    const articleInfo = snapshot.val();

    const payload = {
      notification: {
        title: '', // Pushメッセージのタイトル
        body: articleInfo.title + 'が登録されました 🎉', // Pushメッセージ本文
        clickAction: '', // Push通知をタップした時に、飛ばすURLを指定
        icon: '', // Push通知で使うロゴ
      },
    };

    admin
      .database()
      .ref('/fcmTokens/')
      .once('value')
      .then((token) => {
        const tokenList = token.val() || '';

        Object.keys(tokenList).forEach(function(key, index) {
          console.log(tokenList[key]);
          admin
            .messaging()
            .sendToDevice(tokenList[key], payload)
            .then((res) => {
              console.log('Sent Successfully', res);
            })
            .catch((err) => {
              console.log(err);
            });
        });
      })
      .catch((err) => {
        console.log(err);
      });
  });

これで実装完了です！

実際に、こんな感じで Push 通知が飛んできます。

今回は、特定のユーザー一人一人に Push 通知を送信していますが、

複数ユーザーにメッセージを送信することもできるらしいので、こちらもぜひ参考にしてください！

まとめ

Firebase 本当最高！👍👍👍

おまけ

今回の実装を含めた個人プロジェクトを開発し、運用しています。

このテーマで、FRONTEND CONFERENCE FUKUOKA2018でお話させていただきました。

スライドなどを公開してますので、興味ある方は是非見てください！

参考 URL