Apache Cordova アプリへのプッシュ通知の追加Add push notifications to your Apache Cordova app

注意

Visual Studio App Center は、モバイル アプリ開発の中心となるエンドツーエンドの統合サービスをサポートしています。Visual Studio App Center supports end to end and integrated services central to mobile app development. 開発者は、ビルドテスト配布のサービスを使用して、継続的インテグレーションおよびデリバリー パイプラインを設定できます。Developers can use Build, Test and Distribute services to set up Continuous Integration and Delivery pipeline. アプリがデプロイされたら、開発者は分析および診断のサービスを利用してアプリの状態と使用状況を監視し、プッシュ サービスを利用してユーザーと関わることができます。Once the app is deployed, developers can monitor the status and usage of their app using the Analytics and Diagnostics services, and engage with users using the Push service. また、開発者は Auth を利用してユーザーを認証し、データ サービスを利用してクラウド内のアプリ データを保持および同期することもできます。Developers can also leverage Auth to authenticate their users and Data service to persist and sync app data in the cloud.

モバイル アプリケーションにクラウド サービスを統合することを検討している場合は、今すぐ App Center にサインアップしてください。If you are looking to integrate cloud services in your mobile application, sign up with App Center today.

概要Overview

このチュートリアルでは、Apache Cordova クイックスタート プロジェクトにプッシュ通知を追加して、レコードが挿入されるたびにデバイスにプッシュ通知が送信されるようにします。In this tutorial, you add push notifications to the Apache Cordova quickstart project so that a push notification is sent to the device every time a record is inserted.

ダウンロードされたクイック スタート サーバー プロジェクトを使用しない場合は、プッシュ通知拡張機能パッケージが必要です。If you do not use the downloaded quickstart server project, you need the push notification extension package. 詳細については、「Mobile Apps 用 .NET バックエンド サーバー SDK の操作」を参照してください。For more information, see Work with the .NET back-end server SDK for Mobile Apps.

前提条件Prerequisites

このチュートリアルでは、Visual Studio 2015 で開発された Apache Cordova アプリケーションがあることを前提にしています。This tutorial assumes that you have an Apache Cordova application that was developed with Visual Studio 2015. このデバイスは、Google Android Emulator、Android デバイス、Windows デバイス、または iOS デバイスで実行する必要があります。This device should run on Google Android Emulator, an Android device, a Windows device, or an iOS device.

このチュートリアルを完了するには、次のものが必要です。To complete this tutorial, you need:

通知ハブを構成するConfigure a notification hub

Azure App Service の Mobile Apps 機能は Azure Notification Hubs を使用してプッシュを送信するため、ここではモバイル アプリの通知ハブを構成します。The Mobile Apps feature of Azure App Service uses Azure Notification Hubs to send pushes, so you will be configuring a notification hub for your mobile app.

  1. Azure Portal で、 [App Services] に移動し、アプリ バックエンドを選択します。In the Azure portal, go to App Services, and then select your app back end. [設定][プッシュ] を選択します。Under Settings, select Push.

  2. 通知ハブ リソースをアプリに追加するには、 [接続] を選択します。To add a notification hub resource to the app, select Connect. ハブを作成することも、既存のハブに接続することもできます。You can either create a hub or connect to an existing one.

    ハブの構成

これで、通知ハブが Mobile Apps のバックエンド プロジェクトに接続されました。Now you have connected a notification hub to your Mobile Apps back-end project. 後でこの通知ハブを構成して、デバイスにプッシュ通知を送信するプラットフォーム通知システム (PNS) に接続します。Later you configure this notification hub to connect to a platform notification system (PNS) to push to devices.

このセクションの手順を示すビデオを見るWatch a video showing steps in this section.

サーバー プロジェクトを更新するUpdate the server project

このセクションでは、Mobile Apps の既存のバックエンド プロジェクトのコードを更新して、新しい項目が追加されるたびにプッシュ通知を送信するようにします。In this section, you update code in your existing Mobile Apps back-end project to send a push notification every time a new item is added. このプロセスは、Azure Notification Hubs のテンプレート機能を使用しており、クロスプラットフォームのプッシュを有効にします。This process is powered by the template feature of Azure Notification Hubs, which enables cross-platform pushes. テンプレートを使用してさまざまなクライアントがプッシュ通知に登録されるため、1 つの汎用プッシュがすべてのクライアント プラットフォームに届きます。The various clients are registered for push notifications using templates, and a single universal push can get to all client platforms.

バックエンド プロジェクトの種類 (.NET バックエンドまたは Node.js バックエンド) に応じた次のいずれかの手順を選択します。Choose one of the following procedures that matches your back-end project type—either .NET back end or Node.js back end.

.NET バックエンド プロジェクト.NET back-end project

  1. Visual Studio で、サーバー プロジェクトを右クリックします。In Visual Studio, right-click the server project. 次に、 [NuGet パッケージの管理] を選択します。Then select Manage NuGet Packages. Microsoft.Azure.NotificationHubs を検索し、 [インストール] を選択します。Search for Microsoft.Azure.NotificationHubs, and then select Install. このプロセスにより、バックエンドから通知を送信するための Notification Hubs ライブラリがインストールされます。This process installs the Notification Hubs library for sending notifications from the back end.

  2. サーバー プロジェクトで、 [コントローラー] > [TodoItemController.cs] の順に開きます。In the server project, open Controllers > TodoItemController.cs. 次の using ステートメントを追加します。Then add the following using statements:

    using System.Collections.Generic;
    using Microsoft.Azure.NotificationHubs;
    using Microsoft.Azure.Mobile.Server.Config;
    
  3. PostTodoItem メソッドで、次のコードを InsertAsync に対する呼び出しの後ろに追加します。In the PostTodoItem method, add the following code after the call to InsertAsync:

    // Get the settings for the server project.
    HttpConfiguration config = this.Configuration;
    MobileAppSettingsDictionary settings =
        this.Configuration.GetMobileAppSettingsProvider().GetMobileAppSettings();
    
    // Get the Notification Hubs credentials for the mobile app.
    string notificationHubName = settings.NotificationHubName;
    string notificationHubConnection = settings
        .Connections[MobileAppSettingsKeys.NotificationHubConnectionString].ConnectionString;
    
    // Create a new Notification Hub client.
    NotificationHubClient hub = NotificationHubClient
    .CreateClientFromConnectionString(notificationHubConnection, notificationHubName);
    
    // Send the message so that all template registrations that contain "messageParam"
    // receive the notifications. This includes APNS, GCM, WNS, and MPNS template registrations.
    Dictionary<string,string> templateParams = new Dictionary<string,string>();
    templateParams["messageParam"] = item.Text + " was added to the list.";
    
    try
    {
        // Send the push notification and log the results.
        var result = await hub.SendTemplateNotificationAsync(templateParams);
    
        // Write the success result to the logs.
        config.Services.GetTraceWriter().Info(result.State.ToString());
    }
    catch (System.Exception ex)
    {
        // Write the failure result to the logs.
        config.Services.GetTraceWriter()
            .Error(ex.Message, null, "Push.SendAsync Error");
    }
    

    このプロセスにより、新しい項目が挿入されたときに、item.Text を含むテンプレート通知が送信されます。This process sends a template notification that contains the item.Text when a new item is inserted.

  4. サーバー プロジェクトを発行します。Republish the server project.

Node.js バックエンド プロジェクトNode.js back-end project

  1. バックエンド プロジェクトを設定します。Set up your backend project.

  2. todoitem.js 内の既存のコードを、次のコードに置き換えます。Replace the existing code in todoitem.js with the following code:

    var azureMobileApps = require('azure-mobile-apps'),
    promises = require('azure-mobile-apps/src/utilities/promises'),
    logger = require('azure-mobile-apps/src/logger');
    
    var table = azureMobileApps.table();
    
    table.insert(function (context) {
    // For more information about the Notification Hubs JavaScript SDK,
    // see https://aka.ms/nodejshubs.
    logger.info('Running TodoItem.insert');
    
    // Define the template payload.
    var payload = '{"messageParam": "' + context.item.text + '" }';  
    
    // Execute the insert. The insert returns the results as a promise.
    // Do the push as a post-execute action within the promise flow.
    return context.execute()
        .then(function (results) {
            // Only do the push if configured.
            if (context.push) {
                // Send a template notification.
                context.push.send(null, payload, function (error) {
                    if (error) {
                        logger.error('Error while sending push notification: ', error);
                    } else {
                        logger.info('Push notification sent successfully!');
                    }
                });
            }
            // Don't forget to return the results from the context.execute().
            return results;
        })
        .catch(function (error) {
            logger.error('Error while running context.execute: ', error);
        });
    });
    
    module.exports = table;  
    

    このプロセスにより、新しい項目が挿入されたときに、item.text を含むテンプレート通知が送信されます。This process sends a template notification that contains the item.text when a new item is inserted.

  3. ローカル コンピューターでファイルを編集するときは、サーバー プロジェクトを再発行します。When you edit the file on your local computer, republish the server project.

Cordova アプリを変更するModify your Cordova app

Apache Cordova アプリ プロジェクトが確実にプッシュ通知を処理する準備ができるように、Cordova プッシュ プラグインに加え、プラットフォーム固有のいずれかのプッシュ サービスをインストールします。To ensure that your Apache Cordova app project is ready to handle push notifications, install the Cordova push plugin plus any platform-specific push services.

プロジェクトで Cordova のバージョンを更新するUpdate the Cordova version in your project.

プロジェクトがバージョン 6.1.1 より前の Apache Cordova を使用している場合は、クライアント プロジェクトを更新します。If your project uses a version of Apache Cordova that's earlier than version 6.1.1, update the client project. プロジェクトを更新するには、次の手順を実行します。To update the project, take the following steps:

  • 構成デザイナーを開くには、config.xml を右クリックします。To open the configuration designer, right-click config.xml.
  • [プラットフォーム] タブを選択します。Select the Platforms tab.
  • [Cordova CLI] テキスト ボックスで、 [6.1.1] を選択します。In the Cordova CLI text box, select 6.1.1.
  • プロジェクトを更新するには、 [構築][Build Solution] (ソリューションの構築) の順に選択します。To update the project, select Build, and then select Build Solution.

プッシュ プラグインをインストールするInstall the push plugin

Apache Cordova アプリケーションでは、デバイスやネットワークの機能をネイティブで処理しません。Apache Cordova applications do not natively handle device or network capabilities. これらの機能は、 npm または GitHub で公開されているプラグインによって提供されます。These capabilities are provided by plugins that are published either on npm or on GitHub. phonegap-plugin-push プラグインは、ネットワーク プッシュ通知を処理します。The phonegap-plugin-push plugin handles network push notifications.

プッシュ プラグインは、次のいずれかの方法でインストールできます。You can install the push plugin in one of the following ways:

コマンド プロンプトから:From the command-prompt:

次のコマンドを実行します。Run the following command:

cordova plugin add phonegap-plugin-push

Visual Studio 内から:From within Visual Studio:

  1. ソリューション エクスプローラーで、config.xml ファイルを開きます。In Solution Explorer, open the config.xml file. 次に、 [プラグイン] > [カスタム] を選択します。Next, select Plugins > Custom. その後、インストール ソースとして [Git] を選択します。Then select Git as the installation source.

  2. ソースとして https://github.com/phonegap/phonegap-plugin-push を入力します。Enter https://github.com/phonegap/phonegap-plugin-push as the source.

    ソリューション エクスプローラーで config.xml ファイルを開きます。

  3. インストール ソースの横にある矢印を選択します。Select the arrow next to the installation source.

  4. Google デベロッパー コンソール プロジェクト用のプロジェクト ID (数値) を既に所有している場合は、SENDER_ID のボックスに追加できます。In SENDER_ID, if you already have a numeric project ID for the Google Developer Console project, you can add it here. それ以外の場合は、777777 などのプレースホルダー値を入力します。Otherwise, enter a placeholder value, such as 777777. Android を対象にしている場合は、後で config.xml ファイル内のこの値を更新できます。If you are targeting Android, you can update this value in the config.xml file later.

    注意

    バージョン 2.0.0 の時点では、送信者 ID を構成するには、プロジェクトのルート フォルダーに google-services.json をインストールする必要があります。As of version 2.0.0, google-services.json needs to be installed in the root folder of your project to configure the sender ID. 詳細については、インストール ドキュメントを参照してください。For more information, see the installation documentation.

  5. [追加] を選択します。Select Add.

これでプッシュ プラグインがインストールされました。The push plugin is now installed.

デバイス プラグインをインストールするInstall the device plugin

プッシュ プラグインのインストールに使用したものと同じ手順に従います。Follow the same procedure you used to install the push plugin. コア プラグインの一覧からデバイス プラグインを追加します。Add the Device plugin from the Core plugins list. (これを見つけるには、 [プラグイン] > [コア] を選択します。)このプラグインはプラットフォーム名の取得に必要です。(To find it, select Plugins > Core.) You need this plugin to obtain the platform name.

アプリケーションの起動時にデバイスを登録するRegister your device when the application starts

最初に、最小限の Android コードを追加します。Initially, we include some minimal code for Android. 後で、iOS または Windows 10 で実行されるようにアプリを変更できます。Later you can modify the app to run on iOS or Windows 10.

  1. サインイン プロセスのコールバック中に registerForPushNotifications への呼び出しを追加します。Add a call to registerForPushNotifications during the callback for the sign-in process. あるいは、これを onDeviceReady メソッドの一番下に追加できます。Alternatively, you can add it at the bottom of the onDeviceReady method:

    // Log in to the service.
    client.login('google')
        .then(function () {
            // Create a table reference.
            todoItemTable = client.getTable('todoitem');
    
            // Refresh the todoItems.
            refreshDisplay();
    
            // Wire up the UI Event Handler for the Add Item.
            $('#add-item').submit(addItemHandler);
            $('#refresh').on('click', refreshDisplay);
    
                // Added to register for push notifications.
            registerForPushNotifications();
    
        }, handleError);
    

    この例は、認証が成功した後の registerForPushNotifications の呼び出しを示しています。This example shows calling registerForPushNotifications after authentication succeeds. registerForPushNotifications() は必要とされる頻度で呼び出すことができます。You can call registerForPushNotifications() as often as is required.

  2. 新しい registerForPushNotifications メソッドを次のように追加します。Add the new registerForPushNotifications method as follows:

    // Register for push notifications. Requires that phonegap-plugin-push be installed.
    var pushRegistration = null;
    function registerForPushNotifications() {
        pushRegistration = PushNotification.init({
            android: { senderID: 'Your_Project_ID' },
            ios: { alert: 'true', badge: 'true', sound: 'true' },
            wns: {}
        });
    
    // Handle the registration event.
    pushRegistration.on('registration', function (data) {
        // Get the native platform of the device.
        var platform = device.platform;
        // Get the handle returned during registration.
        var handle = data.registrationId;
        // Set the device-specific message template.
        if (platform == 'android' || platform == 'Android') {
            // Register for GCM notifications.
            client.push.register('gcm', handle, {
                mytemplate: { body: { data: { message: "{$(messageParam)}" } } }
            });
        } else if (device.platform === 'iOS') {
            // Register for notifications.
            client.push.register('apns', handle, {
                mytemplate: { body: { aps: { alert: "{$(messageParam)}" } } }
            });
        } else if (device.platform === 'windows') {
            // Register for WNS notifications.
            client.push.register('wns', handle, {
                myTemplate: {
                    body: '<toast><visual><binding template="ToastText01"><text id="1">$(messageParam)</text></binding></visual></toast>',
                    headers: { 'X-WNS-Type': 'wns/toast' } }
            });
        }
    });
    
    pushRegistration.on('notification', function (data, d2) {
        alert('Push Received: ' + data.message);
    });
    
    pushRegistration.on('error', handleError);
    }
    
  3. (Android) 前述のコードで、Your_Project_ID を、Google デベロッパー コンソールから入手したアプリのプロジェクト ID (数値) に置き換えます。(Android) In the preceding code, replace Your_Project_ID with the numeric project ID for your app from the Google Developer Console.

(省略可能) Android でアプリを構成して実行する(Optional) Configure and run the app on Android

このセクションを完了すると、Android 用のプッシュ通知を有効にすることができます。Complete this section to enable push notifications for Android.

Firebase Cloud Messaging を有効にするEnable Firebase Cloud Messaging

最初は Google Android プラットフォームを対象にしているため、Firebase Cloud Messaging を有効にする必要があります。Since you are targeting the Google Android platform initially, you must enable Firebase Cloud Messaging.

  1. Firebase コンソールにサインインします。Sign in to the Firebase console. Firebase プロジェクトがまだない場合は、新しく作成します。Create a new Firebase project if you don't already have one.

  2. プロジェクトを作成した後、 [Add Firebase to your Android app](Android アプリに Firebase を追加する) を選択します。After you create your project, select Add Firebase to your Android app.

    Android アプリへの Firebase の追加

  3. [Android アプリへの Firebase の追加] ページで、次の手順を実行します。On the Add Firebase to your Android app page, take the following steps:

    1. [Android package name](Android パッケージ名) については、お使いのアプリケーションの build.gradle ファイル内にある applicationId の値をコピーします。For Android package name, copy the value of your applicationId in your application's build.gradle file. この例では com.fabrikam.fcmtutorial1app です。In this example, it's com.fabrikam.fcmtutorial1app.

      パッケージ名を指定する

    2. [アプリの登録] を選択します。Select Register app.

  4. [google-services.json をダウンロード] を選択し、プロジェクトの app フォルダーにファイルを保存して、 [次へ] をクリックします。Select Download google-services.json, save the file into the app folder of your project, and then select Next.

    google-services.json をダウンロードする

  5. Android Studio で、プロジェクトに次の構成変更を加えます。Make the following configuration changes to your project in Android Studio.

    1. プロジェクト レベルの build.gradle ファイル (<project>/build.gradle) で、dependencies セクションに次のステートメントを追加します。In your project-level build.gradle file (<project>/build.gradle), add the following statement to the dependencies section.

      classpath 'com.google.gms:google-services:4.0.1'
      
    2. アプリレベルの build.gradle ファイル (<project>/<app-module>/build.gradle) で、dependencies セクションに次のステートメントを追加します。In your app-level build.gradle file (<project>/<app-module>/build.gradle), add the following statements to the dependencies section.

      implementation 'com.google.firebase:firebase-core:16.0.8'
      implementation 'com.google.firebase:firebase-messaging:17.3.4'
      
    3. アプリ レベルの build.gradle ファイルの最後の dependencies セクションの末尾に次の行を追加します。Add the following line to the end of the app-level build.gradle file after the dependencies section.

      apply plugin: 'com.google.gms.google-services'
      
    4. ツールバーの [今すぐ同期] を選択します。Select Sync now on the toolbar.

      build.gradle の構成変更

  6. [次へ] を選択します。Select Next.

  7. [この手順をスキップする] を選択します。Select Skip this step.

    最後の手順をスキップする

  8. Firebase コンソールで、プロジェクトの歯車アイコンを選択します。In the Firebase console, select the cog for your project. 次に、 [Project Settings](プロジェクト設定) を選択します。Then select Project Settings.

    [Project Settings](プロジェクト設定) の選択

  9. google-services.json ファイルをお使いの Android Studio プロジェクトの app フォルダーにダウンロードしていない場合は、このページでダウンロードできます。If you haven't downloaded the google-services.json file into the app folder of your Android Studio project, you can do so on this page.

  10. 上部にある [クラウド メッセージング] タブに切り替えます。Switch to the Cloud Messaging tab at the top.

  11. 後で使用するために、サーバー キーをコピーし、保存します。Copy and save the Server key for later use. この値を使用して、ハブを構成します。You use this value to configure your hub.

FCM を使用してプッシュ要求を送信するようにモバイル アプリ バックエンドを構成するConfigure the Mobile App back end to send push requests using FCM

  1. Azure Portal[すべて参照] > [App Services] の順に選択します。In the Azure portal, select Browse All > App Services. 次に、Mobile Apps バックエンドを選択します。Then select your Mobile Apps back end.
  2. [設定][プッシュ] を選択します。Under Settings, select Push. 次に、 [プッシュ通知サービスを構成する] を選択します。Then select Configure push notification services.
  3. [Google (GCM)] に移動します。Go to Google (GCM). Firebase コンソールから取得した FCM レガシー サーバー キーを入力し、 [保存] を選択します。Enter the FCM legacy server key that you obtained from the Firebase console, and then select Save.

これで、Firebase Cloud Messaging と連携するようにサービスが構成されました。Your service is now configured to work with Firebase Cloud Messaging.

Android 用に Cordova アプリを構成するConfigure your Cordova app for Android

Cordova アプリで、config.xml を開きます。In your Cordova app, open config.xml. 次に、Your_Project_ID を、Google デベロッパー コンソールから入手したアプリの数値プロジェクト ID に置き換えます。Then replace Your_Project_ID with the numeric project ID for your app from the Google Developer Console.

<plugin name="phonegap-plugin-push" version="1.7.1" src="https://github.com/phonegap/phonegap-plugin-push.git">
    <variable name="SENDER_ID" value="Your_Project_ID" />
</plugin>

index.js を開きます。Open index.js. 次に、数値プロジェクト ID を使用するようにこのコードを更新します。Then update the code to use your numeric project ID.

pushRegistration = PushNotification.init({
    android: { senderID: 'Your_Project_ID' },
    ios: { alert: 'true', badge: 'true', sound: 'true' },
    wns: {}
});

USB デバッグ用に Android デバイスを構成するConfigure your Android device for USB debugging

Android デバイスにアプリケーションをデプロイするには、USB デバッグを有効にしておく必要があります。Before you can deploy your application to your Android Device, you need to enable USB debugging. Android フォンで次の手順を実行します。Take the following steps on your Android phone:

  1. [設定] > [端末情報] に移動します。Go to Settings > About phone. その後、開発者モードが有効になるまで (約 7 回) [ビルド番号] をタップします。Then tap the Build number until developer mode is enabled (about seven times).
  2. [設定] > [Developer Options] (開発者オプション) に戻り、 [USB debugging] (USB デバッグ) を有効にします。Back in Settings > Developer Options, enable USB debugging. 次に、USB ケーブルを使用して Android フォンを開発 PC に接続します。Then connect your Android phone to your development PC with a USB cable.

このチュートリアルのテストでは、Android 6.0 (Marshmallow) を実行している Google Nexus 5X を使用しました。We tested this using a Google Nexus 5X device running Android 6.0 (Marshmallow). ただし、その手法は最新のどの Android リリースでも共通です。However, the techniques are common across any modern Android release.

Google Play Services をインストールするInstall Google Play Services

プッシュ プラグインでは、プッシュ通知に Android Google Play Services を利用します。The push plugin relies on Android Google Play Services for push notifications.

  1. Visual Studio で、 [ツール] > [Android] > [Android SDK Manager] を選択します。In Visual Studio, select Tools > Android > Android SDK Manager. 次に、Extras フォルダーを展開します。Then expand the Extras folder. 次の各 SDK が確実にインストールされるように、適切なボックスにチェックを入れます。Check the appropriate boxes to ensure that each of the following SDKs is installed:

    • Android 2.3 以上Android 2.3 or higher
    • Google Repository リビジョン 27 以上Google Repository revision 27 or higher
    • Google Play Services 9.0.2 以上Google Play Services 9.0.2 or higher
  2. [Install Packages] (パッケージのインストール) を選択します。Select Install Packages. その後、インストールの完了を待ちます。Then wait for the installation to finish.

最新の必要なライブラリは、 phonegap-plugin-push のインストール ドキュメントに記載されています。The current required libraries are listed in the phonegap-plugin-push installation documentation.

Android 上のアプリでプッシュ通知をテストするTest push notifications in the app on Android

ここで、アプリを実行して TodoItem テーブルにアイテムを挿入することにより、プッシュ通知をテストできます。You can now test push notifications by running the app and inserting items in the TodoItem table. 同じバックエンドを使用している限り、同じデバイスまたは 2 番目のデバイスからテストできます。You can test from the same device or from a second device, as long as you are using the same back end. 次のいずれかの方法により、Android プラットフォームで Cordova アプリをテストします。Test your Cordova app on the Android platform in one of the following ways:

  • 物理デバイス上: Android デバイスを USB ケーブルで開発用コンピューターに接続します。On a physical device: Attach your Android device to your development computer with a USB cable. Google Android エミュレーターの代わりに、 [デバイス] を選択します。Instead of Google Android Emulator, select Device. Visual Studio がデバイスにアプリケーションをデプロイし、そのアプリケーションを実行します。Visual Studio deploys the application to the device and runs the application. デバイスでアプリケーションを操作できるようになります。You can then interact with the application on the device.

    Mobizen などの画面共有アプリケーションは、Android アプリケーションの開発に役立ちます。Screen-sharing applications such as Mobizen can assist you in developing Android applications. Mobizen では、Android の画面を PC の Web ブラウザーで表示できます。Mobizen projects your Android screen to a web browser on your PC.

  • Android エミュレーター上: エミュレーターを使用しているときに必要な追加の構成手順があります。On an Android emulator: There are additional configuration steps that are required when you're using an emulator.

    Android Virtual Device (AVD) Manager で示すように、Google API がターゲットとして設定された仮想デバイスに対してデプロイする必要があります。Make sure you are deploying to a virtual device that has Google APIs set as the target, as shown in the Android Virtual Device (AVD) manager.

    Android Virtual Device Manager

    より高速な x86 エミュレーターを使用する場合は、HAXM ドライバーをインストールし、それを使用するようにエミュレーターを構成します。If you want to use a faster x86 emulator, install the HAXM driver, and then configure the emulator to use it.

    [アプリ] > [設定] > [アカウントの追加] を選択することによって、Android デバイスに Google アカウントを追加します。Add a Google account to the Android device by selecting Apps > Settings > Add account. その後、プロンプトに従います。Then follow the prompts.

    Android デバイスに Google アカウントを追加する

    これまでと同様に ToDoList アプリを実行し、新しい ToDo 項目を挿入します。Run the todolist app as before and insert a new todo item. 今回は、通知領域に通知アイコンが表示されます。This time, a notification icon is displayed in the notification area. 通知ドロアーを開いて、通知の全文を表示できます。You can open the notification drawer to view the full text of the notification.

    通知の表示

(省略可能) iOS で構成して実行する(Optional) Configure and run on iOS

このセクションでは、iOS デバイス上で Cordova プロジェクトを実行します。This section is for running the Cordova project on iOS devices. iOS デバイスを使用していない場合は、このセクションを省略できます。If you aren't working with iOS devices, you can skip this section.

iOS リモート ビルド エージェントを Mac またはクラウド サービスにインストールして実行するInstall and run the iOS remote build agent on a Mac or cloud service

Visual Studio を使用して iOS で Cordova アプリを実行するには、その前に iOS セットアップ ガイドの手順を実行してリモート ビルド エージェントをインストールおよび実行します。Before you can run a Cordova app on iOS using Visual Studio, go through the steps in the iOS setup guide to install and run the remote build agent.

iOS 用アプリのビルドが可能であることを確認します。Make sure you can build the app for iOS. Visual Studio から iOS 用のアプリをビルドするには、セットアップ ガイドの手順が必要です。The steps in the setup guide are required for building the app for iOS from Visual Studio. Mac がない場合は、MacInCloud などのサービスでリモート ビルド エージェントを使用して iOS 用にビルドできます。If you do not have a Mac, you can build for iOS by using the remote build agent on a service like MacInCloud. 詳細については、クラウドでの iOS アプリの実行に関するページを参照してください。For more information, see Run your iOS app in the cloud.

注意

iOS でプッシュ プラグインを使用するには Xcode 7 以上が必要です。Xcode 7 or greater is required to use the push plugin on iOS.

アプリ ID として使用する ID を探すFind the ID to use as your App ID

アプリをプッシュ通知用に登録する前に、Cordova アプリで config.xml を開き、ウィジェット要素内の id 属性値を見つけ、それを後で使用するためにコピーします。Before you register your app for push notifications, open config.xml in your Cordova app, find the id attribute value in the widget element, and then copy it for later use. 次の XML では、ID は io.cordova.myapp7777777です。In the following XML, the ID is io.cordova.myapp7777777.

<widget defaultlocale="en-US" id="io.cordova.myapp7777777"
    version="1.0.0" windows-packageVersion="1.1.0.0" xmlns="https://www.w3.org/ns/widgets"
    xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:vs="http://schemas.microsoft.com/appx/2014/htmlapps">

後で Apple の開発者ポータルでアプリ ID を作成するときに、この識別子を使用しますLater, use this identifier when you create an App ID on Apple's developer portal. 開発者ポータルで別のアプリ ID を作成した場合は、このチュートリアルの後半でいくつかの追加の手順が必要になります。If you create a different App ID on the developer portal, you must take a few extra steps later in this tutorial. ウィジェット要素の ID は、開発者ポータルのアプリ ID と一致している必要があります。The ID in the widget element must match the App ID on the developer portal.

Apple の開発者ポータルにプッシュ通知のアプリを登録するRegister the app for push notifications on Apple's developer portal

  • アプリのアプリ ID を登録しますRegister an app ID for your app. ワイルドカード アプリ ID ではなく明確なアプリ ID を作成し、 [Bundle ID (バンドル ID)] には、Xcode クイックスタート プロジェクト内に含まれるバンドル ID を使用します。Create an explicit app ID (not a wildcard app ID) and, for Bundle ID, use the exact bundle ID that is in your Xcode quickstart project. [Push Notifications (プッシュ通知)] チェック ボックスをオンにすることも重要です。It is also crucial that you select the Push Notifications option.
  • 次に、プッシュ通知を構成するための準備として、"開発" または "配布" SSL 証明書を作成します。Next, to prepare for configuring push notifications, create either a "Development" or "Distribution" SSL certificate.

同様の手順を説明するビデオを見るWatch a video showing similar steps

プッシュ通知を送信するように Azure を構成するConfigure Azure to send push notifications

  1. お使いの Mac で、 Keychain Accessを起動します。On your Mac, launch Keychain Access. 左側のナビゲーション バーで、 [分類][自分の証明書] を開きます。On the left navigation bar, under Category, open My Certificates. 前のセクションでダウンロードした SSL 証明書を見つけ、その内容を開示します。Find the SSL certificate that you downloaded in the previous section, and then disclose its contents. (秘密キーを選択せずに) 証明書のみを選択します。Select only the certificate (do not select the private key). 次に、それをエクスポートします。Then export it.
  2. Azure Portal[すべて参照] > [App Services] の順に選択します。In the Azure portal, select Browse All > App Services. 次に、Mobile Apps バックエンドを選択します。Then select your Mobile Apps back end.
  3. [設定][App Service Push](App Service プッシュ) を選択します。Under Settings, select App Service Push. 次に、通知ハブの名前を選択します。Then select your notification hub name.
  4. [Apple Push Notification Service] > [証明書のアップロード] の順に選択します。Go to Apple Push Notification Services > Upload Certificate. (前の手順のクライアント SSL 証明書が実稼働環境用かサンドボックス用かに応じて) 適切なモードを選択して、.p12 ファイルをアップロードします。Upload the .p12 file, selecting the correct Mode (depending on whether your client SSL certificate from earlier is production or sandbox). すべての変更を保存します。Save any changes.

これで、iOS のプッシュ通知と連携するようにサービスが構成されました。Your service is now configured to work with push notifications on iOS.

アプリ ID がCordova アプリと一致することを確認するVerify that your App ID matches your Cordova app

Apple 開発者アカウントで作成したアプリ ID が config.xml ファイル内のウィジェット要素の ID と既に一致している場合は、この手順を省略できます。If the App ID that you created in your Apple Developer Account already matches the ID of the widget element in the config.xml file, you can skip this step. ただし、ID が一致しない場合は、以下の手順を実行します。However, if the IDs don't match, take the following steps:

  1. platforms フォルダーをプロジェクトから削除します。Delete the platforms folder from your project.
  2. plugins フォルダーをプロジェクトから削除します。Delete the plugins folder from your project.
  3. node_modules フォルダーをプロジェクトから削除します。Delete the node_modules folder from your project.
  4. Apple 開発者アカウントで作成したアプリ ID を使用するには、config.xml ファイル内のウィジェット要素の ID 属性を更新します。Update the id attribute of the widget element in the config.xml file to use the app ID that you created in your Apple developer account.
  5. プロジェクトをリビルドします。Rebuild your project.
iOS アプリでプッシュ通知をテストするTest push notifications in your iOS app
  1. Visual Studio で、デプロイ ターゲットとして [iOS] が選択されていることを確認します。In Visual Studio, make sure that iOS is selected as the deployment target. 次に、 [デバイス] を選択して、接続された iOS デバイスでプッシュ通知を実行します。Then select Device to run the push notifications on your connected iOS device.

    iTunes で PC に接続された iOS デバイスでプッシュ通知を実行できます。You can run the push notifications on an iOS device that's connected to your PC with iTunes. iOS シミュレーターでは、プッシュ通知はサポートされていません。The iOS Simulator does not support push notifications.

  2. Visual Studio で [実行] ボタンまたは F5 を選択して、プロジェクトをビルドし、iOS デバイスでアプリを起動します。Select the Run button or F5 in Visual Studio to build the project and start the app in an iOS device. 次に、 [OK] を選択してプッシュ通知を受け入れます。Then select OK to accept push notifications.

    注意

    アプリは最初の実行中にプッシュ通知の確認を要求します。The app requests confirmation for push notifications during the first run.

  3. アプリで、タスクを入力し、プラス (+) アイコンを選択します。In the app, type a task, and then select the plus (+) icon.

  4. 通知が受信されたことを確認します。Verify that a notification was received. 次に、 [OK] を選択して通知を無視します。Then select OK to dismiss the notification.

(省略可能) Windows で構成して実行する(Optional) Configure and run on Windows

このセクションでは、Windows 10 デバイス上で Apache Cordova アプリ プロジェクトを実行する方法について説明します (Windows 10 では PhoneGap プッシュ プラグインがサポートされています)。This section describes how to run the Apache Cordova app project on Windows 10 devices (the PhoneGap push plugin is supported on Windows 10). Windows デバイスを使用していない場合は、このセクションをスキップできます。If you are not working with Windows devices, you can skip this section.

WNS を使用して Windows アプリをプッシュ通知に登録するRegister your Windows app for push notifications with WNS

Visual Studio でストアのオプションを使用するには、ソリューション プラットフォームの一覧から Windows ターゲット ( [Windows-x64][Windows-x86] など) を選択します。To use the Store options in Visual Studio, select a Windows target from the Solution Platforms list, such as Windows-x64 or Windows-x86. (プッシュ通知に [Windows-AnyCPU] は避けてください。)(Avoid Windows-AnyCPU for push notifications.)

  1. Visual Studio ソリューション エクスプローラーで、Windows Store アプリ プロジェクトを右クリックします。In Visual Studio Solution Explorer, right-click the Windows Store app project. [ストア] > [アプリケーションをストアと関連付ける] の順にクリックします。Then select Store > Associate App with the Store.

    アプリを Windows ストアと関連付ける

  2. ウィザードで [次へ] を選択します。In the wizard, select Next. 次に、Microsoft アカウントを使ってサインインします。Then sign in with your Microsoft account. [新しいアプリケーション名の予約] で、アプリの名前を入力し、 [予約] を選択します。In Reserve a new app name, type a name for your app, and then select Reserve.

  3. アプリの登録が正常に作成されたら、新しいアプリ名を選択します。After the app registration is successfully created, select the new app name. [次へ][関連付け] の順に選択します。Select Next, and then select Associate. このプロセスにより、必要な Windows ストア登録情報がアプリケーション マニフェストに追加されます。This process adds the required Windows Store registration information to the application manifest.

  4. Windows ストア アプリ用に以前に作成したものと同じ登録を使用して、Windows Phone ストア アプリ プロジェクトに対して手順 1. と 3. を繰り返します。Repeat steps 1 and 3 for the Windows Phone Store app project by using the same registration you previously created for the Windows Store app.

  5. Windows デベロッパー センターに移動し、Microsoft アカウントでサインインします。Go to the Windows Dev Center, and then sign in with your Microsoft account. [マイ アプリ] で、新しいアプリの登録を選択します。In My apps, select the new app registration. 次に、 [サービス] > [プッシュ通知] の順に展開します。Then expand Services > Push notifications.

  6. [プッシュ通知] ページで、 [Windows Push Notification Services (WNS) and Microsoft Azure Mobile Apps](Windows プッシュ通知サービス (WNS) と Microsoft Azure Mobile Apps)[Live Services site](Live サービス サイト) を選択します。On the Push notifications page, under Windows Push Notification Services (WNS) and Microsoft Azure Mobile Apps, select Live Services site. [パッケージ SID] の値と [アプリケーション シークレット] の "現在" の値を書き留めておきます。Make a note of the values of the Package SID and the current value in Application Secret.

    デベロッパー センターでのアプリの設定

    重要

    アプリケーション シークレットおよびパッケージ SID は、重要なセキュリティ資格情報です。The application secret and package SID are important security credentials. こうした値は、他のユーザーと共有したり、アプリケーションで配布したりしないでください。Don't share these values with anyone or distribute them with your app.

同様の手順を説明するビデオを見るWatch a video showing similar steps

WNS 用に通知ハブを構成するConfigure the notification hub for WNS

  1. Azure Portal[すべて参照] > [App Services] の順に選択します。In the Azure portal, select Browse All > App Services. 次に、Mobile Apps バックエンドを選択します。Then select your Mobile Apps back end. [設定][App Service Push](App Service プッシュ) を選択します。Under Settings, select App Service Push. 次に、通知ハブの名前を選択します。Then select your notification hub name.

  2. [Windows (WNS)] に移動します。Go to Windows (WNS). 次に、Live サービス サイトから取得したセキュリティ キー (クライアント シークレット) とパッケージ SID を入力します。Then enter the Security key (client secret) and Package SID that you obtained from the Live Services site. 次に、 [保存] を選択します。Next, select Save.

    ポータルで WNS キーを設定する

バックエンドは WNS を使用してプッシュ通知を送信するよう構成されました。Your back end is now configured to use WNS to send push notifications.

Cordova アプリを構成して Windows プッシュ通知をサポートするConfigure your Cordova app to support Windows push notifications

config.xml を右クリックして、構成デザイナーを開きます。Open the configuration designer by right-clicking config.xml. その後、 [ビュー デザイナー] を選択します。Then select View Designer. 次に、 [Windows] タブを選択してから、 [Windows Target Version] (Windows ターゲット バージョン) の下の [Windows 10] を選択します。Next, select the Windows tab, and then select Windows 10 under Windows Target Version.

既定の (デバッグ) ビルドでプッシュ通知をサポートするには、build.json ファイルを開きます。To support push notifications in your default (debug) builds, open the build.json file. 次に、"release" 構成をデバッグ構成にコピーします。Then copy the "release" configuration to your debug configuration.

"windows": {
    "release": {
        "packageCertificateKeyFile": "res\\native\\windows\\CordovaApp.pfx",
        "publisherId": "CN=yourpublisherID"
    }
}

更新の後、build.json ファイルには次のコードが含まれている必要があります。After the update, the build.json file should contain the following code:

"windows": {
    "release": {
        "packageCertificateKeyFile": "res\\native\\windows\\CordovaApp.pfx",
        "publisherId": "CN=yourpublisherID"
        },
    "debug": {
        "packageCertificateKeyFile": "res\\native\\windows\\CordovaApp.pfx",
        "publisherId": "CN=yourpublisherID"
        }
    }

アプリをビルドし、エラーがないことを確認します。Build the app and verify that you have no errors. これで、クライアント アプリが Mobile Apps バックエンドからの通知用に登録されました。Your client app should now register for the notifications from the Mobile Apps back end. ソリューションのすべての Windows プロジェクトについて、このセクションを繰り返します。Repeat this section for every Windows project in your solution.

Windows アプリでプッシュ通知をテストするTest push notifications in your Windows app

Visual Studio で、Windows-x64Windows-x86 などの Windows プラットフォームがデプロイ ターゲットとして選択されていることを確認します。In Visual Studio, make sure that a Windows platform is selected as the deployment target, such as Windows-x64 or Windows-x86. Visual Studio をホストしている Windows 10 PC 上でアプリを実行するには、 [ローカル コンピューター] を選択します。To run the app on a Windows 10 PC that's hosting Visual Studio, choose Local Machine.

  1. [実行] ボタンを選択して、プロジェクトをビルドし、アプリを起動します。Select the Run button to build the project and start the app.

  2. アプリで、新しい todoitem の名前を入力し、プラス (+) アイコンを選択してそれを追加します。In the app, type a name for a new todoitem, and then select the plus (+) icon to add it.

項目が追加されたときに、通知が受信されていることを確認します。Verify that a notification is received when the item is added.

次のステップNext steps

  • プッシュ通知の詳細については、 Notification Hubs に関する記事を参照してください。Read about Notification Hubs to learn about push notifications.
  • まだ実行していない場合は、チュートリアルを続行して Apache Cordova アプリに認証を追加してください。If you have not already done so, continue the tutorial by adding authentication to your Apache Cordova app.

次の SDK を使用する方法を学習してください。Learn how to use the following SDKs: