次の記事は、自動翻訳技術を使用して自動的に翻訳されました。 コンピュータプログラムによって翻訳されているため、誤りがある場合があります。Adobeは、世界中の多くのユーザーがより多くの記事を利用できるように、翻訳版を提供しています。
翻訳の品質を評価してください。Translation by SYSTRAN


プッシュ通知

PhoneGap DeveloperアプリPhoneGap CLIをペアリングして使用すると、プラットフォームSDKのインストールやデバイスの登録、コードのコンパイルを行わなくても、デバイス上で直ちにアプリをプレビューすることができます。 PhoneGap CLIは、プロジェクトをホストする小さなWebサーバーを起動し、モバイルデバイスで実行されているPhoneGap Developer appから、ペアにするサーバーアドレスを返します。

PhoneGap CLI 6.2.0および PhoneGap Developer App Release 1.6.2以降、iOS用の Google Cloud Messaging(GCM)プロジェクトや Apple Push Notification Service(APN)認定を設定する必要なく、プッシュ通知機能をテストできます。

続行する前に、同じネットワーク上でデバイスとコンピューターが実行されていることを再度確認してください。

デフォルトのPhoneGapプッシュプロジェクトを作成

  1. ターミナルから次のコマンドを入力します。

    $ phonegap create myApp --template push

    これにより、myAppという名前のフォルダーが現在のパスの場所に作成され、デフォルトのプロジェクト名はHello worldで、idはcom.phonegap.helloworldとなります。

    以下のように修飾パラメーターとして別の名前とIDを指定すると、デフォルトのHello Worldコードプロジェクトを含む独自のプロジェクトを作成することができます。

    $ phonegap create myApp --id "org.myapp.sample" --name "appSample" --template phonegap-template-push
  2. コマンドの実行後、以下のようにコンソールに出力されることを確認してください。

    Creating a new cordova project.
    
    Retrieving phonegap-template-push using npm...
  3. cdコマンドを使用して、新しいプロジェクトディレクトリに移動します。

    $ cd myApp/
  4. 次の一連のファイルおよびフォルダーが以下のように表示されることを確認してください。

    config.xml      hooks        platforms    plugins        www
  5. cd into the www folder and look around the files and subfolders in there, this is the content of your app, and the entry point is the index.html file.

     $ cd www/
    **ヒント:**ルートプロジェクトで作成された残りのファイルとフォルダーに関する詳細は、以降のガイドで説明します。 ここでは、***www***フォルダーとその内容に焦点を当てます。
  6. $ phonegap serve」と入力します。 アプリがホストされるサーバーアドレスがコンソールに出力されます(この例では192.168.1.11:3000)。

    $ phonegap serve
    [phonegap] starting app server...
    [phonegap] listening on 192.168.1.11:3000
    [phonegap]
    [phonegap] ctrl-c to stop the server
    [phonegap]
  7. 次に、PhoneGap Developer appが実行されているモバイルデバイスに移動し、メイン画面でサーバーアドレスを入力し、 Connect (ブラウザーの場合は、サーバーアドレスとして localhost:3000 )をタップします。

    PhoneGap Developer App、iOS
    **注意:** PhoneGap Developer Appの端末画面に表示されるサーバーアドレスを直接タップして、お使いのサーバーアドレスに合わせて変更します。 デフォルトで入力されている値はサンプルです。

    接続が確立され、以下のように成功したというメッセージが表示されます。 何らかのエラーが発生した場合は、デバイスとコンピューターの両方が同じネットワークに接続されていることをもう一度確認してください。 さらにヘルプが必要な場合は、問題追跡ツールPhoneGap Googleグループのリストを確認することもできます。

    デベロッパーアプリ、接続成功

    PhoneGap Developer app内で初めてアプリを実行すると 、プッシュ通知を受け取る権限を要求するアプリが次のダイアログに表示されます。

    開発者アプリ、プッシュ権限要求 ブラウザー、プッシュ権限の要求

    OK 」ボタンをクリックして、必要な権限をアプリに付与します。 アプリケーションを以降に実行しても、この権限ダイアログは表示されません。

    PhoneGap Developerアプリが接続され、モバイルアプリがロードされると、以下のようにプレビューが表示されます。

    開発者向けアプリ、プッシュ登録 ブラウザー、プッシュ登録

    PhongGap Botの下のグレー のRequesting Registration ID (登録IDを要求する)行が緑の Registered (登録済み)行に変わり、ターミナルセッションで次の内容が表示されます。

    [phonegap] [console.log] registration event: APA91bE1MmeTc92igNoi5OkDWUV
    もちろん、登録IDは違うが、写真は手に入る。

初めてのプッシュの送信

  1. iOSでテストする場合は、新しいターミナルウィンドウを開き、次のコマンドを入力します。

    MacOS:

    $ phonegap push --deviceID APA91bE1MmeTc92igNoi5OkDWUV --service apns --payload '{ "aps": { "alert": "Hello World" } }'

    Windows:

    $ phonegap push --deviceID APA91bE1MmeTc92igNoi5OkDWUV --service apns --payload "{ \"aps\": { \"alert\": \"Hello World\" } }"

    または、AndroidまたはBrowser上でテストする場合は、次のコマンドを入力します(PhoneGap CLI 6.5.0以前のreplace —service fcm with —service gcm)。

    MacOS:

    $ phonegap push --deviceID APA91bE1MmeTc92igNoi5OkDWUV --service fcm --payload '{ "data": { "title": "Hello", "message": "World"} }'

    Windows:

    $ phonegap push --deviceID APA91bE1MmeTc92igNoi5OkDWUV --service fcm --payload "{ \"data\": { \"title\": \"Hello\", \"message\": \"World\"} }"

    deviceidは、前の手順で登録イベントから受け取ったIDに置き換えます。

  2. これにより、アプリでプッシュ通知が受信されます。

    デベロッパーアプリ、プッシュを受信 ブラウザー、プッシュを受信

2番目と3番目のプッシュの送信

  1. 次に、 PhoneGap Desktop Appを最小化します

  2. iOSでテストする場合は、ターミナルウィンドウから次のコマンドを入力します。

    MacOS:

    $ phonegap push --deviceID APA91bE1MmeTc92igNoi5OkDWUV --service apns --payload '{ "aps": { "alert": "Hello World" } }'

    Windows:

    $ phonegap push --deviceID APA91bE1MmeTc92igNoi5OkDWUV --service apns --payload "{ \"aps\": { \"alert\": \"Hello World\" } }"

    または、AndroidまたはBrowser上でテストする場合は、次のコマンドを入力します(PhoneGap CLI 6.5.0以前のreplace —service fcm with —service gcm)。

    MacOS:

    $ phonegap push --deviceID APA91bE1MmeTc92igNoi5OkDWUV --service fcm --payload '{ "data": { "title": "Hello", "message": "World"} }'

    Windows:

    $ phonegap push --deviceID APA91bE1MmeTc92igNoi5OkDWUV --service fcm --payload "{ \"data\": { \"title\": \"Hello\", \"message\": \"World\"} }"

    deviceidを、以前の登録イベントから受け取ったdeviceIDに置き換えます。

  3. これにより、バックグラウンドでアプリケーションがプッシュ通知を受け取ります。

    開発者アプリ、プッシュを受け取った背景
  4. デバイスをロックします。

  5. iOSでテストする場合は、ターミナルウィンドウから次のコマンドを入力します。

    MacOS:

    $ phonegap push --deviceID APA91bE1MmeTc92igNoi5OkDWUV --service apns --payload '{ "aps": { "alert": "Hello World" } }'

    Windows:

    $ phonegap push --deviceID APA91bE1MmeTc92igNoi5OkDWUV --service apns --payload "{ \"aps\": { \"alert\": \"Hello World\" } }"

    または、AndroidまたはBrowser上でテストする場合は、次のコマンドを入力します(PhoneGap CLI 6.5.0以前のreplace —service fcm with —service gcm)。

    MacOS:

    $ phonegap push --deviceID APA91bE1MmeTc92igNoi5OkDWUV --service fcm --payload '{ "data": { "title": "Hello", "message": "World"} }'

    Windows:

    $ phonegap push --deviceID APA91bE1MmeTc92igNoi5OkDWUV --service fcm --payload "{ \"data\": { \"title\": \"Hello\", \"message\": \"World\"} }"

    deviceidを、以前の登録イベントから受け取ったdeviceIDに置き換えます。

  6. これにより、デバイスがロックされている間に、アプリがプッシュ通知を受け取ります。

    開発者アプリ、プッシュを受信したロック

プッシュの説明

次に、www/js/index.jsフ ァイルを開き 、何が起こっているのかを詳しく説明します。 プッシュ通知の登録と受信に必要なコードは、すべて onDeviceReady関数に含まれます

初期化

まず、プッシュ通知システムを初期化する必要があります。 init関数 、リモートプッシュサービスとの通信パスを設定し、登録IDを要求します。 アプリを起動するたびに、この操作を行う必要があります。 アプリを起動するたびに登録IDを要求する必要はありません。 phonegap-plugin-pushコードは、キャッシュされた登録IDを使用できる場合に十分なスマートです。

var push = PushNotification.init({
  "android": {
    "senderID": "XXXXXXXX"
  },
  "browser": {},
  "ios": {
    "sound": true,
    "vibration": true,
    "badge": true
  },
  "windows": {}
});
**注意:**`senderID`が*XXXXXXXX*に設定されている場合があります。 **PhoneGap Developer App**はこの要求を受け取り、正しい値を使用するので、問題ありません。 自分でアプリを作成する場合は、GoogleでGCMを使用するようにプロジェクトを設定する際に、「senderID」を取得する必要があります。

登録

次に、登録イベントのイベントハンドラーを設定します。 アプリがリモートプッシュサービスに正常に登録されると、イベントハンドラーが呼び出されます。 イベントハンドラーは、1つのパラメーター(1つのプロパティを含むデータオブジェクト)を使用して呼び出されます。 リモートプッシュサービスから受信したregistrationId。

次に、保存されたregistrationIdの値を localStorageから取得 します。 古い登録IDが新しく受け取った登録IDと一致しない場合は、2つの操作を行う必要があります。 最初に、新しい registrationIdをlocalStorage に保 存します。 次に、登録IDをプッシュサービスに送信します。

**注意:**この2番目の手順の実装は、このガイドの目的に関係なく、ユーザーに委ねられます。

登録イベントハンドラーによって 、HTMLが更新され、アプリが登録されたことが視覚的に表示されます。 これを行うには、表示された最初の<p>エレメントでCSSのdisplay属性をnoneに設定し、代わりにdisplay属性をblockに設定してindex.htmlでRegisteredエレメントを表示します。

push.on('registration', function(data) {
  console.log('registration event: ' + data.registrationId);

  var oldRegId = localStorage.getItem('registrationId');
  if (oldRegId !== data.registrationId) {
    // Save new registration ID
    localStorage.setItem('registrationId', data.registrationId);
    // Post registrationId to your app server as the value has changed
  }

  var parentElement = document.getElementById('registration');
  var listeningElement = parentElement.querySelector('.waiting');
  var receivedElement = parentElement.querySelector('.received');

  listeningElement.setAttribute('style', 'display:none;');
  receivedElement.setAttribute('style', 'display:block;');
});

エラー処理

次に、エラーイベントのイベントハンドラーを設 定します 。 登録で問題が発生した場合は、エラーイベントが発生します。

push.on('error', function(e) {
  console.log("push error = " + e.message);
});

通知の受信

最後に、通知イベントのイベントハンドラーを設定します。このイベントハンドラーは、アプリがフォアグラウンドで実行中にプッシュ通知を受信した場合にのみ呼び出されます。 このイベントハンドラー関数には、titleやmessageなど、複数のプロパティを含めることができる1つのデータオブジェクトパラメーターが含まれます。

push.on('notification', function(data) {
  console.log('notification event');
  navigator.notification.alert(
    data.message,         // message
    null,                 // callback
    data.title,           // title
    'Ok'                  // buttonName
  );
});
**注意:**アプリケーションがバックグラウンドで実行されている場合、ユーザーが通知シェードで通知をクリックするまで、上記のイベントハンドラーは呼び出されません。

プッシュ通知の使用方法について詳しくは、 PhoneGap Push Pluginリポジトリのドキュ メント を参照してください。

GitHubでこのページを編集
Copyright SYSTRAN 2016
この翻訳は役に立ちましたか?

Translation by SYSTRAN