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 till den Apache Cordova quickstart projekt 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 nedladdade snabbstartsprojektet server måste push notification extension-paketet.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

Den här kursen förutsätter att du har en 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 ska köras på Google Android-emulatorn, 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 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 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 resurs för notification hub appen, Välj Anslut.To add a notification hub resource to the app, select Connect. Du kan antingen skapa ett nav eller ansluta till en befintlig.You can either create a hub or connect to an existing one.

    Konfigurera ett nav

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. Senare kan du konfigurera den här meddelandehubben för att ansluta till ett plattform 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.

Se en video som visar stegen i det här avsnittet.Watch 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. Den här processen drivs av den mallen funktion i Azure Notification Hubs, vilket gör att flera plattformar push-meddelanden.This process is powered by the template feature of Azure Notification Hubs, which enables 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å server-projekt i Visual Studio.In Visual Studio, right-click the server project. Välj sedan hantera NuGet-paket.Then select Manage NuGet Packages. Sök efter Microsoft.Azure.NotificationHubs, och välj sedan installera.Search for Microsoft.Azure.NotificationHubs, and then select Install. Den här processen installerar Notification Hubs-biblioteket för att skicka meddelanden från serverdelen.This process installs the Notification Hubs library for sending notifications from the back end.
  2. Öppna i project server domänkontrollanter > TodoItemController.cs.In the server project, open Controllers > TodoItemController.cs. Lägg till följande using-instruktioner:Then 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);
    
     // 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 i mallen 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 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 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 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;  
    

    Den här processen skickar ett meddelande i mallen som innehåller item.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 serverprojektet 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

Installera pluginprogrammet Cordova push plus alla plattformsspecifika push-tjänster för att säkerställa att projektet Apache Cordova-app är redo att hantera push-meddelanden.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-version i projektet.Update the Cordova version in your project.

Om ditt projekt använder en version av Apache Cordova som är äldre än version 6.1.1, uppdatera klientprojektet.If your project uses a version of Apache Cordova that's earlier than version 6.1.1, update the client project. Om du vill uppdatera projektet, gör du följande:To update the project, take the following steps:

  • Öppna configuration designer högerklickar du på config.xml.To open the configuration designer, right-click config.xml.
  • Välj den plattformar fliken.Select the Platforms tab.
  • I den Cordova CLI text markerar 6.1.1.In the Cordova CLI text box, select 6.1.1.
  • Om du vill uppdatera projektet, Välj skapa, och välj sedan skapa 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 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 eller på GitHub.These capabilities are provided by plugins that are published either on npm or on GitHub. Den phonegap-plugin-push plugin-program hanterar nätverket 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 Kommandotolken:From the command-prompt:

Kör följande kommando:Run 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 filen.In Solution Explorer, open the config.xml file. Välj därefter plugin-program > anpassad.Next, select Plugins > Custom. Välj sedan Git som installationskä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 på pilen bredvid installationskälla.Select the arrow next to the installation source.

  4. 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 ange ett platshållarvärde, exempelvis 777777.Otherwise, enter a placeholder value, such as 777777. Om du utvecklar för 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 vara installerad i rotmappen för ditt projekt för att konfigurera avsändaren-ID.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 dokumentationen.For more information, see the installation documentation.

  5. Välj Lägg till.Select 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 Core plugin-program.Add the Device plugin from the Core plugins list. (Om du vill hitta det, Välj plugin-program > Core.) Du behöver den här plugin-programmet för att hämta plattformsnamnet på.(To find it, select Plugins > Core.) You need this plugin to obtain the platform name.

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

Vi ta först minimal kod för Android.Initially, we include some minimal code for Android. Du kan senare ändra app att köras 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 återanrop för inloggning.Add a call to registerForPushNotifications during the callback for the sign-in process. Du kan också lägga det längst ned i den onDeviceReady metod: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);
    

    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 du utvecklar för Google Android-plattformen först, 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 projektet, Välj lägga till Firebase till din Android-app.After you create your project, select Add Firebase to your Android app. Följ sedan instruktionerna som tillhandahålls.Then follow the instructions that are provided.

    Lägg till Firebase i din Android-app

  3. 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

  4. Välj den allmänna fliken i dina Projektinställningar.Select the General tab in your project settings. Hämta den google services.json fil som innehåller Server API-nyckel och klient-ID.Then download the google-services.json file that contains the Server API key and Client ID.
  5. Välj den Cloud Messaging i dina Projektinställningar och sedan kopiera värdet för den äldre servernyckel.Select the Cloud Messaging tab in your project settings, and then copy the value of the Legacy server key. Du kan använda det här värdet för att konfigurera åtkomstprincipen för notification hub.You use this value to configure the notification hub access policy.

Konfigurera serverdelen för Mobilappen för att skicka push-begäranden som använder 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 notification services.Then select Configure push notification services.
  3. Gå till Google (GCM).Go to Google (GCM). Ange nyckeln FCM äldre server som du fick från konsolen Firebase och välj sedan spara.Enter the FCM legacy server key that you obtained from the Firebase console, and then select 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.In your Cordova app, open config.xml. Ersätt Your_Project_ID med numeriskt projektet ID för din app från den Google Developer Console.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 koden med 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 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. Gör följande på din Android-telefon:Take the following steps on your Android phone:

  1. Gå till inställningar > om telefonen.Go to Settings > About phone. Tryck på Build-nummer förrän utvecklarläge har aktiverats (ungefär sju gånger).Then tap the Build number until developer mode is enabled (about seven times).
  2. Tillbaka i inställningar > utvecklaralternativ, aktivera USB-felsökning.Back in Settings > Developer Options, enable USB debugging. Anslut din Android-telefon till din utveckling dator med en USB-kabel.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 väljer verktyg > Android > Android SDK Manager.In Visual Studio, select Tools > Android > Android SDK Manager. Expandera den tillägg mapp.Then expand the Extras folder. Välj lämpliga kryssrutor för att kontrollera att var och en av följande SDK är installerad: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 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. Välj installera paket.Select Install Packages. Vänta sedan för att installationen ska slutföras.Then wait for the installation to finish.

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 serverdelen.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 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 kör programmet.Visual Studio deploys the application to the device and runs the application. Du kan sedan interagera med program på enheten.You can then interact with the application on the device.

    Delning av skärmen program så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 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 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.

    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.

    Android Virtual Device Manager

    Om du vill använda en snabbare x86 emulatorn installera drivrutinen HAXM, och sedan konfigurera 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 för Android-enhet 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ägg till ett Google-konto för Android-enhet

    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.

    Visa meddelande

(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 aren't 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 konfigurera guiden 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 bygga 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 genom att använda remote 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ör iOS-app 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 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 sedan 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 then 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 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. Ö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 skapade i Apple Developer-konto redan matchar ID för widget-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. 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 the config.xml file 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.In Visual Studio, make sure that iOS is selected as the deployment target. Välj sedan enhet 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 datorn 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 den kör knappen 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 sedan OK att ta emot push-meddelanden.Then select 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. Skriv en aktivitet i appen och markera sedan på plustecknet (+) ikon.In the app, type a task, and then select the plus (+) icon.

  4. Kontrollera att ett meddelande togs emot.Verify that a notification was received. Välj sedan OK att stänga meddelandet.Then select OK to dismiss the notification.

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

Det här avsnittet beskrivs hur du kör projektet Apache Cordova-app på Windows 10-enheter (PhoneGap push plugin-programmet stöds på 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 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.To use the Store options in Visual Studio, select a Windows target from the Solution Platforms list, such as Windows-x64 or Windows-x86. (Undvika Windows Platform för push-meddelanden.)(Avoid Windows-AnyCPU for push notifications.)

  1. Högerklicka på Windows Store-app-projekt i Visual Studio Solution Explorer.In Visual Studio Solution Explorer, right-click the Windows Store app project. Välj sedan Store > associera appen med butiken.Then select Store > Associate App with the Store.

    Associera appen 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 namn för appen, Skriv ett namn för din app och markera sedan reservera.In Reserve a new app name, type a name for your app, and then select Reserve.
  3. När registreringen app har skapats, Välj ny app.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 nödvändig information för registrering av 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 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. Gå till den Windows Dev Center, och logga sedan in med ditt Microsoft-konto.Go to the Windows Dev Center, and then sign in with your Microsoft account. I Mina appar, Välj den nya app-registreringen.In My apps, select the new app registration. Expandera 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 någon eller distribuera dem med din app.Don't 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-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 den säkerhetsnyckeln (klienthemlighet) och paket-SID som du hämtade 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 därefter spara.Next, select 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 genom att högerklicka på config.xml.Open the configuration designer by right-clicking config.xml. Välj sedan Vydesigner.Then select View Designer. Välj sedan den Windows och välj sedan Windows 10 under Windows målversionen.Next, select the Windows tab, and then select Windows 10 under Windows Target Version.

Öppna filen build.json för att stödja push-meddelanden i standard (debug)-versioner.To support push notifications in your default (debug) builds, open the build.json file. Kopiera sedan ”version”-konfigurationen till debug-konfiguration.Then 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 filen build.json 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"
        }
    }

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 Mobile Apps-serverdel.Your client app should now register for the notifications from the Mobile Apps back end. 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 är värd för Visual Studio väljer lokal dator.To run the app on a Windows 10 PC that's hosting Visual Studio, choose Local Machine.

  1. Välj den kör för att skapa projektet och starta appen.Select the Run button to build the project and start the app.

  2. Skriv ett namn för en ny todoitem i appen, och välj sedan på plustecknet (+) ikon 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.

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är dig hur du använder följande SDK:Learn how to use the following SDKs: