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

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

Monacaでリッチプッシュを使ってみる

プッシュ通知は主に3つの種類があります。

  1. 起動を促す
  2. 新しく発生したイベントを知らせる
  3. 新しいキャンペーンを知らせる

起動を促す場合、アプリを起動した時に表示するのは標準の画面になるでしょう。これはしばらく起動していなかったユーザに対して有効です。

2番目のイベントについてはアクティブなユーザに対して、ディープリンクを含めたスキーマを送信します。そして、プッシュ通知を開いた時にはそのイベントに即した画面を開きます。例えばメールを受信した時のプッシュ通知であれば、そのメールを開くべきですし、チャットアプリの新規メッセージであればチャット画面を開くべきです。この時にはユーザにいかにムダな作業をさせずに済ませるかが大事になります。

最後の新しいキャンペーンを知らせるのは主にアクティブなユーザ向けに、アプリ内で発生する新しいイベントをお知らせします。この時には単にアプリの画面を表示するのではなく、より詳細な内容を伝える画面が必要になります。

そこで使えるのがリッチプッシュです。

リッチプッシュとは?

一言で言うとリッチプッシュはWebViewを使って指定したURLを開くプッシュ通知です。アプリへの通知ではメッセージの他、アプリ内で使えるデータ(Payload)を送信できます。そのデータで処理判定を行うことで特定のビューを開いたり、ポイントをゲットしたりする仕組みが使えます。リッチプッシュ通知をその機能をより手軽に使えるようにしたものです。

通常のプッシュ通知の場合(上の矢印の流れ)はアプリを起動して完了しますが、リッチプッシュ通知(下の矢印の流れ)ではWebViewをモーダルで開きます。WebViewで開くURLは自由に設定できますので、自社のWebサイト内にあるイベント告知を表示したり、新機能紹介ページを開くこともできます。アイディア次第で様々な利用ができるはずです。

Monacaでの使い方

Monacaアプリでの使い方は簡単です。Cordovaプラグインの管理からNiftyと検索して、ncmb-push-monaca-pluginを追加してください。

次にJavaScriptを次のように記述します。

document.addEventListener("deviceready", onDeviceReady, false);

var onDeviceReady = function() {
  // プッシュ通知受信時のコールバックを登録します
  window.NCMB.monaca.setHandler (
      function(jsonData){
        // payloadを使って処理が可能です
      }
  );

  window.NCMB.monaca.setDeviceToken(
      "YOUR_APPLICATION_KEY",
      "YOUR_CLIENT_KEY",
      "YOUR_SENDER_ID",
      successCallback,
      errorCallback
  );
}

var successCallback = function () {
    //端末登録後の処理
   alert('success');
};

var errorCallback = function (err) {
    //端末登録でエラーが発生した場合の処理
    alert(err);
};

window.NCMB.monaca.setDeviceToken 処理がうまくいけば、データストアのInstallationクラスにデバイストークンが設定されます。

プッシュ通知を送信する

管理画面からプッシュ通知を作成します。その際、URL欄にリッチプッシュとして開くURLを設定します。

後はいつも通りプッシュ通知を送信するだけです。Monacaアプリに届いたプッシュ通知を開くと、全画面でURLが表示されます。


リッチプッシュ通知は元々プラグインに組み込まれていますので、準備することなく実現できます。アプリの運営を続けていく中でお知らせなどをHTMLで送りたいといったニーズが出ることはよくあります。ぜひリッチプッシュを使って効果的なプッシュ通知を実現してください。