FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

mBaaSを使ってCordovaアプリにもプッシュ通知を簡単に実装しよう(Android編)

Monacaアプリにプッシュ通知機能を組み込むNIFTYCloud-mbaas/monaca_push_plugin: Monaca push pluginですが、これはオープンソースとして公開しており、MonacaのみならずCordovaアプリに対してもプッシュ通知機能が組み込めるようになっています。

以前はiOS向けの組み込み方を紹介しましたので、今回はAndroid向けの組み込み方を紹介します。

プラグインのインストール

プラグインはcordovaコマンドを使って行います。

cordova plugin install git@github.com:NIFTYCloud-mbaas/monaca_push_plugin.git

Sender IDを入手する

次にAndroid特有のSender IDとキーを入手します。Google Developers Consoleへログインします。そしてプロジェクトを作成した後、プロジェクトの設定より確認できます。Project Numberというのがそうです。

さらにプロジェクトに対してGoogle Cloud Messaging for Androidを有効にします。アプリを登録すると google-services.json というファイルがダウンロードされるので、それをCordovaプロジェクトのルート(wwwがあるフォルダ)に配置してください。さらに秘密鍵をダウンロードしてmBaaSの管理画面に設定します。その手順はドキュメント : google-services.jsonとFirebase秘密鍵の設定方法についてを参考にしてください。管理画面では、プッシュ通知の許可を許可するに設定するのを忘れないでください。

アプリに組み込む

アプリのコードはとても簡単です。YOUR_APPLICATION_KEY、CLIENT_KEYはそれぞれ読み替えてください。

document.addEventListener("deviceready", function(){
  // プッシュ通知受信時のコールバックを登録します
  window.NCMB.monaca.setHandler(function(jsonData){
    // 送信時に指定したJSONが引数として渡されます
    alert("callback :::" + JSON.stringify(jsonData));
  });

  window.NCMB.monaca.setDeviceToken(
       "YOUR_APPLICATION_KEY",
       "YOUR_CLIENT_KEY",
       () => { /* 登録成功時の処理*/ },
       (err) => { /* 登録失敗時の処理 */ }
  );

  // 開封通知登録の設定
  // trueを設定すると、開封通知を行う
  window.NCMB.monaca.setReceiptStatus(true);

}, false);

後はCordovaでアプリをコンパイルして実行すれば、デバイストークンがmBaaSに登録されます。そして、管理画面にてプッシュ通知を作成します。

作成後、少しするとプッシュ通知が届きます。


プッシュ通知の実装はほんの少しの時間で完了します。特にCordovaの場合は面倒な設定もなく、とても簡単に完了します。ぜひ使ってみてください!

プッシュ通知 (Monaca) : 基本的な使い方 | ニフクラ mobile backend