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

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

Cordovaアプリにプッシュ通知を実装する

ニフクラ mobile backendはCordovaをベースとした開発環境を提供するMonacaと連携しています。元々Monaca向けにプッシュ通知プラグインを提供していましたが、先日オープンソースとして公開しました。

そこで今回はこのプラグインを使って、素のCordovaアプリにプッシュ通知を送信してみたいと思います。

前提として、Node.jsがインストール済みであることとします。

Cordovaコマンドでプロジェクト作成

まずCordovaプロジェクトを作成します。そして、サポートするプラットフォームをインストールします。

$ cordova create HelloNCMB jp.moongift.hello
$ HelloNCMB
$ cordova platform add ios
$ cordova platform add android

今回はiOS向けにプッシュ通知を送信します。

プラグインをインストールする

プラグインのインストールはcordovaコマンドで行います。

$ cordova plugin add https://github.com/NIFTYCloud-mbaas/monaca_push_plugin.git

これでiOS/Android両方向けにプラグインがインストールされます。

iOSの証明書を取得する

細かい手順は省略しますが、iOS Member Centerにてプッシュ通知の証明書を取得してください。プロジェクトのドメイン(ここではjp.moongift.hello)とアプリのIDを合わせておいてください。

JavaScriptファイルの修正

次に www/js/index.js を編集します。YOUR_APPLICATION_KEY、YOUR_CLIENT_KEYはそれぞれ読み替えてください。

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

  // Set callback for push notification data.
  NCMB.monaca.setHandler(function(jsonData){
      alert("callback :::" + JSON.stringify(jsonData));
  });

  // Get installation ID.
  NCMB.monaca.getInstallationId(function(installationId){
      // something
  });

プッシュ通知を開くと、 NCMB.monaca.setHandler が呼ばれます。また、プッシュ通知を登録しているかどうかで処理判定を行いたい場合は NCMB.monaca.getInstallationId を定期的に実行してください。JavaScriptは非同期処理なので、一度の処理だけでは取得できない可能性があります。

NCMB.monaca.setDeviceTokenはプッシュ通知を受信するかどうかのダイアログを出し、さらにNCMBへのデバイストークン登録までを処理してくれます。

ここまで行ってアプリを起動すると、プッシュ通知の確認ダイアログが出ますので、OKを押してください。

プッシュ通知を送信する

プッシュ通知を送信する場合はニフティクラウド mobile backendの管理画面にて設定が必要です。

プッシュ通知を有効にする

最初はプッシュ通知が有効になっていませんので、許可してください。

iOS用の証明書を登録する

iOS Member Centerで作成した証明書をエクスポートして、p12ファイルをアップロードします。詳しくはプッシュ通知 (iOS) : 基本的な使い方 | ニフティクラウド mobile backendを参考にしてください。

これで準備完了です。

プッシュ通知はメニューから辿って作成します。

メッセージを入力して、登録します。

受信する

少し待つとプッシュ通知が届くはずです。

開くとデータとして渡したPayloadも取得できているのが分かるはずです。


プッシュ通知を送信する流れは慣れてしまえばあっという間にできあがります。さらにデバイストークンのデータに追加情報を持たせることで、ユーザやグループ、興味のある情報で絞り込んだりすることもできます。

ぜひプッシュ通知を使いこなしてアプリを活性化してください!