Cordovaアプリでプッシュ通知を受信してみる - ニフクラ mobile backend（mBaaS）お役立ちブログ

ニフティクラウド mobile backendではMonacaと連携しており、Monacaアプリから専用プラグインを使って簡単にプッシュ通知受信のためのトークン設定を行ったり、プッシュ通知を受け取ることができます。

今回はMonacaもベースにしているCordovaアプリに対してプッシュ通知設定と受信を行ってみました。なお、JavaScript SDKが正式にサポートしている訳ではないので、一部強引なところや課題もありますのでご注意ください。

必要なもの
セットアップ
プラグインのインストール
JavaScript ライブラリの設定
www/index.html の修正
www/js/index.js の修正
Xcodeを修正する
実機で実行する
プッシュ通知を送ってみる
問題点
さいごに

必要なもの

ニフティクラウド mobile backendのアカウント（無料）
PC（今回はiOS向けなのでMac OSXのみが対象）
Node.js/npm
iOS Dev Centerで作成できる証明書（プッシュ通知にチェックするのを忘れずに）

ニフティクラウド mobile backendのアカウントはこちらから取得できます（無料です）。アプリを新規作成して、アプリケーションキーとクライアントキーを取得してください。流れは以下の動画をご覧ください。

www.youtube.com

セットアップ

まずはCordova開発環境を整えます。Node.jsおよびnpmはインストール済みとします。

npm install cordova -g

プッシュ通知を受け取るためには実機にインストールする必要がありますので必要なライブラリをインストールします。

npm install -g ios-deploy

プロジェクトを作成します。アプリID部分は後でプッシュ通知設定で使うので注意してください。

cordova create push_ncmb jp.moongift.push.ncmb PushNCMB

iOS用の設定をします。

cd push_ncmb/
cordova platform add ios

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

続けて利用するプラグインをインストールしていきます。まずはプッシュ通知のプラグインです。

cordova plugin add phonegap-plugin-push

続いてアプリ名などを取得するプラグインです。

cordova plugin add cordova-plugin-app-version

さらにデバイス情報を取得するプラグインをインストールします。

cordova plugin add org.apache.cordova.device

また、タイムゾーンを Asia/Tokyo のようにインストールするのですが、このためのライブラリをpellepim / jsTimezoneDetect — Bitbucketよりダウンロードして www/js 以下に配置します。

JavaScript ライブラリの設定

JavaScriptライブラリはBowerでインストールが可能です。

npm install bower -g

を実行した後、

bower init
bower install ncmb --save

でインストールできます。ファイルは www/js 以下に配置されます。

www/index.html の修正

HTMLファイルでライブラリを読み込むように修正します。

<script type="text/javascript" src="cordova.js"></script>
<!-- 以下2行を追加 -->
<script type="text/javascript" src="js/jstz-1.0.4.min.js"></script>
<script type="text/javascript" src="js/ncmb.min.js"></script>
<!-- 追加ここまで  -->
<script type="text/javascript" src="js/index.js"></script>

また、アクセスできるURLの制限を取り除きます。実際には mb.cloud.nifty.com だけ通信可能とするのが良いでしょう。

  <!-- コメントアウト
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
  -->

www/js/index.js の修正

続けてJavaScriptを修正します。まず最初にmBaaSの初期化を行います。アプリケーションキーとクライアントキーはそれぞれmBaaSの管理画面から取得できるものに置き換えてください。

var application_key = "YOUR_APPLICATION_KEY";
var client_key = "YOUR_CLIENT_KEY";
var ncmb = new NCMB(application_key, client_key);

そしてDeviceReadyのイベント処理時に以下を追加します。まずデバイス情報を組み立てます。アプリのバージョンおよびアプリ名はコールバック方式になっていますが、殆ど時間もかかりませんので処理を続行しても問題ないかと思います。

var deviceInfo = {};
// SDKのバージョンは決め打ちになってしまいます。
deviceInfo.sdkVersion = "2.0.2";

// タイムゾーンの処理です。
var tz = jstz.determine();
deviceInfo.timeZone = tz.name(); // Asia/Tokyo といった文字列が入ります

// アプリのバージョンを取得します。
cordova.getAppVersion.getVersionNumber(function(data) {
  deviceInfo.appVersion = data;
});

// アプリ名を取得します。
cordova.getAppVersion.getAppName(function(data) {
  deviceInfo.applicationName = data;
});

// デバイスの種類を取得します。iosまたはandroidと入ります。
deviceInfo.deviceType = device.platform.toLowerCase();

続いてプッシュ通知オブジェクトを作ります。senderIDはAndroid用で、Google Developer Consoleで取得できるものを指定してください。

var push = PushNotification.init({ "android": {"senderID": "12345679"},
                                   "ios": {"alert": "true", "badge": "true", "sound": "true"}, "windows": {} } );

initを実行したタイミングで通知を受け取るかどうかの確認ダイアログが出ます。そして、OKを押すと下記のregistrationというイベントが実行されます。

ここで行っているのは取得されたデバイストークンdeviceInfoに当てはめ、その後mBaaSへの保存処理を行っています。なお、JavaScript SDKではデバイストークンの保存を行う専用のオブジェクトはないため、データストアを直接扱っています。 installation.className を無理矢理変更しているのがコツです。

push.on('registration', function(data) {
  deviceInfo.deviceToken = data.registrationId;
  var Installation = ncmb.DataStore("installations");
  var installation = new Installation(deviceInfo);
  installation.className = "/installations";
  installation.save().then(function() {
    alert("DeviceToken saved successfull");
  }).catch(function(err) {
    alert(err);
  });
});

これで処理は完成です。

Xcodeを修正する

実際にプッシュ通知を送る前に、CordovaプロジェクトのXcodeを開きます。そして Capabilities のプッシュ通知を有効にする必要があります。

実機で実行する

プッシュ通知は実機で確認する必要がありますのでデプロイしてみます。

cordova run ios --device

この処理を実行すると、アプリが立ち上がって確認ダイアログが表示されます。そしてプッシュ通知を許可するとデバイストークンがmBaaSの管理画面に保存されるはずです。

プッシュ通知を送ってみる

ではプッシュ通知を送ってみましょう。まずmBaaSの管理画面にてプッシュ通知の証明書をアップロードします。これはキーチェーンアクセスに保存されている鍵を、公開鍵だけを指定してエクスポートすればOKです。

また、設定画面にてプッシュ通知を許可します。

プッシュ通知は管理画面のプッシュ通知メニューにて作成ができます。iOSの場合はタイトルはないので本文だけを記述します。他にも様々な条件を指定することができます。

作成が完了すると、数分後にプッシュ通知がデバイスに配信されます。

なお、受信した時には notification というイベントが実行されます。

push.on('notification', function(data) {
  alert("Message:" + data.message);
  // data.message,
  // data.title,
  // data.count,
  // data.sound,
  // data.image,
  // data.additionalData
});