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

ÖversiktOverview

I kursen får du lägga till push-meddelanden i [Apache Cordova Snabbstart]-projektet 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 quick start] project so that a push notification is sent to the device every time a record is inserted.

Om du inte använder hämtade Snabbstart serverprojekt måste push notification extension-paketet.If you do not use the downloaded quick start server project, you need the push notification extension package. Mer information finns i arbeta med serverdelen .NET SDK för Azure Mobile Apps.For more information, see Work with the .NET backend server SDK for Azure Mobile Apps.

FörhandskravPrerequisites

Den här kursen ingår en Apache Cordova-program som utvecklats med Visual Studio 2015 som körs på Google Android-emulatorn, en Android-enhet, en Windows-enhet och en iOS-enhet.This tutorial covers an Apache Cordova application developed with Visual Studio 2015 that runs on the Google Android Emulator, an Android device, a Windows device, and an iOS device.

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

Konfigurera en meddelandehubbConfigure a notification hub

Funktionen Mobilappar i Azure App Service använder Azure Notification Hubs att skicka push-meddelanden, så att du ska konfigurera en meddelandehubb för din mobila app.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-portalen, gå till Apptjänster, och klicka sedan på din app-serverdel.In the [Azure portal], go to App Services, and then click your app back end. Under inställningar, klickar du på Push.Under Settings, click Push.
  2. Klicka på Anslut att lägga till en resurs för notification hub i appen.Click Connect to add a notification hub resource to the app. Du kan antingen skapa ett nav eller ansluta till en befintlig.You can either create a hub or connect to an existing one.

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

Se en video som visar stegen i det här avsnittetWatch a video showing steps in this section

Uppdatera serverprojektetUpdate the server project

I det här avsnittet uppdatera koden i Mobile Apps serverdel projektet att skicka ett push-meddelande varje gång en ny artikel har lagts 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. Detta drivs av den mallen funktion i Azure Notification Hubs, aktivera push-meddelanden för flera plattformar.This is powered by the template feature of Azure Notification Hubs, enabling cross-platform pushes. Olika klienter registreras för push-meddelanden med hjälp av mallar och en enda universal push får åtkomst till alla klientplattformar.The various clients are registered for push notifications using templates, and a single universal push can get to all client platforms.

Välj något av följande procedurer som matchar din serverdel projekttypen—antingen .NET-serverdel eller Node.js-serverdel.Choose one of the following procedures that matches your back-end project type—either .NET back end or Node.js back end.

.NET backend-projekt.NET back-end project

  1. Högerklicka på serverprojekt i Visual Studio och klicka på hantera NuGet-paket.In Visual Studio, right-click the server project and click Manage NuGet Packages. Sök efter Microsoft.Azure.NotificationHubs, och klicka sedan på installera.Search for Microsoft.Azure.NotificationHubs, and then click Install. Detta installerar Notification Hubs-biblioteket för att skicka meddelanden från din serverdel.This installs the Notification Hubs library for sending notifications from your back end.
  2. Öppna i project server domänkontrollanter > TodoItemController.cs, och Lägg till följande using-instruktioner:In the server project, open Controllers > TodoItemController.cs, and add the following using statements:

     using System.Collections.Generic;
     using Microsoft.Azure.NotificationHubs;
     using Microsoft.Azure.Mobile.Server.Config;
    
  3. I den PostTodoItem metod, Lägg 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);
    
     // Sending the message so that all template registrations that contain "messageParam"
     // will 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");
     }
    

    Detta skickar ett meddelande i mallen som innehåller objektet. Text när ett nytt objekt infogas.This sends a template notification that contains the item.Text when a new item is inserted.

  4. Publicera om serverprojektet.Republish the server project.

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

  1. Om du inte redan gjort det, hämta backend-snabbstartsprojekt, eller annan användning av online redigeraren i Azure portal.If you haven't already done so, download the quickstart back-end project, or else use the online editor in the Azure portal.
  2. Ersätt den befintliga koden i todoitem.js med följande:Replace the existing code in todoitem.js with the following:

     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 http://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;  
    

    Detta skickar ett meddelande i mallen som innehåller item.text när ett nytt objekt infogas.This sends a template notification that contains the item.text when a new item is inserted.

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

Ändra din Cordova-appModify your Cordova app

Se till att projektet Apache Cordova-app är redo att hantera push-meddelanden genom att installera pluginprogrammet Cordova push plus alla plattformsspecifika push-tjänster.Ensure your Apache Cordova app project is ready to handle push notifications by installing the Cordova push plugin plus any platform-specific push services.

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

Om ditt projekt använder en tidigare version av Apache Cordova än v6.1.1, uppdatera klientprojektet.If your project uses a version of Apache Cordova earlier than v6.1.1, update the client project. Så här uppdaterar projektet:To update the project:

  • Högerklicka på config.xml att öppna configuration designer.Right-click config.xml to open the configuration designer.
  • Välj fliken plattformar.Select the Platforms tab.
  • Välj 6.1.1 i den Cordova CLI textruta.Choose 6.1.1 in the Cordova CLI text box.
  • Välj skapa, sedan skapa lösning att uppdatera projektet.Choose Build, then Build Solution to update the project.

Installera push plugin-programmetInstall the push plugin

Apache Cordova-program hanterar inte internt enhet eller nätverket funktioner.Apache Cordova applications do not natively handle device or network capabilities. Dessa funktioner som tillhandahålls av plugin-program som publicerats antingen på [npm] [ 10] eller på GitHub.These capabilities are provided by plugins that are published either on npm or on GitHub. Den phonegap-plugin-push plugin-programmet används för att hantera nätverk push-meddelanden.The phonegap-plugin-push plugin is used to handle network push notifications.

Du kan installera pluginprogrammet push i något av följande sätt:You can install the push plugin in one of these ways:

Från Kommandotolken:From the command-prompt:

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

cordova plugin add phonegap-plugin-push

Från Visual Studio:From within Visual Studio:

  1. I Solution Explorer öppnar den config.xml klickar du på filen plugin-program > anpassadväljer Git som installationskälla, ange https://github.com/phonegap/phonegap-plugin-push som källa.In Solution Explorer, open the config.xml file click Plugins > Custom, select Git as the installation source, then enter https://github.com/phonegap/phonegap-plugin-push as the source.

  2. Klicka på pilen bredvid installationskälla.Click the arrow next to the installation source.

  3. I SENDER_ID, om du redan har ett numeriskt projekt-ID för Google Developer Console-projekt, du kan lägga till den 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 kan du ange en platshållarvärde, till exempel 777777.Otherwise, enter a placeholder value, like 777777. Om du utvecklar för Android, kan du uppdatera det här värdet i config.xml senare.If you are targeting Android, you can update this value in config.xml later.
  4. Klicka på Lägg till.Click Add.

Push-plugin-programmet har installerats.The push plugin is now installed.

Installera plugin-program för enhetInstall the device plugin

Följ samma steg som du använde för att installera push plugin-programmet.Follow the same procedure you used to install the push plugin. Lägga till plugin-program för enhet från listan över Core plugin-program (klicka på plugin-program > Core att hitta den).Add the Device plugin from the Core plugins list (click Plugins > Core to find it). Du behöver den här plugin-programmet för att hämta plattformsnamnet på.You need this plugin to obtain the platform name.

Registrera din enhet på programmet uppstartRegister your device on application start-up

Vi ta först minimal kod för Android.Initially, we include some minimal code for Android. Senare ändra app att köras på iOS- eller Windows 10.Later, modify the app to run on iOS or Windows 10.

  1. Lägg till ett anrop till registerForPushNotifications under återanrop för inloggningen eller längst ned i den onDeviceReady metod:Add a call to registerForPushNotifications during the callback for the login process, or at the bottom of the onDeviceReady method:

     // Login 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);
    

    Det här exemplet visar anropar registerForPushNotifications när autentiseringen lyckas.This example shows calling registerForPushNotifications after authentication succeeds. Du kan anropa registerForPushNotifications() så ofta som krävs.You can call registerForPushNotifications() as often as is required.

  2. Lägg till de nya registerForPushNotifications metoden på följande sätt: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 Your_Project_ID med numeriskt projektet ID för din app från den Google Developer Console.(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 vi utvecklar Google Android-plattformen först, måste du aktivera Firebase Cloud Messaging.Since we 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 ditt projekt klickar du på Lägg till Firebase i din Android-app och följer anvisningarna.After your project is created, click Add Firebase to your Android app and follow the instructions provided.

  3. Klicka på ditt projektkugghjul i Firebase-konsolen och klicka sedan på Projektinställningar.In the Firebase console, click the cog for your project and then click Project Settings.

  4. Klicka på fliken Cloud Messaging i dina projektinställningar och kopiera värdet för Servernyckel och Avsändar-ID.Click the Cloud Messaging tab in your project settings, and copy the value of the Server key and Sender ID. Dessa värden använder du senare för att konfigurera åtkomstprincipen för meddelandehubbar och din meddelandehanterare i appen.These values will be used later to configure the notification hub access policy, and your notification handler in the app.

Konfigurera serverdelen för Mobilappen för att skicka push-begäranden som använder FCMConfigure the Mobile App backend to send push requests using FCM

  1. I den Azure-portalen, klickar du på Bläddra bland alla > Apptjänster, och klicka på din Mobile Apps-serverdel.In the Azure portal, click Browse All > App Services, and click your Mobile Apps back end. Under inställningar, klickar du på App Service Push, och klicka sedan på namnet på din meddelandehubb.Under Settings, click App Service Push, and then click your notification hub name.
  2. Gå till Google (GCM)ange FCM servernyckeln som du fick från konsolen Firebase och klicka sedan på spara.Go to Google (GCM), enter the FCM server key you obtained from the Firebase console, and then click Save.

Tjänsten har 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.xml i Cordova-app och Ersätt Your_Project_ID med numeriskt projektet ID för din app från den Google Developer Console.In your Cordova app, open config.xml and 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 och uppdatera koden med numeriska projekt-ID.Open index.js and 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 din Android-enhet 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:Perform the following steps on your Android phone:

  1. Gå till inställningar > om telefonen, tryck på Build-nummer förrän utvecklarläge har aktiverats (ungefär sju gånger).Go to Settings > About phone, then tap the Build number until developer mode is enabled (about seven times).
  2. Tillbaka i inställningar > utvecklaralternativ aktivera USB-felsökning, Anslut din Android-telefon till din utvecklings-dator med en USB-kabel.Back in Settings > Developer Options enable USB debugging, then connect your Android phone to your development PC with a USB Cable.

Vi testade detta med hjälp av en Google Nexus 5 X-enhet som kör Android 6.0 (Marshmallow).We tested this using a Google Nexus 5X device running Android 6.0 (Marshmallow). Teknikerna som är dock gemensamma för alla moderna Android-versionen.However, the techniques are common across any modern Android release.

Installera Google Play-tjänsterInstall Google Play Services

Push-plugin-programmet är beroende av 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 klickar du på verktyg > Android > Android SDK Manager, expandera den tillägg mappen och markera kryssrutan för att kontrollera att var och en av följande SDK är installerat.In Visual Studio, click Tools > Android > Android SDK Manager, expand the Extras folder and check the box to make sure that each of the following SDKs is installed.

    • Android 2.3 eller högreAndroid 2.3 or higher
    • Google databasen revision 27 eller högreGoogle Repository revision 27 or higher
    • Google Play Services 9.0.2 eller högreGoogle Play Services 9.0.2 or higher
  2. Klicka på installationspaket och vänta på att installationen ska slutföras.Click Install Packages and wait for the installation to complete.

De aktuella bibliotek som krävs finns i den phonegap-plugin-push-installation av dokumentationen.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

Du kan nu testa push-meddelanden genom att köra appen och lägga till objekt i tabellen TodoItem.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 annan enhet som du använder samma backend.You can test from the same device or from a second device, as long as you are using the same backend. Testa din Cordova-app på Android-plattformen i 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 utvecklingsdator 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-emulatornväljer enhet.Instead of Google Android Emulator, select Device. Visual Studio distribuerar programmet till enheten och därefter körs programmet.Visual Studio deploys the application to the device and then runs the application. Du kan sedan interagera med program på enheten.You can then interact with the application on the device.

    Förbättra din utvecklingsmetod.Improve your development experience. Dela program som skärm [Mobizen] [ 20] kan hjälpa dig att utveckla ett Android-program.Screen sharing applications such as Mobizen can assist you in developing an Android application. Mobizen projekt skärmen Android till en webbläsare på din dator.Mobizen projects your Android screen to a web browser on your PC.

  • På en Android-emulatorn: finns ytterligare konfigurationssteg som krävs vid körning på en emulator.On an Android emulator: There are additional configuration steps required when running on an emulator.

    Kontrollera att du distribuerar till en virtuell enhet som innehåller Google APIs som mål, som visas i hanteraren för Android Virtual Device (AVD).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.

    Om du vill använda en snabbare x86 emulatorn du [installera drivrutinen HAXM] [ 11] och konfigurera emulatorn för att använda den.If you want to use a faster x86 emulator, you install the HAXM driver and configure the emulator to use it.

    Lägg till ett Google-konto för Android-enhet genom att klicka på appar > inställningar > Lägg till konto, följ sedan anvisningarna.Add a Google account to the Android device by clicking Apps > Settings > Add account, then follow the prompts.

    Kör appen todolist som innan och infoga ett nytt todo-objekt.Run the todolist app as before and insert a new todo item. Den här tiden kan visas en meddelandeikonen i meddelandefältet.This time, a notification icon is displayed in the notification area. Du kan öppna lådan meddelande om du vill visa den fullständiga texten i meddelandet.You can open the notification drawer to view the full text of the notification.

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

Det här avsnittet handlar om 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 are not working with iOS devices, you can skip this section.

Installera och köra iOS remote build-agent på en Mac- eller molnet 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 Visual Studio, gå igenom stegen i den [iOS inställningsguiden] [ 12] att installera och köra remote build-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.

Kontrollera att du kan bygga appen för iOS.Make sure you can build the app for iOS. Stegen i guiden för installation krävs för att skapa för iOS från Visual Studio.The steps in the setup guide are required to build for iOS from Visual Studio. Om du inte har en Mac, kan du skapa för iOS med fjärråtkomst build-agenten på en tjänst som MacInCloud.If you do not have a Mac, you can build for iOS using the remote build agent on a service like MacInCloud. Mer information finns i kör iOS-app i molnet.For more info, 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 ID som ska användas som App-IDFind the ID to use as your App ID

Innan du registrerar appen för push-meddelanden, öppna config.xml i Cordova-app hitta den id attributvärdet i elementet widget och kopiera den 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 copy it for later use. I följande XML-ID: T är 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="http://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å Apple developer-portalen.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 extra steg senare i den här kursen.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 widget-elementet måste matcha det App-ID på developer-portalen.The ID in the widget element must match the App ID on the developer portal.

Registrera appen för push-meddelanden på Apple developer-portalenRegister 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. På en Mac starta 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 you downloaded in the previous section, and disclose its contents. Välj endast certifikatet (inte Välj den privata nyckeln), och exportera det.Select only the certificate (do not select the private key), and export it.
  2. I den Azure-portalen, klickar du på Bläddra bland alla > Apptjänster, och klicka på din Mobile Apps-serverdel.In the Azure portal, click Browse All > App Services, and click your Mobile Apps back end. Under inställningar, klickar du på App Service Push, och klicka sedan på namnet på din meddelandehubb.Under Settings, click App Service Push, and then click your notification hub name. Gå till Apple Push Notification Services > överför certifikat.Go to Apple Push Notification Services > Upload Certificate. Överföra filen .p12 att välja rätt läge (beroende på om din SSL-klientcertifikat från tidigare är produktion 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.

Tjänsten har konfigurerats för att fungera med push-meddelanden i iOS.Your service is now configured to work with push notifications on iOS.

Kontrollera att din App-ID som matchar din Cordova-appVerify that your App ID matches your Cordova app

Om App-ID som du redan skapat i Apple Developer kontot matchar ID för elementet widget i config.xml, kan du hoppa över det här steget.If the App ID you created in your Apple Developer Account already matches the ID of the widget element in config.xml, you can skip this step. Dock ID: N inte matchar gör du följande: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 ditt projekt.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 attributet id för elementet widget i config.xml använda App-ID som du skapade i Apple Developer-konto.Update the id attribute of the widget element in config.xml to use the App ID that you created in your Apple Developer Account.
  5. Återskapa projektet.Rebuild your project.
Testa push-meddelanden i iOS-appTest push notifications in your iOS app
  1. I Visual Studio, se till att iOS väljs som mål för distribution och välj sedan enhet ska köras på den anslutna iOS-enheten.In Visual Studio, make sure that iOS is selected as the deployment target, and then choose Device to run on your connected iOS device.

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

  2. Tryck på den kör knappen eller F5 i Visual Studio för att skapa projektet och starta appen i en iOS-enhet, och klicka på OK att ta emot push-meddelanden.Press the Run button or F5 in Visual Studio to build the project and start the app in an iOS device, then click OK to accept push notifications.

    Anteckning

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

  3. I appen, skriver du en uppgift och klicka sedan på plustecknet (+) ikon.In the app, type a task, and then click the plus (+) icon.

  4. Kontrollera att ett meddelande tas emot och sedan klicka på OK för att stänga meddelandet.Verify that a notification is received, then click OK to dismiss the notification.

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

Det här avsnittet handlar om att köra Apache Cordova-app-projekt på Windows 10-enheter (PhoneGap push plugin-programmet stöds på Windows 10).This section is for running 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 din Windows-app för push-meddelanden med WNSRegister your Windows app for push notifications with WNS

Om du vill använda Store-alternativ i Visual Studio, Välj ett mål för Windows från listan över plattformar som lösning som Windows x64 eller Windows x86 (undvika Windows Platform för push-meddelanden).To use the Store options in Visual Studio, select a Windows target from the Solution Platforms list, like Windows-x64 or Windows-x86 (avoid Windows-AnyCPU for push notifications).

  1. Högerklicka på Windows Store-app-projekt i Visual Studio Solution Explorer och klicka på Store > associera appen med butiken.In Visual Studio Solution Explorer, right-click the Windows Store app project, and click Store > Associate App with the Store.

    Associera appen med Windows Store

  2. I guiden klickar du på nästa, och logga in med ditt Microsoft-konto.In the wizard, click Next, and sign in with your Microsoft account. Skriv ett namn för din app i reservera ett nytt namn för appen, och klicka sedan på reservera.Type a name for your app in Reserve a new app name, and then click Reserve.
  3. Efter registreringen app har skapats, Välj ny programnamn, klicka på nästa, och klicka sedan på associera.After the app registration is successfully created, select the new app name, click Next, and then click Associate. Detta lägger till den registreringsinformation som krävs för Windows Store i programmanifestet.This 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 samma registrering som 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. Bläddra till den Windows Dev Center, och logga in med ditt Microsoft-konto.Browse to the Windows Dev Center, and sign in with your Microsoft account. Klicka på den nya app registreringen i Mina appar, och expandera sedan Services > Push-meddelanden.Click the new app registration in My apps, and then expand Services > Push notifications.
  6. På den Push-meddelanden klickar du på webbplatsen Live-tjänster under Windows Push Notification Services (WNS) och Microsoft Azure Mobile Apps.On the Push notifications page, click Live Services site under Windows Push Notification Services (WNS) and Microsoft Azure Mobile Apps. 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. Lämna aldrig ut dessa uppgifter till någon och distribuera dem inte tillsammans med din app.Do not share these values with anyone or distribute them with your app.

Se en video som visar liknande stegWatch a video showing similar steps

Konfigurera meddelandehubben för WNSConfigure the notification hub for WNS

  1. I den Azure-portalen, klickar du på Bläddra bland alla > Apptjänster, och klicka på din Mobile Apps-serverdel.In the Azure portal, click Browse All > App Services, and click your Mobile Apps back end. Under inställningar, klickar du på App Service Push, och klicka sedan på namnet på din meddelandehubb.Under Settings, click App Service Push, and then click your notification hub name.
  2. Gå till Windows (WNS), ange den säkerhetsnyckeln (klienthemlighet) och paket-SID som du fick från webbplatsen för Live-tjänster och klicka sedan på spara .Go to Windows (WNS), enter the Security key (client secret) and Package SID that you obtained from the Live Services site, and then click Save.

    Ange nyckeln WNS i portalen

Din serverdel har nu konfigurerats för att använda WNS för att skicka push-meddelanden.Your back end is now configured to use WNS to send push notifications.

Konfigurera din Cordova-app för att stödja Windows push-meddelandenConfigure your Cordova app to support Windows push notifications

Öppna configuration designer (Högerklicka på config.xml och välj Vydesigner), Välj den Windows , och välj Windows 10 under Windows målversionen.Open the configuration designer (right-click on config.xml and select View Designer), select the Windows tab, and choose Windows 10 under Windows Target Version.

Stöd för push-meddelanden i din standard (debug) versioner, öppna build.json filTo support push notifications in your default (debug) builds, open build.json file. Kopiera ”version”-konfigurationen till debug-konfiguration.Copy the "release" configuration to your debug configuration.

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

Efter uppdateringen måste bör build.json innehålla följande kod:After the update, the build.json 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"
        }
    }

Bygga appen och kontrollera att du har några fel.Build the app and verify that you have no errors. Klientappen bör nu registrera för meddelanden från serverdelen för Mobilappen.Your client app should now register for the notifications from the Mobile App backend. Upprepa det här avsnittet för varje 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

Se till att en Windows-plattform som är markerad som mål distributionen i Visual Studio 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 värd för Visual Studio väljer lokal dator.To run the app on a Windows 10 PC hosting Visual Studio, choose Local Machine.

Klicka på Kör för att bygga projektet och starta appen.Press the Run button to build the project and start the app.

Skriv ett namn för en ny todoitem i appen och klicka sedan på plustecknet (+) ikon för att lägga till den.In the app, type a name for a new todoitem, and then click the plus (+) icon to add it.

Kontrollera att ett meddelande tas emot när objektet har lagts till.Verify that a notification is received when the item is added.

Nästa stegNext Steps

  • Läs mer om [Meddelandehubbar] [ 17] mer information om push-meddelanden.Read about Notification Hubs to learn about push notifications.
  • Om du inte redan har gjort det fortsätta kursen av [att lägga till autentisering] [ 14] i din Apache Cordova-app.If you have not already done so, continue the tutorial by Adding Authentication to your Apache Cordova app.

Lär dig hur du använder SDK: er.Learn how to use the SDKs.