Lägga till push-meddelanden till din Apache Cordova-appAdd push notifications to your Apache Cordova app

Anteckning

Visual Studio App Center stöder utveckling av slutpunkt till slutpunkt-tjänster och integrerade tjänster som är centrala för utveckling av mobilappar.Visual Studio App Center supports end to end and integrated services central to mobile app development. Utvecklare kan använda tjänsterna för att bygga, testa och distribuera för att skapa en pipeline för kontinuerlig integrering och leverans.Developers can use Build, Test and Distribute services to set up Continuous Integration and Delivery pipeline. När appen har distribuerats kan utvecklarna övervaka status och användning av appen med hjälp av tjänsterna Analys och Diagnostik, och kommunicera med användarna via Push-tjänsten.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. Utvecklare kan också dra nytta av Auth för att autentisera sina användare och tjänsten Data för att spara och synkronisera appdata i molnet.Developers can also leverage Auth to authenticate their users and Data service to persist and sync app data in the cloud.

Om du vill integrera moln tjänster i ditt mobil program kan du registrera dig med App Center idag.If you are looking to integrate cloud services in your mobile application, sign up with App Center today.

ÖversiktOverview

I den här självstudien lägger du till push-meddelanden i snabb starts projektet för Apache Cordova så att ett push-meddelande skickas till enheten varje gång en post infogas.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.

Om du inte använder det hämtade snabb starts Server projektet behöver du ett tilläggs paket för push-meddelanden.If you do not use the downloaded quickstart server project, you need the push notification extension package. Mer information finns i arbeta med .net backend server SDK för Mobile Apps.For more information, see Work with the .NET back-end server SDK for Mobile Apps.

FörhandskravPrerequisites

I den här självstudien förutsätter vi att du har ett Apache Cordova-program som har utvecklats med Visual Studio 2015.This tutorial assumes that you have an Apache Cordova application that was developed with Visual Studio 2015. Den här enheten bör köras på Google Android-emulator, en Android-enhet, en Windows-enhet eller en iOS-enhet.This device should run on Google Android Emulator, an Android device, a Windows device, or an iOS device.

För att slutföra den här kursen behöver du:To complete this tutorial, you need:

Konfigurera en Notification HubConfigure a notification hub

Funktionen Mobile Apps i Azure App Service använder Azure Notification Hubs att skicka push-meddelanden, så att du ska konfigurera en meddelandehubb för din mobilapp.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. I den Azure Portalgår du till Apptjänster, och välj sedan din app-serverdel.In the Azure portal, go to App Services, and then select your app back end. Under inställningarväljer Push.Under Settings, select Push.

  2. Om du vill lägga till en notification hub-resurs i appen, Välj Connect.To add a notification hub resource to the app, select Connect. Du kan skapa en hubb, eller så kan du ansluta till en befintlig.You can either create a hub or connect to an existing one.

    Konfigurera ett nav

Nu har du anslutit en notification hub i Mobile Apps backend-projektet.Now you have connected a notification hub to your Mobile Apps back-end project. Senare kan du konfigurera den här meddelandehubben för att ansluta till en plattformsspecifika meddelandesystem (PNS) för att skicka till enheter.Later you configure this notification hub to connect to a platform notification system (PNS) to push to devices.

Titta på en video som visar stegen i det här avsnittet.Watch a video showing steps in this section.

Uppdatera Server projektetUpdate the server project

I det här avsnittet uppdaterar du kod i ditt befintliga Mobile Apps Server dels projekt för att skicka ett push-meddelande varje gång ett nytt objekt läggs till.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. Den här processen drivs av mal funktionen i Azure Notification Hubs, vilket möjliggör push-meddelanden mellan plattformar.This process is powered by the template feature of Azure Notification Hubs, which enables cross-platform pushes. De olika klienterna är registrerade för push-meddelanden med hjälp av mallar och en enda Universal push kan komma till alla klient plattformar.The various clients are registered for push notifications using templates, and a single universal push can get to all client platforms.

Välj en av följande procedurer som matchar backend-projektets typ—, antingen .NET Server del eller Node. js-Server delen.Choose one of the following procedures that matches your back-end project type—either .NET back end or Node.js back end.

.NET-Server dels projekt.NET back-end project

  1. I Visual Studio högerklickar du på Server projektet.In Visual Studio, right-click the server project. Välj sedan Hantera NuGet-paket.Then select Manage NuGet Packages. Sök efter Microsoft.Azure.NotificationHubsoch välj sedan Installera.Search for Microsoft.Azure.NotificationHubs, and then select Install. Den här processen installerar Notification Hubs bibliotek för att skicka meddelanden från Server delen.This process installs the Notification Hubs library for sending notifications from the back end.

  2. Öppna kontrollanter > TodoItemController.csi Server projektet.In the server project, open Controllers > TodoItemController.cs. Lägg sedan till följande using-satser:Then add the following using statements:

    using System.Collections.Generic;
    using Microsoft.Azure.NotificationHubs;
    using Microsoft.Azure.Mobile.Server.Config;
    
  3. I PostTodoItem -metoden lägger du till följande kod efter anropet till 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");
    }
    

    Den här processen skickar ett meddelande från en mall som innehåller objektet. Text när ett nytt objekt infogas.This process sends a template notification that contains the item.Text when a new item is inserted.

  4. Publicera om Server projektet.Republish the server project.

Node. js-backend-projektNode.js back-end project

  1. Konfigurera ditt Server dels projekt.Set up your backend project.

  2. Ersätt den befintliga koden i todoitem. js med följande kod: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;  
    

    Den här processen skickar ett meddelande i en mall som innehåller objektet. text när ett nytt objekt infogas.This process sends a template notification that contains the item.text when a new item is inserted.

  3. Publicera om Server projektet när du redigerar filen på den lokala datorn.When you edit the file on your local computer, republish the server project.

Ändra din Cordova-appModify your Cordova app

För att se till att ditt Apache Cordova app-projekt är redo att hantera push-meddelanden, installerar du Cordova push-plugin plus alla plattformsspecifika push-tjänster.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.

Uppdatera Cordova-versionen i projektet.Update the Cordova version in your project.

Om ditt projekt använder en version av Apache Cordova som är tidigare än version "uppdaterar du klient projektet.If your project uses a version of Apache Cordova that's earlier than version 6.1.1, update the client project. Utför följande steg för att uppdatera projektet:To update the project, take the following steps:

  • Öppna Configuration designer genom att högerklicka på config.xml.To open the configuration designer, right-click config.xml.
  • Välj fliken plattformar .Select the Platforms tab.
  • I text rutan Cordova CLI väljer du kryss.In the Cordova CLI text box, select 6.1.1.
  • Om du vill uppdatera projektet väljer du byggeoch väljer sedan build-lösning.To update the project, select Build, and then select Build Solution.

Installera push-plugin-programmetInstall the push plugin

Apache Cordova-program hanterar inte funktioner för enhet eller nätverk.Apache Cordova applications do not natively handle device or network capabilities. Dessa funktioner tillhandahålls av plugin-program som publiceras antingen på NPM eller på GitHub.These capabilities are provided by plugins that are published either on npm or on GitHub. @No__t-0-plugin-programmet hanterar nätverks-push-meddelanden.The phonegap-plugin-push plugin handles network push notifications.

Du kan installera push-plugin-programmet på något av följande sätt:You can install the push plugin in one of the following ways:

Från kommando tolken:From the command-prompt:

Kör följande kommando:Run the following command:

cordova plugin add phonegap-plugin-push

I Visual Studio:From within Visual Studio:

  1. Öppna filen config.xml i Solution Explorer.In Solution Explorer, open the config.xml file. Välj sedan plugin-program > anpassad.Next, select Plugins > Custom. Välj sedan git som installations källa.Then select Git as the installation source.

  2. Ange https://github.com/phonegap/phonegap-plugin-push som källa.Enter https://github.com/phonegap/phonegap-plugin-push as the source.

    Öppna filen config. xml i Solution Explorer

  3. Välj pilen bredvid installations källan.Select the arrow next to the installation source.

  4. Om du redan har ett numeriskt projekt-ID för Google Developer Console-projektet i SENDER_IDkan du lägga till det här.In SENDER_ID, if you already have a numeric project ID for the Google Developer Console project, you can add it here. Annars anger du ett värde för plats hållare, till exempel 777777.Otherwise, enter a placeholder value, such as 777777. Om du riktar in dig på Android kan du uppdatera det här värdet i filen config. XML senare.If you are targeting Android, you can update this value in the config.xml file later.

    Anteckning

    Från och med version 2.0.0 måste Google-Services. JSON installeras i rotmappen i projektet för att konfigurera avsändar-ID: t.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. Mer information finns i installations dokumentationen.For more information, see the installation documentation.

  5. Välj Lägg till.Select Add.

Push-plugin-programmet är nu installerat.The push plugin is now installed.

Installera enhets-plugin-programmetInstall the device plugin

Följ samma procedur som du använde för att installera push-plugin-programmet.Follow the same procedure you used to install the push plugin. Lägg till enhets-plugin-programmet från huvud-plugin-listan.Add the Device plugin from the Core plugins list. (Du hittar det genom att välja plugin-program > kärna) Du behöver det här plugin-programmet för att hämta plattforms namnet.(To find it, select Plugins > Core.) You need this plugin to obtain the platform name.

Registrera enheten när programmet startasRegister your device when the application starts

Inlednings vis inkluderar vi lite minimal kod för Android.Initially, we include some minimal code for Android. Du kan senare ändra appen så att den körs på iOS eller Windows 10.Later you can modify the app to run on iOS or Windows 10.

  1. Lägg till ett anrop till registerForPushNotifications under återanropet för inloggnings processen.Add a call to registerForPushNotifications during the callback for the sign-in process. Du kan också lägga till det längst ned i onDeviceReady -metoden: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);
    

    I det här exemplet visas anrop av registerForPushNotifications när autentiseringen har slutförts.This example shows calling registerForPushNotifications after authentication succeeds. Du kan anropa registerForPushNotifications() så ofta som det behövs.You can call registerForPushNotifications() as often as is required.

  2. Lägg till den nya registerForPushNotifications -metoden enligt följande: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 I föregående kod ersätter du Your_Project_ID med det numeriska projekt-ID: t för din app från Google Developer-konsolen.(Android) In the preceding code, replace Your_Project_ID with the numeric project ID for your app from the Google Developer Console.

Valfritt Konfigurera och köra appen på Android(Optional) Configure and run the app on Android

Slutför det här avsnittet om du vill aktivera push-meddelanden för Android.Complete this section to enable push notifications for Android.

Aktivera Firebase Cloud MessagingEnable Firebase Cloud Messaging

Eftersom du är mål för Google Android-plattformen från början måste du aktivera Firebase Cloud Messaging.Since you are targeting the Google Android platform initially, you must enable Firebase Cloud Messaging.

  1. Logga in på Firebase-konsolen.Sign in to the Firebase console. Skapa ett nytt Firebase-projekt om du inte redan har ett.Create a new Firebase project if you don't already have one.

  2. När du har skapat ett projekt väljer du Lägg till Firebase till din Android-app.After you create your project, select Add Firebase to your Android app.

    Lägg till Firebase till din Android-app

  3. Utför följande steg på sidan Lägg till Firebase på din Android-app :On the Add Firebase to your Android app page, take the following steps:

    1. För namn på Android-paketkopierar du värdet för din applicationId i programmets build. gradle-fil.For Android package name, copy the value of your applicationId in your application's build.gradle file. I det här exemplet är com.fabrikam.fcmtutorial1appdet.In this example, it's com.fabrikam.fcmtutorial1app.

      Ange paket namnet

    2. Välj Registrera app.Select Register app.

  4. Välj Hämta Google-Services. JSON, spara filen i app -mappen i projektet och välj sedan Nästa.Select Download google-services.json, save the file into the app folder of your project, and then select Next.

    Ladda ned Google-Services. JSON

  5. Gör följande konfigurations ändringar i projektet i Android Studio.Make the following configuration changes to your project in Android Studio.

    1. I filen build. gradle för projekt nivå (<Project>/build.gradle) lägger du till följande-instruktion i avsnittet beroenden .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. Lägg till följande-<instruktioner i avsnittet beroenden i filen build. gradle för app-nivå (Project>/<app-module>/build.gradle).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. Lägg till följande rad i slutet av filen build. gradle för app-nivå efter avsnittet beroenden.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. Välj Synkronisera nu i verktygsfältet.Select Sync now on the toolbar.

      konfigurations ändringar för build. gradle

  6. Välj Nästa.Select Next.

  7. Välj hoppa över det här steget.Select Skip this step.

    Hoppa över det sista steget

  8. Välj kugghjulet för ditt projekt i Firebase-konsolen.In the Firebase console, select the cog for your project. Välj sedan Projektinställningar.Then select Project Settings.

    Välj Projektinställningar

  9. Om du inte har hämtat Google-Services. JSON-filen till app -mappen i ditt Android Studio-projekt kan du göra det på den här sidan.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. Växla till fliken Cloud Messaging överst.Switch to the Cloud Messaging tab at the top.

  11. Kopiera och spara Server nyckeln för senare användning.Copy and save the Server key for later use. Du använder det här värdet för att konfigurera hubben.You use this value to configure your hub.

Konfigurera Server delen för mobilapp för att skicka push-begäranden med FCMConfigure the Mobile App back end to send push requests using FCM

  1. I den Azure-portalenväljer Bläddra bland alla > Apptjänster.In the Azure portal, select Browse All > App Services. Sedan väljer Mobile Apps serverdel.Then select your Mobile Apps back end.
  2. Under inställningarväljer Push.Under Settings, select Push. Välj sedan konfigurera push-meddelandetjänster.Then select Configure push notification services.
  3. Gå till Google (GCM) .Go to Google (GCM). Ange den äldre FCM-servernyckel som du fick från Firebase-konsolen och välj sedan spara.Enter the FCM legacy server key that you obtained from the Firebase console, and then select Save.

Din tjänst har nu konfigurerats för att fungera med Firebase Cloud Messaging.Your service is now configured to work with Firebase Cloud Messaging.

Konfigurera din Cordova-app för AndroidConfigure your Cordova app for Android

Öppna config. XMLi Cordova-appen.In your Cordova app, open config.xml. Ersätt sedan Your_Project_ID med det numeriska projekt-ID: t för din app från Google Developer-konsolen.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>

Öppna index. js.Open index.js. Uppdatera sedan koden för att använda ditt numeriska projekt-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: {}
});

Konfigurera Android-enheten för USB-felsökningConfigure your Android device for USB debugging

Innan du kan distribuera programmet till din Android-enhet måste du aktivera USB-felsökning.Before you can deploy your application to your Android Device, you need to enable USB debugging. Utför följande steg på din Android-telefon:Take the following steps on your Android phone:

  1. Gå till inställningar@no__t – 1om telefonen.Go to Settings > About phone. Tryck sedan på build-numret tills utvecklarläge är aktiverat (ungefär sju gånger).Then tap the Build number until developer mode is enabled (about seven times).
  2. I inställningar > alternativ för utvecklareaktiverar du USB-felsökning.Back in Settings > Developer Options, enable USB debugging. Anslut sedan din Android-telefon till din utvecklings dator med en USB-kabel.Then connect your Android phone to your development PC with a USB cable.

Vi har testat detta med en Google Nexus 5X-enhet som kör Android 6,0 (Marshmallow).We tested this using a Google Nexus 5X device running Android 6.0 (Marshmallow). Men metoderna är gemensamma för alla moderna Android-versioner.However, the techniques are common across any modern Android release.

Installera Google Play-tjänsterInstall Google Play Services

Push-plugin-programmet använder Android Google Play-tjänster för push-meddelanden.The push plugin relies on Android Google Play Services for push notifications.

  1. I Visual Studio väljer du verktyg > Android > Android SDK Manager.In Visual Studio, select Tools > Android > Android SDK Manager. Expandera sedan mappen extras .Then expand the Extras folder. Markera lämpliga rutor för att se till att var och en av följande SDK: er installeras:Check the appropriate boxes to ensure that each of the following SDKs is installed:

    • Android 2,3 eller högreAndroid 2.3 or higher
    • Google databas revision 27 eller högreGoogle Repository revision 27 or higher
    • Google Play-tjänster 9.0.2 eller högreGoogle Play Services 9.0.2 or higher
  2. Välj installera paket.Select Install Packages. Vänta sedan på att installationen ska slutföras.Then wait for the installation to finish.

De aktuella bibliotek som krävs visas i dokumentationen för PhoneGap-plugin-push-installation.The current required libraries are listed in the phonegap-plugin-push installation documentation.

Testa push-meddelanden i appen på AndroidTest push notifications in the app on Android

Nu kan du testa push-meddelanden genom att köra appen och infoga objekt i TodoItem-tabellen.You can now test push notifications by running the app and inserting items in the TodoItem table. Du kan testa från samma enhet eller från en andra enhet, förutsatt att du använder samma server del.You can test from the same device or from a second device, as long as you are using the same back end. Testa din Cordova-app på Android-plattformen på något av följande sätt:Test your Cordova app on the Android platform in one of the following ways:

  • På en fysisk enhet: Anslut din Android-enhet till din utvecklings dator med en USB-kabel.On a physical device: Attach your Android device to your development computer with a USB cable. I stället för Google Android-emulatorväljer du enhet.Instead of Google Android Emulator, select Device. Visual Studio distribuerar programmet till enheten och kör programmet.Visual Studio deploys the application to the device and runs the application. Sedan kan du interagera med programmet på enheten.You can then interact with the application on the device.

    Skärm delnings program som Mobizen kan hjälpa dig att utveckla Android-program.Screen-sharing applications such as Mobizen can assist you in developing Android applications. Mobizen projekt på din Android-skärm till en webbläsare på din dator.Mobizen projects your Android screen to a web browser on your PC.

  • På en Android-emulator: Det finns ytterligare konfigurations steg som krävs när du använder en emulator.On an Android emulator: There are additional configuration steps that are required when you're using an emulator.

    Se till att du distribuerar till en virtuell enhet som har Google-API: er inställda som mål, som du ser i AVD-hanteraren (Android Virtual Device).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.

    Virtuella Android-Enhetshanteraren

    Om du vill använda en snabbare x86-emulator installerar du HAXM-drivrutinenoch konfigurerar sedan emulatorn för att använda den.If you want to use a faster x86 emulator, install the HAXM driver, and then configure the emulator to use it.

    Lägg till ett Google-konto till Android-enheten genom att välja appar > Inställningar > Lägg till konto.Add a Google account to the Android device by selecting Apps > Settings > Add account. Följ sedan anvisningarna.Then follow the prompts.

    Lägga till ett Google-konto till Android-enheten

    Kör ToDoList-appen som tidigare och infoga ett nytt att göra-objekt.Run the todolist app as before and insert a new todo item. Den här gången visas en meddelande ikon i meddelande fältet.This time, a notification icon is displayed in the notification area. Du kan öppna meddelande lådan för att visa all meddelande text.You can open the notification drawer to view the full text of the notification.

    Visa meddelande

Valfritt Konfigurera och kör på iOS(Optional) Configure and run on iOS

Det här avsnittet används för att köra Cordova-projektet på iOS-enheter.This section is for running the Cordova project on iOS devices. Om du inte arbetar med iOS-enheter kan du hoppa över det här avsnittet.If you aren't working with iOS devices, you can skip this section.

Installera och kör iOS-fjärrbuild-agenten på en Mac-eller moln tjänstInstall and run the iOS remote build agent on a Mac or cloud service

Innan du kan köra en Cordova-app på iOS med hjälp av Visual Studio går du igenom stegen i installations guiden för iOS för att installera och köra fjärrbuild-agenten.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.

Se till att du kan bygga appen för iOS.Make sure you can build the app for iOS. Stegen i installations guiden krävs för att skapa appen för iOS från Visual Studio.The steps in the setup guide are required for building the app for iOS from Visual Studio. Om du inte har en Mac kan du skapa för iOS med hjälp av fjärran sluten build-agenten på en tjänst som MacInCloud.If you do not have a Mac, you can build for iOS by using the remote build agent on a service like MacInCloud. Mer information finns i köra iOS-appen i molnet.For more information, see Run your iOS app in the cloud.

Anteckning

Xcode 7 eller senare krävs för att använda push-plugin-programmet på iOS.Xcode 7 or greater is required to use the push plugin on iOS.

Hitta det ID som ska användas som app-IDFind the ID to use as your App ID

Innan du registrerar appen för push-meddelanden öppnar du config. xml i Cordova-appen, letar reda på värdet id i Widgetläget och kopierar det sedan för senare användning.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. I följande XML är ID: t 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">

Använd den här identifieraren senare när du skapar ett app-ID på Apples utvecklings Portal.Later, use this identifier when you create an App ID on Apple's developer portal. Om du skapar ett annat app-ID på Developer-portalen måste du utföra några ytterligare steg senare i den här självstudien.If you create a different App ID on the developer portal, you must take a few extra steps later in this tutorial. ID: t i elementet widget måste matcha app-ID: t i Developer-portalen.The ID in the widget element must match the App ID on the developer portal.

Registrera appen för push-meddelanden på Apples utvecklings PortalRegister the app for push notifications on Apple's developer portal

Titta på en video som visar liknande stegWatch a video showing similar steps

Konfigurera Azure för att skicka push-meddelandenConfigure Azure to send push notifications

  1. Starta på en Mac Nyckelhanterare.On your Mac, launch Keychain Access. I det vänstra navigeringsfältet under kategoriöppnar mina certifikat.On the left navigation bar, under Category, open My Certificates. Hitta SSL-certifikatet som du hämtade i föregående avsnitt och lämna ut innehållet.Find the SSL certificate that you downloaded in the previous section, and then disclose its contents. Välj endast certifikatet (Välj inte den privata nyckeln).Select only the certificate (do not select the private key). Sedan exportera det.Then export it.
  2. I den Azure-portalenväljer Bläddra bland alla > Apptjänster.In the Azure portal, select Browse All > App Services. Sedan väljer Mobile Apps serverdel.Then select your Mobile Apps back end.
  3. Under inställningarväljer App Service Push.Under Settings, select App Service Push. Välj sedan namnet på din meddelandehubb.Then select your notification hub name.
  4. Gå till Apple Push Notification Services > överför certifikat.Go to Apple Push Notification Services > Upload Certificate. Ladda upp .p12-filen som att välja rätt läge (beroende på om dina SSL-klientcertifikat från tidigare är produktions- eller sandbox).Upload the .p12 file, selecting the correct Mode (depending on whether your client SSL certificate from earlier is production or sandbox). Spara ändringarna.Save any changes.

Din tjänst har nu konfigurerats för att fungera med push-meddelanden på iOS.Your service is now configured to work with push notifications on iOS.

Kontrol lera att ditt app-ID matchar din Cordova-appVerify that your App ID matches your Cordova app

Om app-ID: t som du skapade i ditt Apple Developer-konto redan matchar ID: t för widgets-elementet i filen config. XML, kan du hoppa över det här steget.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. Men om ID: na inte matchar, utför du följande steg:However, if the IDs don't match, take the following steps:

  1. Ta bort mappen plattformar från projektet.Delete the platforms folder from your project.
  2. Ta bort mappen plugin-program från projektet.Delete the plugins folder from your project.
  3. Ta bort mappen node_modules från projektet.Delete the node_modules folder from your project.
  4. Uppdatera ID-attributet för widgeten-elementet i filen config. xml för att använda det app-ID som du skapade i ditt Apple Developer-konto.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. Återskapa ditt projekt.Rebuild your project.
Testa push-meddelanden i din iOS-appTest push notifications in your iOS app
  1. Se till att iOS är valt som distributions mål i Visual Studio.In Visual Studio, make sure that iOS is selected as the deployment target. Välj sedan enhet för att köra push-meddelanden på den anslutna iOS-enheten.Then select Device to run the push notifications on your connected iOS device.

    Du kan köra push-meddelanden på en iOS-enhet som är ansluten till din dator med iTunes.You can run the push notifications on an iOS device that's connected to your PC with iTunes. IOS-simulatorn stöder inte push-meddelanden.The iOS Simulator does not support push notifications.

  2. Välj knappen Kör eller F5 i Visual Studio för att skapa projektet och starta appen i en iOS-enhet.Select the Run button or F5 in Visual Studio to build the project and start the app in an iOS device. Välj OK för att acceptera push-meddelanden.Then select OK to accept push notifications.

    Anteckning

    Appen begär en bekräftelse för push-meddelanden under den första körningen.The app requests confirmation for push notifications during the first run.

  3. Skriv en aktivitet i appen och välj sedan plus ikonen (+) .In the app, type a task, and then select the plus (+) icon.

  4. Verifiera att ett meddelande har tagits emot.Verify that a notification was received. Välj OK för att stänga meddelandet.Then select OK to dismiss the notification.

Valfritt Konfigurera och köra i Windows(Optional) Configure and run on Windows

I det här avsnittet beskrivs hur du kör appen Apache Cordova på Windows 10-enheter (PhoneGap push-plugin-programmet stöds i Windows 10).This section describes how to run the Apache Cordova app project on Windows 10 devices (the PhoneGap push plugin is supported on Windows 10). Om du inte arbetar med Windows-enheter kan du hoppa över det här avsnittet.If you are not working with Windows devices, you can skip this section.

Registrera Windows-appen för push-meddelanden med WNSRegister your Windows app for push notifications with WNS

Om du vill använda Store-alternativen i Visual Studio väljer du ett Windows-mål i listan med plattforms plattformar, till exempel Windows-x64 eller 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. (Undvik Windows-AnyCPU för push-meddelanden.)(Avoid Windows-AnyCPU for push notifications.)

  1. I Visual Studio Solution Explorer högerklickar du på approjektet Windows Store.In Visual Studio Solution Explorer, right-click the Windows Store app project. Välj sedan Store > associera App med Store.Then select Store > Associate App with the Store.

    Associera app med Windows Store

  2. I guiden väljer du nästa.In the wizard, select Next. Logga sedan in med ditt Microsoft-konto.Then sign in with your Microsoft account. I reservera ett nytt appnamn, Skriv ett namn för din app och välj sedan reservera.In Reserve a new app name, type a name for your app, and then select Reserve.

  3. När appregistreringen har skapats väljer du namnet på nya appen.After the app registration is successfully created, select the new app name. Välj nästa, och välj sedan associera.Select Next, and then select Associate. Den här processen lägger till registreringsinformationen som krävs Windows Store i programmanifestet.This process adds the required Windows Store registration information to the application manifest.

  4. Upprepa steg 1 och 3 för Windows Phone Store-app-projekt med hjälp av samma registreringen du skapade tidigare för Windows Store-app.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. Gå till den Windows Dev Center, och sedan logga in med ditt Microsoft-konto.Go to the Windows Dev Center, and then sign in with your Microsoft account. I Mina appar, Välj ny appregistrering.In My apps, select the new app registration. Expandera sedan Services > Push-meddelanden.Then expand Services > Push notifications.

  6. På den Push-meddelanden sidan under Windows Push Notification Services (WNS) och Microsoft Azure Mobile Appsväljer webbplatsen Live-tjänster.On the Push notifications page, under Windows Push Notification Services (WNS) and Microsoft Azure Mobile Apps, select Live Services site. Anteckna värdena för den paket-SID och aktuella värde i Programhemlighet.Make a note of the values of the Package SID and the current value in Application Secret.

    Appinställningen i developer center

    Viktigt

    Programhemligheten och paket-SID:et är viktiga säkerhetsuppgifter.The application secret and package SID are important security credentials. Inte dela dessa värden med vem som helst eller distribuera dem med din app.Don't share these values with anyone or distribute them with your app.

Titta på en video som visar liknande stegWatch a video showing similar steps

Konfigurera Notification Hub för WNSConfigure the notification hub for WNS

  1. I den Azure-portalenväljer Bläddra bland alla > Apptjänster.In the Azure portal, select Browse All > App Services. Sedan väljer Mobile Apps serverdel.Then select your Mobile Apps back end. Under inställningarväljer App Service Push.Under Settings, select App Service Push. Välj sedan namnet på din meddelandehubb.Then select your notification hub name.

  2. Gå till Windows (WNS) .Go to Windows (WNS). Ange sedan den säkerhetsnyckel (klienthemlighet) och paket-SID som du fick från webbplatsen för Live-tjänster.Then enter the Security key (client secret) and Package SID that you obtained from the Live Services site. Välj sedan spara.Next, select Save.

    Ange WNS-nyckeln i portalen

Serverdelen har nu konfigurerats så att WNS för att skicka push-meddelanden.Your back end is now configured to use WNS to send push notifications.

Konfigurera Cordova-appen så att den stöder Windows Push-meddelandenConfigure your Cordova app to support Windows push notifications

Öppna konfigurations designern genom att högerklicka på config. XML.Open the configuration designer by right-clicking config.xml. Välj sedan Visa designer.Then select View Designer. Välj sedan fliken Windows och välj sedan Windows 10 under Windows mål version.Next, select the Windows tab, and then select Windows 10 under Windows Target Version.

Om du vill ha stöd för push-meddelanden i dina standard-(debug)-versioner öppnar du filen build. JSON .To support push notifications in your default (debug) builds, open the build.json file. Kopiera sedan konfigurationen "Release" till din fel söknings konfiguration.Then copy the "release" configuration to your debug configuration.

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

Efter uppdateringen ska build. JSON -filen innehålla följande kod: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"
        }
    }

Bygg appen och kontrol lera att du inte har några fel.Build the app and verify that you have no errors. Nu bör klient programmet registreras för meddelanden från Mobile Apps Server del.Your client app should now register for the notifications from the Mobile Apps back end. Upprepa det här avsnittet för alla Windows-projekt i din lösning.Repeat this section for every Windows project in your solution.

Testa push-meddelanden i Windows-appenTest push notifications in your Windows app

I Visual Studio kontrollerar du att en Windows-plattform är vald som distributions mål, till exempel Windows-x64 eller Windows-x86.In Visual Studio, make sure that a Windows platform is selected as the deployment target, such as Windows-x64 or Windows-x86. Om du vill köra appen på en Windows 10-dator som är värd för Visual Studio väljer du lokal dator.To run the app on a Windows 10 PC that's hosting Visual Studio, choose Local Machine.

  1. Klicka på knappen Kör för att skapa projektet och starta appen.Select the Run button to build the project and start the app.

  2. I appen anger du ett namn för en ny todoitem och väljer sedan plus ikonen (+) för att lägga till den.In the app, type a name for a new todoitem, and then select the plus (+) icon to add it.

Verifiera att ett meddelande tas emot när objektet läggs till.Verify that a notification is received when the item is added.

Nästa stegNext steps

Lär dig hur du använder följande SDK: er:Learn how to use the following SDKs: