Monaca × mobile backend でプッシュ通知を無料で送信できます！ - ニフクラ mobile backend（mBaaS）お役立ちブログ

HTML5を使ってiOS/Androidなどに対応したスマートフォンアプリを開発できるMonacaにてmobile backendを使ったプッシュ通知を行うプラグインが標準提供されるようになりました！これにより、これまでmobile backendのプッシュ通知を行うにはCordovaプラグインの導入が必要で、そのためにMonacaの有料プランが必要でしたが、無料ユーザであってもプッシュ通知が利用できるようになります。

使い方

使い方はとても簡単で、Monaca IDEにおいて設定メニューのCordovaプラグインの管理を選択します。

各種プラグインが表示されますので、その中のNiftyMBを有効にします。

これで準備は完了です。

コード

実際に使う際にはユーザの許諾を得る必要があります。そこで次のようなコードを書きます。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
  console.log("PhoneGap is ready");
  // デバイストークンを取得してinstallation登録
  //  * application_key, client_keyはmobile backendから発行されたキーに置き換える
  //  * sender_idはGCMとの連携に必要な準備で取得したIDに置き換える
  window.NCMB.monaca.setDeviceToken(
    "#####application_key#####",
    "#####client_key#####",
    "#####sender_id#####"
  );
}

アプリケーションキーとクライアントキーはmobile backendの管理画面より取得してください。

注意点としては、Monacaデバッガーを使っている場合はプッシュ通知のテストはできません。ビルドメニューよりiOSアプリのビルドまたはAndroidアプリのビルドを選択してください。アプリのビルドの際には証明書のアップロードやキーストアの設定が必要になります。

アプリ立ち上げ

無事設定が終わっていると、初回アプリの起動時にプッシュ通知の確認ダイアログが出ます。ここで許可すると、管理画面にデバイストークンが登録されます。

後は管理画面からプッシュ通知の登録を行えばデバイスで受信が確認できるはずです。

プッシュ通知の受信

プッシュ通知を受信してアプリを開くと、次のハンドラーが呼ばれます。

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

このように送信したJSONデータが受け取れますので、画面を切り替えるような使い方もできます。

Monaca×mobile backendを活かすためにもぜひプッシュ通知をご利用ください！

Monaca - HTML5ハイブリッドアプリでアプリ開発を加速します