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

ÖversiktOverview

I den här självstudien lägger du till push-meddelanden till den Apache Cordova-snabbstarten 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 på en server måste tilläggspaket för push-meddelande.If you do not use the downloaded quickstart server project, you need the push notification extension package. Mer information finns i arbeta med SDK för .NET backend-server för Mobile Apps.For more information, see Work with the .NET back-end server SDK for Mobile Apps.

FörhandskravPrerequisites

Den här självstudien förutsätter att du har en Apache Cordova-App 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 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 serverprojektetUpdate the server project

I det här avsnittet ska uppdatera du koden i projektet backend-befintliga Mobile Apps för att skicka ett push-meddelande varje gång ett nytt objekt läggs.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 baseras på den mall funktion i Azure Notification Hubs, vilket gör det möjligt för plattformsoberoende 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 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 backend-projekttyp—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.

Projekt för .NET-serverdel.NET back-end project

  1. Högerklicka på serverprojektet 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 backend-servern.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-satser:Then add the following using statements:

    using System.Collections.Generic;
    using Microsoft.Azure.NotificationHubs;
    using Microsoft.Azure.Mobile.Server.Config;
    
  3. I den PostTodoItem metoden 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 har infogats.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-snabbstartsprojektet, eller annan användning den onlineredigeraren i Azure-portalen.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 har infogats.This process sends a template notification that contains the item.text when a new item is inserted.

  3. När du redigerar filen på den lokala datorn kan du publicera om serverprojektet.When you edit the file on your local computer, republish the server project.

Ändra din Cordova-appModify your Cordova app

För att säkerställa att ditt projekt för Apache Cordova-app är redo att hantera push-meddelanden, installerar du plugin-programmet för Cordova push 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 ä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 genom att högerklicka 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 textrutan 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 plugin-programmet pushInstall the push plugin

Apache Cordova program hanterar inte enheten eller nätverket funktioner internt.Apache Cordova applications do not natively handle device or network capabilities. Dessa funktioner tillhandahålls av plugin-program som är publicerat antingen den npm eller på GitHub.These capabilities are provided by plugins that are published either on npm or on GitHub. Den phonegap-plugin-push plugin-programmet hanterar nätverk push-meddelanden.The phonegap-plugin-push plugin handles network push notifications.

Du kan installera push-plugin-programmet i 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 du den config.xml filen.In Solution Explorer, open the config.xml file. Välj sedan 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 pilen bredvid installationskällan.Select the arrow next to the installation source.

  4. I SENDER_ID, om du redan har en numerisk projekt-ID för Google Developer Console-projekt kan du 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, till exempel 777777.Otherwise, enter a placeholder value, such as 777777. Om du utvecklar Android måste uppdatera du 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ändar-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 den installationsdokumentationen.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-programmet 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-programmet för enheten från listan över Core plugin-program.Add the Device plugin from the Core plugins list. (Du hittar det genom att välja plugin-program > Core.) Du behöver det här plugin-programmet för att hämta namnet på plattform.(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

Först har vi även inkludera vissa minimal kod för Android.Initially, we include some minimal code for Android. Du kan senare ändra appen ska 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 att logga in.Add a call to registerForPushNotifications during the callback for the sign-in process. Du kan också lägga det längst ned på 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 anropa registerForPushNotifications när autentiseringen lyckas.This example shows calling registerForPushNotifications after authentication succeeds. Du kan anropa registerForPushNotifications() så ofta det 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 den föregående koden, Ersätt 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 för att 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 Google Android-plattformen först måste aktivera du 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. Följ sedan instruktionerna som visas.Then follow the instructions that are provided. Ladda ner filen google-services.json.Download google-services.json file.

    Lägg till Firebase till 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 fliken Allmänt i projektinställningarna.Select the General tab in your project settings. Ladda ned filen google-services.json som innehåller server-API-nyckeln och klient-ID:t.Then download the google-services.json file that contains the Server API key and Client ID.
  5. Välj fliken med molnmeddelanden i projektinställningarna och kopiera sedan värdet för Äldre servernyckel.Select the Cloud Messaging tab in your project settings, and then copy the value of the Legacy server key. Du använder det här värdet när du konfigurerar åtkomstprincipen för meddelandehubben.You use this value to configure the notification hub access policy.

Konfigurera Mobile App-serverdel för att skicka push-begäran 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 i din Cordova-app config.xml.In your Cordova app, open config.xml. Ersätt sedan 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 så att dina 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 sedan på den Build-nummer förrän utvecklarläget har aktiverats (cirka 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. Därefter ansluta din Android-telefon till utvecklingen av din 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). Metoder 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 sedan den tillägg mapp.Then expand the Extras folder. Kontrollera rutorna för att säkerställa att var och en av de följande SDK: er ä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 Repository 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 tills installationen är klar.Then wait for the installation to finish.

De aktuella bibliotek som krävs finns i den modul phonegap plugin push installationsdokumentationen.The current required libraries are listed in the phonegap-plugin-push installation documentation.

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

Du kan nu test-push-meddelanden genom att köra appen och lägga till 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 annan enhet, så länge du använder samma backend-servern.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: koppla din Android-enhet till din 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 som Mobizen kan hjälpa dig utveckla Android-program.Screen-sharing applications such as Mobizen can assist you in developing Android applications. Mobizen projekt Android skärmen för att 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 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 har 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 till 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 till Android-enhet

    Kör appen todolist som innan och infoga en ny att göra-objekt.Run the todolist app as before and insert a new todo item. Den här tiden kan visas en meddelandeikon 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ör på iOS(Optional) Configure and run on iOS

Det här avsnittet handlar om att köra Cordova-projekt 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-agenten på en Mac- eller cloud serviceInstall 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å igenom stegen i den iOS konfigurera guiden att installera och köra den fjärranslutna skapandeagent.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 skapa appen för iOS.Make sure you can build the app for iOS. Stegen i konfigurationsguiden 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-dator 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 din 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 ska användas som App-IDFind the ID to use as your App ID

Innan du registrerar en app för push-meddelanden, öppna config.xml i din Cordova-app, hitta den id attributvärdet i widgeten elementet och sedan kopiera det 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="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 en 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 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 widgeten-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. 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.

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

Om App-ID som du skapade i ditt Apple Developer-konto redan matchar ID: T 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. Men om de ID: N inte matchar, gör följande:However, if the IDs don't match, take the following steps:

  1. Ta bort mappen plattformar från ditt projekt.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 ditt projekt.Delete the node_modules folder from your project.
  4. Uppdatera attributet id för widget-elementet i filen Config.XML att använda 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.
Test-push-meddelanden i din iOS-appTest push notifications in your iOS app
  1. I Visual Studio, se till att iOS väljs som mål för distributionen.In Visual Studio, make sure that iOS is selected as the deployment target. Välj sedan enhet att köra push-meddelanden på en ansluten iOS-enhet.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 accepterar 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 uppgift i appen, och välj sedan 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ör på Windows(Optional) Configure and run on Windows

Det här avsnittet beskrivs hur du kör Apache Cordova-app-projekt 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

För att använda Store-alternativ i Visual Studio, välja ett Windows-mål från listan över plattformar som lösning, 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. (Undvika Windows Platform 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.

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 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 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 fliken och välj sedan Windows 10 under Windows målversion.Next, select the Windows tab, and then select Windows 10 under Windows Target Version.

För push-meddelanden i dina standard (debug)-versioner måste du öppna den build.json fil.To support push notifications in your default (debug) builds, open the build.json file. Kopiera sedan ”utgåvan”-konfigurationen i konfigurationen av felsökning.Then copy the "release" configuration to your debug configuration.

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

Efter uppdateringen den build.json filen ska 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"
        }
    }

Skapa appar och kontrollera att du har inga 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.

Test-push-meddelanden i din Windows-appTest push notifications in your Windows app

I Visual Studio, se till att en Windows-plattform som har valts som mål distribution 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. För att köra appen på en Windows 10-dator som är värd för Visual Studio, Välj 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 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: erna:Learn how to use the following SDKs: