ニフティクラウド 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で作成できる証明書(プッシュ通知にチェックするのを忘れずに)
セットアップ
まずは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です。
また、設定画面にてプッシュ通知を許可します。
notification
というイベントが実行されます。
push.on('notification', function(data) { alert("Message:" + data.message); // data.message, // data.title, // data.count, // data.sound, // data.image, // data.additionalData });
問題点
既存の問題点として、デバイストークンの検索には対応していません。そのため二度目の起動時に409エラー(コンフリクトエラー)が発生してしまいます。単にエラーであればまだ良いのですが、更新や削除ができないのは難点です。重複登録のチェックは別途クラスを作ることで回避できるでしょう。
さいごに
いかがでしょうか。Cordovaアプリであっても既存のライブラリを組み合わせてmBaaSでプッシュ通知を送ることができます。ほんの30分もあればアプリにプッシュ通知を組み込んでリリースさせることができるでしょう。ぜひお試しください!