FirebaseでMonacaアプリのPush通知を実装する。(後編)

前回に引き続き、Firebaseを使ったプッシュ通知の実装を行います。

FirebaseでMonacaアプリのPush通知を実装する。(前編)

2017.03.06

今回は実際にpush通知を端末に送ることと、push通知受信後の挙動も制御してみました。

前回の記事:https://utage.headwaters.co.jp/blog/?p=6406

目次

  1. 実装【Monaca】
  2. FireBase送信画面【Firebase】
  3. 受信【端末】
  4. モーダル表示(応用)【Monaca x Firebase】

1.実装【Monaca】

4

Android端末でpush通知を受信できるよう準備します。

・下記のソースを記述

<script>
    ons.ready(function() {
      /**
       * [プッシュ通知設定]
       */
      window.FirebasePlugin.grantPermission();
      window.FirebasePlugin.onNotificationOpen(function(notification){
        console.log(notification);
      });
    });
</script>
001

・設定>プラグインの管理をクリック

004

・Cordovaプラグインのインポートをクリック

005

・パッケージ名を入力「cordova-plugin-firebase

006

・「cordova-plugin-firebase」のプラグインを追加

007

今回追加したplaginについて

https://www.npmjs.com/package/cordova-plugin-firebase

・google-services.jsonファイルをプロジェクトルートに挿入

003

*ドラック&ドロップで入ります。

2.FireBase送信画面【Firebase】

4

Firebaseからpush通知を送信します。

・Firebaseにアクセスして、プロジェクトを選択

Firebase:https://console.firebase.google.com/?pli=1

021

・Notificationsを選択し、アプリケージョンを選択

022

・最初のメッセージを送信をクリック

023

・メッセージとターゲットを入力してメッセージを送信をクリック

024

・内容確認して、送信をクリック

025

・送信完了

026

3.受信【端末】

5

Android端末で通知を受信します。

・端末で受信できました。

031-min

4.モーダル表示(応用)【Firebase x Monaca】

4X 4

push通知受信後の挙動を操作します。

・Monacaで下記の通りに修正

<script>
  onDeviceReady(){
    window.FirebasePlugin.grantPermission();
    window.FirebasePlugin.setUserProperty('company_code', '2');
    window.FirebasePlugin.onNotificationOpen( (notification) => {
      ons.notification.confirm(notification.message,{
        title: notification.title,
        buttonLabels:["いいえ","はい"],
        callback: (age) => {
          if(age === 1){
            window.open(notification.url, '_system');
          }
        }
      });
    }, (error) => {
      console.error(error);
    });
  }
</script>
041

・Firebaseから下記のようにキーとバリューを入力

044

・push通知 → モーダル表示 → Google

push通知からアプリ起動させて、モーダル表示をさせました。

さらに、モダールで「はい」をクリックを押して任意のURLページに遷移させることができました。

031-minのコピー

 

このように簡単にpush通知が実装できます。

ABOUTこの記事をかいた人

主に、WEBサイトやスマホアプリの構築に従事。2016年、株式会社ヘッドウォータース入社。/ UI / UX / Angular / Monaca / React / Firebase /