Hinzufügen von Pushbenachrichtigungen zu Ihrer Apache Cordova-App

Überblick

In diesem Lernprogramm fügen Sie dem Apache Cordova-Schnellstartprojekt Pushbenachrichtigungen hinzu, sodass jedes Mal, wenn ein Datensatz eingefügt wird, eine Pushbenachrichtigung an das Gerät gesendet wird.

Wenn Sie das heruntergeladene Schnellstartserverprojekt nicht verwenden, benötigen Sie das Paket für die Pushbenachrichtigungserweiterung. Weitere Informationen finden Sie unter Arbeiten mit dem .NET-Back-End-Server-SDK für mobile Apps.

Voraussetzungen

In diesem Lernprogramm wird davon ausgegangen, dass Sie über eine Apache Cordova-Anwendung verfügen, die mit Visual Studio 2015 entwickelt wurde. Dieses Gerät sollte auf dem Google Android-Emulator, einem Android-Gerät, einem Windows-Gerät oder einem iOS-Gerät ausgeführt werden.

Um dieses Lernprogramm abzuschließen, benötigen Sie Folgendes:

Ein PC mit Visual Studio Community 2015 oder höher
Visual Studio-Tools für Apache Cordova
Ein aktives Azure-Konto
Ein abgeschlossenes Apache Cordova-Schnellstartprojekt
(Android) Ein Google-Konto mit einer bestätigten E-Mail-Adresse
(iOS) Eine Mitgliedschaft im Apple Developer Program und ein iOS-Gerät (iOS Simulator unterstützt keine Pushbenachrichtigungen)
(Windows) Ein Microsoft Store-Entwicklerkonto und ein Windows 10-Gerät

Konfigurieren eines Benachrichtigungshubs

Das Feature "Mobile Apps" von Azure App Service verwendet Azure Notification Hubs zum Senden von Pushs, sodass Sie einen Benachrichtigungshub für Ihre mobile App konfigurieren.

Wechseln Sie im Azure-Portalzu App Services, und wählen Sie dann Ihr App-Back-End aus. Wählen Sie unter Einstellungendie Option Pushaus.
Um der App eine Benachrichtigungshubressource hinzuzufügen, wählen Sie Verbindenaus. Sie können entweder einen Hub erstellen oder eine Verbindung mit einem vorhandenen herstellen.

Jetzt haben Sie einen Benachrichtigungshub mit Ihrem Back-End-Projekt für mobile Apps verbunden. Später konfigurieren Sie diesen Benachrichtigungshub so, dass eine Verbindung mit einem Plattformbenachrichtigungssystem (PNS) hergestellt wird, um auf Geräte zu übertragen.

Sehen Sie sich ein Video mit den Schritten in diesem Abschnitt an.

Aktualisieren des Serverprojekts

In diesem Abschnitt aktualisieren Sie Code in Ihrem vorhandenen Back-End-Projekt für mobile Apps so, dass jedes Mal, wenn ein neues Element hinzugefügt wird, eine Pushbenachrichtigung gesendet wird. Der Prozess wird von der Vorlagenfunktion von Azure Notification Hubs unterstützt, die plattformübergreifende Push-Benachrichtigungen ermöglicht. Die verschiedenen Clients werden mithilfe von Vorlagen für Pushbenachrichtigungen registriert, und ein einzelner universeller Push kann auf alle Clientplattformen übertragen werden.

Wählen Sie eine der folgenden Verfahren aus, die Ihrem Back-End-Projekttyp entsprechen – entweder .NET Back-End oder Node.js Back-End.

.NET-Back-End-Projekt

Klicken Sie in Visual Studio mit der rechten Maustaste auf das Serverprojekt. Wählen Sie dann "NuGet-Pakete verwalten" aus. Suchen Sie nach Microsoft.Azure.NotificationHubs, und wählen Sie dann Installieren aus. Dieser Vorgang installiert die Benachrichtigungshubs-Bibliothek zum Senden von Benachrichtigungen vom Back-End.

Öffnen Sie im Serverprojekt Controller>TodoItemController.cs. Fügen Sie dann die folgenden "using"-Anweisungen hinzu:

using System.Collections.Generic;
using Microsoft.Azure.NotificationHubs;
using Microsoft.Azure.Mobile.Server.Config;

Fügen Sie in der PostTodoItem-Methode den folgenden Code nach dem Aufruf von InsertAsync hinzu:

// 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");
}

Dieser Vorgang sendet eine Vorlagenbenachrichtigung, die das Element.Text enthält, wenn ein neues Element eingefügt wird.

Veröffentlichen Sie das Serverprojekt erneut.

Node.js Backend-Projekt

Richten Sie Ihr Back-End-Projekt ein.

Ersetzen Sie den vorhandenen Code in todoitem.js durch den folgenden Code:

var azureMobileApps = require('azure-mobile-apps'),
promises = require('azure-mobile-apps/src/utilities/promises'),
logger = require('azure-mobile-apps/src/logger');

var table = azureMobileApps.table();

table.insert(function (context) {
// For more information about the Notification Hubs JavaScript SDK,
// see https://aka.ms/nodejshubs.
logger.info('Running TodoItem.insert');

// Define the template payload.
var payload = '{"messageParam": "' + context.item.text + '" }';  

// Execute the insert. The insert returns the results as a promise.
// Do the push as a post-execute action within the promise flow.
return context.execute()
    .then(function (results) {
        // Only do the push if configured.
        if (context.push) {
            // Send a template notification.
            context.push.send(null, payload, function (error) {
                if (error) {
                    logger.error('Error while sending push notification: ', error);
                } else {
                    logger.info('Push notification sent successfully!');
                }
            });
        }
        // Don't forget to return the results from the context.execute().
        return results;
    })
    .catch(function (error) {
        logger.error('Error while running context.execute: ', error);
    });
});

module.exports = table;

Dieser Vorgang sendet eine Vorlagenbenachrichtigung, die den Element.text enthält, wenn ein neues Element eingefügt wird.

Wenn Sie die Datei auf Ihrem lokalen Computer bearbeiten, veröffentlichen Sie das Serverprojekt erneut.

Ändern Ihrer Cordova-App

Um sicherzustellen, dass Ihr Apache Cordova-App-Projekt für die Verarbeitung von Pushbenachrichtigungen bereit ist, installieren Sie das Cordova-Push-Plug-In sowie alle plattformspezifischen Pushdienste.

Aktualisieren Sie die Cordova-Version in Ihrem Projekt.

Wenn Ihr Projekt eine Version von Apache Cordova verwendet, die älter als Version 6.1.1 ist, aktualisieren Sie das Clientprojekt. Führen Sie die folgenden Schritte aus, um das Projekt zu aktualisieren:

Klicken Sie mit der rechten Maustaste auf config.xml, um den Konfigurations-Designer zu öffnen.
Wählen Sie die Registerkarte "Plattformen " aus.
Wählen Sie im Textfeld Cordova CLI6.1.1 aus.
Um das Projekt zu aktualisieren, wählen Sie "Erstellen" und dann "Lösung erstellen" aus.

Installieren des Push-Plug-Ins

Apache Cordova-Anwendungen behandeln keine systemeigenen Geräte- oder Netzwerkfunktionen. Diese Funktionen werden von Plug-Ins bereitgestellt, die entweder auf npm oder auf GitHub veröffentlicht werden. Das phonegap-plugin-push Plug-In verarbeitet Netzwerk-Pushbenachrichtigungen.

Sie können das Push-Plug-In auf eine der folgenden Arten installieren:

Über die Eingabeaufforderung:

Führen Sie den folgenden Befehl aus:

cordova plugin add phonegap-plugin-push

Aus Visual Studio:

Öffnen Sie im Projektmappen-Explorer die Datei config.xml. Wählen Sie als Nächstes "Plug-Ins>benutzerdefiniert" aus. Wählen Sie dann Git als Installationsquelle aus.
Geben Sie https://github.com/phonegap/phonegap-plugin-push als Quelle ein.
Wählen Sie den Pfeil neben der Installationsquelle aus.
Wenn Sie in SENDER_ID bereits über eine numerische Projekt-ID für das Google Developer Console-Projekt verfügen, können Sie es hier hinzufügen. Geben Sie andernfalls einen Platzhalterwert ein, z. B. 777777. Wenn Sie Android verwenden, können Sie diesen Wert später in der config.xml Datei aktualisieren.

Hinweis

Ab Version 2.0.0 muss google-services.json im Stammordner Ihres Projekts installiert werden, um die Absender-ID zu konfigurieren. Weitere Informationen finden Sie in der Installationsdokumentation.
Wählen Sie Hinzufügen aus.

Das Push-Plug-In ist jetzt installiert.

Installieren des Geräte-Plug-Ins

Befolgen Sie dasselbe Verfahren, das Sie zum Installieren des Push-Plug-Ins verwendet haben. Fügen Sie das Geräte-Plug-In aus der Liste der Core-Plug-Ins hinzu. (Um es zu finden, wählen Sie Plugins> aus.Core.) Sie benötigen dieses Plug-In, um den Plattformnamen abzurufen.

Registrieren Des Geräts beim Starten der Anwendung

Zunächst enthalten wir minimalen Code für Android. Später können Sie die App so ändern, dass sie unter iOS oder Windows 10 ausgeführt wird.

Fügen Sie während des Rückrufs für den Anmeldevorgang einen Aufruf zum Registrieren vonForPushNotifications hinzu. Alternativ können Sie sie unten in der onDeviceReady-Methode hinzufügen:

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

Dieses Beispiel zeigt das Aufrufen von registerForPushNotifications , nachdem die Authentifizierung erfolgreich war. Sie können so oft wie erforderlich anrufen registerForPushNotifications() .

Fügen Sie die neue registerForPushNotifications-Methode wie folgt hinzu:

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

(Android) Ersetzen Sie Your_Project_ID im vorangehenden Code mit der numerischen Projekt-ID für Ihre App aus der Google Developer Console.

(Optional) Konfigurieren und Ausführen der App unter Android

Schließen Sie diesen Abschnitt ab, um Pushbenachrichtigungen für Android zu aktivieren.

Aktivieren von Firebase Cloud Messaging

Da Sie zunächst auf die Google Android-Plattform abzielen, müssen Sie Firebase Cloud Messaging aktivieren.

Melden Sie sich bei der Firebase-Konsole an. Erstellen Sie ein neues Firebase-Projekt, falls Sie noch keins besitzen.
Klicken Sie nach der Erstellung Ihres Projekts auf Add Firebase to your Android app (Firebase der Android-App hinzufügen).
Führen Sie auf der Seite Add Firebase to your Android app (Firebase der Android-App hinzufügen) die folgenden Schritte aus:
1. Kopieren Sie für Android package name (Name des Android-Pakets) den Wert von applicationId in die Datei „build.gradle“ Ihrer Anwendung. In diesem Beispiel ist es com.fabrikam.fcmtutorial1app.
2. Wählen Sie Register app (App registrieren) aus.
Wählen Sie Download google-services.json (google-services.json herunterladen) aus, speichern Sie die Datei im Ordner app des Projekts, und klicken Sie dann auf Next (Weiter).
Nehmen Sie an Ihrem Projekt in Android Studio die folgenden Konfigurationsänderungen vor.
1. Fügen Sie der Datei „build.gradle“ auf Projektebene (<Projekt>/build.gradle) im Abschnitt dependencies die folgende Anweisung hinzu.
```
classpath 'com.google.gms:google-services:4.0.1'
```
2. Fügen Sie der Datei „build.gradle“ auf App-Ebene (<Projekt>/<App-Modul>/build.gradle) im Abschnitt dependencies die folgenden Anweisungen hinzu.
```
implementation 'com.google.firebase:firebase-core:16.0.8'
implementation 'com.google.firebase:firebase-messaging:17.3.4'
```
3. Fügen Sie am Ende der Datei „build.gradle“ auf der App-Ebene hinter dem Abschnitt „dependencies“ die folgende Zeile hinzu.
```
apply plugin: 'com.google.gms.google-services'
```
4. Wählen Sie auf der Symbolleiste Sync Now (Jetzt synchronisieren) aus.
Wählen Sie Weiteraus.
Klicken Sie auf Diesen Schritt überspringen.
Klicken Sie in der Firebase-Konsole auf das Zahnrad für Ihr Projekt. Klicken Sie dann auf Projekteinstellungen.
Wenn Sie die Datei google-services.json nicht in den Ordner app Ihres Android Studio-Projekts heruntergeladen haben, können Sie dies auf dieser Seite tun.
Wechseln Sie oben zur Registerkarte Cloud Messaging.
Kopieren und speichern Sie den Serverschlüssel für eine spätere Verwendung. Verwenden Sie diesen Wert zum Konfigurieren Ihres Hubs.

Konfigurieren des Back-Ends für mobile Apps zum Senden von Pushanforderungen mithilfe von FCM

Wählen Sie im Azure-PortalAlle durchsuchen>App Services aus. Wählen Sie dann Ihr Mobile Apps-Back-End aus.
Wählen Sie unter Einstellungendie Option Pushaus. Wählen Sie dann " Pushbenachrichtigungsdienste konfigurieren" aus.
Wechseln Sie zu Google (GCM). Geben Sie den älteren FCM-Serverschlüssel ein, den Sie über die Firebase-Konsole erhalten haben, und wählen Sie dann "Speichern" aus.

Ihr Dienst ist jetzt für die Arbeit mit Firebase Cloud Messaging konfiguriert.

Konfigurieren Ihrer Cordova-App für Android

Öffnen Sie in Ihrer Cordova-App config.xml. Ersetzen Sie Your_Project_ID mit der numerischen Projekt-ID Ihrer App aus der 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>

Öffnen Sie index.js. Aktualisieren Sie dann den Code, um Ihre numerische Projekt-ID zu verwenden.

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

Konfigurieren Ihres Android-Geräts für das USB-Debugging

Bevor Sie Ihre Anwendung auf Ihrem Android-Gerät bereitstellen können, müssen Sie das USB-Debugging aktivieren. Führen Sie die folgenden Schritte auf Ihrem Android-Smartphone aus:

Wechseln Sie zu Einstellungen>Über das Telefon. Tippen Sie dann auf die Buildnummer , bis der Entwicklermodus aktiviert ist (etwa sieben Mal).
Aktivieren Sie das USB-Debugging wieder in den Einstellungen>für Entwickleroptionen. Schließen Sie dann Ihr Android-Smartphone mit einem USB-Kabel an Ihren Entwicklungs-PC an.

Wir haben dies mit einem Google Nexus 5X-Gerät mit Android 6.0 (Marshmallow) getestet. Die Techniken sind jedoch in jeder modernen Android-Version üblich.

Installieren von Google Play Services

Das Push-Plug-In basiert auf Android Google Play Services für Pushbenachrichtigungen.

Wählen Sie in Visual Studio tools>Android>SDK Manager aus. Erweitern Sie dann den Ordner "Extras ". Aktivieren Sie die entsprechenden Kontrollkästchen, um sicherzustellen, dass jeder der folgenden SDKs installiert ist:
- Android 2.3 oder höher
- Google Repository Revision 27 oder höher
- Google Play Services 9.0.2 oder höher
Wählen Sie "Pakete installieren" aus. Warten Sie dann, bis die Installation abgeschlossen ist.

Die aktuellen erforderlichen Bibliotheken sind in der Phonegap-Plugin-Push-Installationsdokumentation aufgeführt.

Testen von Pushbenachrichtigungen in der App unter Android

Sie können jetzt Pushbenachrichtigungen testen, indem Sie die App ausführen und Elemente in die TodoItem-Tabelle einfügen. Sie können von demselben Gerät oder von einem zweiten Gerät testen, solange Sie dasselbe Back-End verwenden. Testen Sie Ihre Cordova-App auf der Android-Plattform auf eine der folgenden Arten:

Auf einem physischen Gerät: Schließen Sie Ihr Android-Gerät mit einem USB-Kabel an Ihren Entwicklungscomputer an. Wählen Sie anstelle des Google Android-Emulators"Gerät" aus. Visual Studio stellt die Anwendung auf dem Gerät bereit und führt die Anwendung aus. Anschließend können Sie mit der Anwendung auf dem Gerät interagieren.

Bildschirmfreigabeanwendungen wie Mobizen können Sie bei der Entwicklung von Android-Anwendungen unterstützen. Mobizen projiziert Ihren Android-Bildschirm in einen Webbrowser auf Ihrem PC.
Auf einem Android-Emulator: Es gibt zusätzliche Konfigurationsschritte, die erforderlich sind, wenn Sie einen Emulator verwenden.

Stellen Sie sicher, dass Sie auf einem virtuellen Gerät bereitstellen, auf dem Google-APIs als Ziel festgelegt sind, wie im Android Virtual Device (AVD)-Manager gezeigt.

Wenn Sie einen schnelleren x86-Emulator verwenden möchten, installieren Sie den HAXM-Treiber, und konfigurieren Sie den Emulator dann für die Verwendung.

Fügen Sie dem Android-Gerät ein Google-Konto hinzu, indem Sie Apps>Einstellungen>Konto hinzufügen auswählen. Folgen Sie dann den Anweisungen.

Führen Sie die To-do-Liste-App wie vorher aus, und fügen Sie eine neue Aufgabe ein. Dieses Mal wird im Infobereich ein Benachrichtigungssymbol angezeigt. Sie können die Benachrichtigungsschublade öffnen, um den vollständigen Text der Benachrichtigung anzuzeigen.

(Optional) Konfigurieren und Ausführen unter iOS

Dieser Abschnitt dient zum Ausführen des Cordova-Projekts auf iOS-Geräten. Wenn Sie nicht mit iOS-Geräten arbeiten, können Sie diesen Abschnitt überspringen.

Installieren und Ausführen des iOS-Remotebuild-Agents auf einem Mac oder Clouddienst

Bevor Sie eine Cordova-App unter iOS mit Visual Studio ausführen können, führen Sie die Schritte im iOS-Setuphandbuch durch, um den Remotebuild-Agent zu installieren und auszuführen.

Stellen Sie sicher, dass Sie die App für iOS erstellen können. Die Schritte im Setuphandbuch sind erforderlich, um die App für iOS aus Visual Studio zu erstellen. Wenn Sie keinen Mac haben, können Sie für iOS erstellen, indem Sie den Remotebuild-Agent auf einem Dienst wie MacInCloud verwenden. Weitere Informationen finden Sie unter Ausführen Ihrer iOS-App in der Cloud.

Hinweis

Xcode 7 oder höher ist erforderlich, um das Push-Plug-In unter iOS zu verwenden.

Suchen der ID, die als App-ID verwendet werden soll

Bevor Sie Ihre App für Pushbenachrichtigungen registrieren, öffnen Sie config.xml in Ihrer Cordova-App, suchen Sie den id Attributwert im Widget-Element, und kopieren Sie sie dann zur späteren Verwendung. Im folgenden XML lautet die ID 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="https://schemas.microsoft.com/appx/2014/htmlapps">

Verwenden Sie diesen Bezeichner später, wenn Sie eine App-ID im Entwicklerportal von Apple erstellen. Wenn Sie eine andere App-ID im Entwicklerportal erstellen, müssen Sie später in diesem Lernprogramm einige zusätzliche Schritte ausführen. Die ID im Widget-Element muss mit der App-ID im Entwicklerportal übereinstimmen.

Registrieren der App für Pushbenachrichtigungen im Apple-Entwicklerportal

Registrieren Sie eine App-ID für Ihre App. Erstellen Sie eine explizite App-ID (keine Wildcard-App-ID), und verwenden Sie für Bundle-IDdie genaue Bündel-ID, die sich in Ihrem Xcode-Schnellstartprojekt befindet. Es ist auch wichtig, dass Sie die Option Push-Benachrichtigungen auswählen.
Als Nächstes, zur Vorbereitung auf die Konfiguration von Push-Benachrichtigungen, erstellen Sie entweder ein SSL-Zertifikat für "Entwicklung" oder "Verteilung".

Sehen Sie sich ein Video mit ähnlichen Schritten

Konfigurieren von Azure zum Senden von Pushbenachrichtigungen

Starten Sie auf Ihrem Mac Keychain Access. Öffnen Sie auf der linken Navigationsleiste unter KategorieMeine Zertifikate. Suchen Sie das SSL-Zertifikat, das Sie im vorherigen Abschnitt heruntergeladen haben, und geben Sie dann deren Inhalte offen. Wählen Sie nur das Zertifikat aus (nicht den privaten Schlüssel auswählen). dannexportieren.
Wählen Sie im Azure-PortalAlle durchsuchen>App Services aus. Wählen Sie dann Ihr Mobile Apps-Back-End aus.
Unter Einstellungenwählen Sie App Service Push-aus. Wählen Sie dann Ihren Benachrichtigungshubnamen aus.
Wechseln Sie zu Apple Push Notification Services>Hochladen des Zertifikats. Laden Sie die .p12-Datei hoch, und wählen Sie den richtigen Modus aus (je nachdem, ob Ihr Client-SSL-Zertifikat zuvor für die Produktion oder die Sandbox verwendet wurde). Speichern Sie alle Änderungen.

Ihr Dienst ist jetzt für die Arbeit mit Pushbenachrichtigungen unter iOS konfiguriert.

Überprüfen Sie, ob Ihre App-ID Ihrer Cordova-App entspricht.

Wenn die App-ID, die Sie in Ihrem Apple-Entwicklerkonto erstellt haben, bereits mit der ID des Widgetelements in der datei config.xml übereinstimmt, können Sie diesen Schritt überspringen. Wenn die IDs jedoch nicht übereinstimmen, führen Sie die folgenden Schritte aus:

Löschen Sie den Ordner "Plattformen" aus Ihrem Projekt.
Löschen Sie den Ordner "Plugins" aus Ihrem Projekt.
Löschen Sie den ordner node_modules aus Ihrem Projekt.
Aktualisieren Sie das ID-Attribut des Widgetelements in der datei config.xml, um die App-ID zu verwenden, die Sie in Ihrem Apple-Entwicklerkonto erstellt haben.
Erstellen Sie Ihr Projekt neu.

Testen von Pushbenachrichtigungen in Ihrer iOS-App

Stellen Sie in Visual Studio sicher, dass iOS als Bereitstellungsziel ausgewählt ist. Wählen Sie dann "Gerät" aus, um die Pushbenachrichtigungen auf Ihrem verbundenen iOS-Gerät auszuführen.

Sie können die Pushbenachrichtigungen auf einem iOS-Gerät ausführen, das mit iTunes mit Ihrem PC verbunden ist. Der iOS-Simulator unterstützt keine Pushbenachrichtigungen.
Wählen Sie die Schaltfläche "Ausführen " oder "F5 " in Visual Studio aus, um das Projekt zu erstellen und die App auf einem iOS-Gerät zu starten. Wählen Sie dann "OK" aus, um Pushbenachrichtigungen zu akzeptieren.

Hinweis

Die App fordert eine Bestätigung für Pushbenachrichtigungen während der ersten Ausführung an.
Geben Sie in der App eine Aufgabe ein, und wählen Sie dann das Pluszeichen (+) aus.
Überprüfen Sie, ob eine Benachrichtigung empfangen wurde. Wählen Sie dann OK aus, um die Benachrichtigung zu schließen.

(Optional) Konfigurieren und Ausführen unter Windows

In diesem Abschnitt wird beschrieben, wie Sie das Apache Cordova-App-Projekt auf Windows 10-Geräten ausführen (das PhoneGap-Push-Plug-In wird unter Windows 10 unterstützt). Wenn Sie nicht mit Windows-Geräten arbeiten, können Sie diesen Abschnitt überspringen.

Registrieren Ihrer Windows-App für Pushbenachrichtigungen mit WNS

Um die Store-Optionen in Visual Studio zu verwenden, wählen Sie in der Liste "Lösungsplattformen" ein Windows-Ziel aus, z. B. Windows-x64 oder Windows-x86. (Vermeiden Sie Windows-AnyCPU für Pushbenachrichtigungen.)

Klicken Sie im Projektmappen-Explorer von Visual Studio mit der rechten Maustaste auf das Windows Store-App-Projekt. Wählen Sie dann Store>App mit dem Store verknüpfen.
Wählen Sie im Assistenten Weiter aus. Melden Sie sich dann mit Ihrem Microsoft-Konto an. Geben Sie unter "Neuen App-Namen reservieren" einen Namen für Ihre App ein, und wählen Sie dann " Reservieren" aus.
Nachdem die App-Registrierung erfolgreich erstellt wurde, wählen Sie den neuen App-Namen aus. Wählen Sie "Weiter" und dann "Zuordnen" aus. Dieser Vorgang fügt dem Anwendungsmanifest die erforderlichen Windows Store-Registrierungsinformationen hinzu.
Wiederholen Sie die Schritte 1 und 3 für das Windows Phone Store-App-Projekt, indem Sie dieselbe Registrierung verwenden, die Sie zuvor für die Windows Store-App erstellt haben.
Wechseln Sie zum Windows Dev Center, und melden Sie sich dann mit Ihrem Microsoft-Konto an. Wählen Sie in "Meine Apps" die neue App-Registrierung aus. Erweitern Sie dann Dienste>Pushbenachrichtigungen.
Wählen Sie auf der Seite "Pushbenachrichtigungen" unter Windows-Pushbenachrichtigungsdienste(Windows Push Notification Services, WNS) und Microsoft Azure Mobile Apps die Website "Live Services" aus. Notieren Sie sich die Werte der Paket-SID und den aktuellen Wert im Geheimen Anwendungsschlüssel.

Wichtig

Das Anwendungsgeheimnis und die Paket-SID sind wichtige Sicherheitsanmeldeinformationen. Teilen Sie diese Werte nicht mit anderen Personen, oder verteilen Sie sie mit Ihrer App.

Sehen Sie sich ein Video mit ähnlichen Schritten

Konfigurieren des Benachrichtigungshubs für WNS

Wählen Sie im Azure-PortalAlle durchsuchen>App Services aus. Wählen Sie dann Ihr Mobile Apps-Back-End aus. Unter Einstellungenwählen Sie App Service Push-aus. Wählen Sie dann Ihren Benachrichtigungshubnamen aus.
Wechseln Sie zu Windows (WNS). Geben Sie dann den Sicherheitsschlüssel (geheimer Clientschlüssel) und die Paket-SID ein, die Sie von der Live Services-Website erhalten haben. Wählen Sie als Nächstes "Speichern" aus.

Ihr Back-End ist jetzt für die Verwendung von WNS zum Senden von Pushbenachrichtigungen konfiguriert.

Konfigurieren Ihrer Cordova-App zur Unterstützung von Windows-Pushbenachrichtigungen

Öffnen Sie den Konfigurations-Designer, indem Sie mit der rechten Maustaste auf config.xmlklicken. Wählen Sie dann "Designer anzeigen" aus. Wählen Sie als Nächstes Windows-Registerkarte und dann Windows 10 unter Zielversion von Windows aus.

Um Pushbenachrichtigungen in Ihren Standardbuilds (Debug) zu unterstützen, öffnen Sie die build.json Datei. Kopieren Sie dann die Konfiguration "Release" in Ihre Debugkonfiguration.

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

Nach dem Update sollte die build.json Datei den folgenden Code enthalten:

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

Erstellen Sie die App, und stellen Sie sicher, dass keine Fehler auftreten. Ihre Client-App sollte sich jetzt für die Benachrichtigungen aus dem Back-End mobiler Apps registrieren. Wiederholen Sie diesen Abschnitt für jedes Windows-Projekt in Ihrer Projektmappe.

Testen von Pushbenachrichtigungen in Ihrer Windows-App

Stellen Sie in Visual Studio sicher, dass eine Windows-Plattform als Bereitstellungsziel ausgewählt ist, z. B. Windows-x64 oder Windows-x86. Um die App auf einem Windows 10-PC auszuführen, auf dem Visual Studio gehostet wird, wählen Sie "Lokaler Computer" aus.

Wählen Sie die Schaltfläche "Ausführen " aus, um das Projekt zu erstellen und die App zu starten.
Geben Sie in der App einen Namen für ein neues Todoitem ein, und wählen Sie dann das Pluszeichen (+) aus, um es hinzuzufügen.

Überprüfen Sie, ob eine Benachrichtigung empfangen wird, wenn das Element hinzugefügt wird.

Nächste Schritte

Informieren Sie sich über Benachrichtigungshubs , um mehr über Pushbenachrichtigungen zu erfahren.
Wenn Sie dies noch nicht getan haben, fahren Sie mit dem Lernprogramm fort, indem Sie Ihrer Apache Cordova-App Authentifizierung hinzufügen .

Erfahren Sie, wie Sie die folgenden SDKs verwenden:

Last updated on 2019-06-25

Freigeben über

Hinzufügen von Pushbenachrichtigungen zu Ihrer Apache Cordova-App

Überblick

Voraussetzungen

Konfigurieren eines Benachrichtigungshubs

Aktualisieren des Serverprojekts

.NET-Back-End-Projekt

Node.js Backend-Projekt

Ändern Ihrer Cordova-App

Aktualisieren Sie die Cordova-Version in Ihrem Projekt.

Installieren des Push-Plug-Ins

Installieren des Geräte-Plug-Ins

Registrieren Des Geräts beim Starten der Anwendung

(Optional) Konfigurieren und Ausführen der App unter Android

Aktivieren von Firebase Cloud Messaging

Konfigurieren des Back-Ends für mobile Apps zum Senden von Pushanforderungen mithilfe von FCM

Konfigurieren Ihrer Cordova-App für Android

Konfigurieren Ihres Android-Geräts für das USB-Debugging

Installieren von Google Play Services

Testen von Pushbenachrichtigungen in der App unter Android

(Optional) Konfigurieren und Ausführen unter iOS

Installieren und Ausführen des iOS-Remotebuild-Agents auf einem Mac oder Clouddienst

Suchen der ID, die als App-ID verwendet werden soll

Registrieren der App für Pushbenachrichtigungen im Apple-Entwicklerportal

Konfigurieren von Azure zum Senden von Pushbenachrichtigungen

Überprüfen Sie, ob Ihre App-ID Ihrer Cordova-App entspricht.

Testen von Pushbenachrichtigungen in Ihrer iOS-App

(Optional) Konfigurieren und Ausführen unter Windows

Registrieren Ihrer Windows-App für Pushbenachrichtigungen mit WNS

Konfigurieren des Benachrichtigungshubs für WNS

Konfigurieren Ihrer Cordova-App zur Unterstützung von Windows-Pushbenachrichtigungen

Testen von Pushbenachrichtigungen in Ihrer Windows-App

Nächste Schritte

Zusätzliche Ressourcen