【サーバ機能 x ハイブリッドアプリ】プッシュ通知機能を作るサンプル


Monaca x NIFTY Cloud mobile backend プッシュ通知サンプル

Overview

元の記事:リンク

Monacaを用いて作ったアプリとmobile backendを連携して、デバイストークンの登録を行い、プッシュ通知機能を簡単に実装するサンプルコードとなります。
* HTML/CSS/JavaScriptでマルチプラットフォーム(iOS/Android/Windowsなど)にアプリを開発できる統合開発環境Monaca
* スマホアプリのサーバ側機能(プッシュ通知、会員管理、DBなど)をサーバ開発不要で実装できるNIFTY Cloud mobile backend

Demo

  • 登録成功画面

  • ダッシュボードでの確認

Requirement

Installation


キーをコピーし、追記します。

www/js/ncmb_push_start.jsにてsenderId設定を行います。

Description

  • コードの説明

File: www/js/app.js

  • 初期化設定
var appKey    = "YOUR_APP_KEY";
var clientKey = "YOUR_CLIENT_KEY";
var senderId  = "YOUR_ANDROID_SENDERID";
var ncmb = new NCMB(appKey,clientKey);

上記のコードでアプリケーションキーとクライアントキーを指定し、
NCMB(appKey, clientKey) でmBaaSサーバと連携を行います。
Android端末の場合、Android senderIDも追記してください。

  • デバイストークン登録
document.addEventListener("deviceready", function()
{
   ・・・
    // デバイストークンを取得してinstallation登録が行われます
    // ※ aplication_key,client_keyはニフティクラウドmobile backendから発行されたkeyに置き換えてください
    // ※ sender_idは【GCMとの連携に必要な準備】で作成したProjectのProject Numberを入力してください
    window.NCMB.monaca.setDeviceToken(appKey, clientKey, senderId);
    // 開封通知登録の設定
    // trueを設定すると、開封通知を行う
    window.NCMB.monaca.setReceiptStatus(true);
},false);
  • デバイストークンのほかに、住所や年齢などのカスタマイズ値を追加する場合は、以下のように登録を行います。
function startInstallationRegistration() {
    // 登録されたinstallationのobjectIdを取得します。
    window.NCMB.monaca.getInstallationId(
        function(id) {
            var place = document.getElementById("place").value;
            var age = document.getElementById("age").value;
            //サーバーへの更新実施
            ncmb.Installation.fetchById(id)
                 .then(function(installation){
                    ////端末のPlaceの値を設定
                    installation.set("Place", place);
                    ////端末のAgeの値を設定
                    installation.set("Age", age);
                    return installation.update();
                  })
                 .then(function(installation){
                    // 更新後の処理
                    alert("登録完了");
                  })
                 .catch(function(err){
                    // エラー処理
                    alert("エラー発生");
                  });
        }
    );
}

Usage

サンプルコードをカスタマイズすることで、様々な機能を実装できます!
データ保存・データ検索・会員管理・プッシュ通知などの機能を実装したい場合には、
以下のドキュメントもご参考ください。

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

License

  • MITライセンス
  • NIFTY Cloud mobile backendのJavascript SDKのライセンス