Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ionic

Erste Schritte mit Ionic Diensten: Push

Read Time: 14 mins

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

In diesem Tutorial lernen Sie Ionic Push kennen, einen Ionic-Dienst, mit dem Sie ganz einfach Push-Benachrichtigungen an Ihre Benutzer senden können.

Mit Ionic Push können Sie Push-Benachrichtigungen an die Benutzer Ihrer App senden. Diese können jederzeit ausgelöst werden. Wenn der Benutzer beispielsweise Geburtstag hat, können Sie ihm automatisch eine Push-Benachrichtigung senden, um ihn zu begrüßen.

Wie es funktioniert

Ionic Push dient als Mittelsmann zwischen dem Gerät des Benutzers und dem Firebase Cloud Messaging. Der erste Schritt besteht darin, dass die App ihren Gerätetoken an den Ionic Push-Server sendet. Dieses Geräte-Token dient als ID, die sich auf das jeweilige Gerät bezieht. Sobald der Server über dieses Token verfügt, kann er nun eine Anfrage an den Firebase Cloud Messaging-Server stellen, um tatsächlich eine Push-Benachrichtigung an das Gerät zu senden. Auf jedem Android-Gerät wird ein Google Play-Dienst ausgeführt, der als Google Cloud Messaging-Dienst bezeichnet wird. Dadurch kann das Gerät Push-Benachrichtigungen von der Firebase Cloud Messaging-Plattform empfangen.

Hier ist ein Diagramm, das den Push-Benachrichtigungsfluss zeigt:

Push notification flowPush notification flowPush notification flow

Was Sie bauen werden

Sie werden eine einfache App erstellen, die Push-Benachrichtigungen über Ionic Push empfangen kann. Es wird auch den Ionic Auth-Dienst verwenden, um Benutzer anzumelden. Dies ermöglicht es uns, gezielte Push-Benachrichtigungen auszuprobieren, die die Benachrichtigungen nur an bestimmte Benutzer senden. Die App hat zwei Seiten: die Anmeldeseite und die Benutzerseite. Benutzer sollten nur dann Benachrichtigungen erhalten können, wenn sie angemeldet sind.

Um Ihnen eine Vorstellung davon zu geben, wie die Benachrichtigungen aussehen würden, sehen Sie hier einen Screenshot der Benachrichtigung, die empfangen wird, während die App gerade geöffnet ist:

in-app notificationin-app notificationin-app notification

Auf der anderen Seite sieht eine Benachrichtigung so aus, wenn die App geschlossen wird:

closed-app notificationclosed-app notificationclosed-app notification

Push-Benachrichtigungen für Android einrichten

In diesem Abschnitt konfigurieren wir die Cloud-Dienste Firebase und Ionic, um Push-Benachrichtigungen zuzulassen. Push-Benachrichtigungen in Android werden hauptsächlich vom Firebase Cloud Messaging Service verarbeitet. Ionic Push ist nur eine Ebene über diesem Dienst, die die Arbeit mit Push-Benachrichtigungen in Ionic-Apps erleichtert.

Erstellen Sie eine Firebase-App

Der erste Schritt besteht darin, ein neues Firebase-Projekt zu erstellen. Sie können dies tun, indem Sie in der Firebase-Konsole auf die Schaltfläche Projekt hinzufügen klicken. Sie sehen das folgende Formular:

Create Firebase ProjectCreate Firebase ProjectCreate Firebase Project

Geben Sie den Namen des Projekts ein und klicken Sie auf die Schaltfläche Projekt erstellen.

Sobald das Projekt erstellt wurde, werden Sie zum Projekt-Dashboard weitergeleitet. Klicken Sie dort auf das Zahnradsymbol rechts neben der Registerkarte Übersicht und wählen Sie Projekteinstellungen.

Klicken Sie auf der Einstellungsseite auf die Registerkarte Cloud Messaging. Dort finden Sie den Serverschlüssel und die Sender-ID. Notieren Sie sich diese, da Sie sie später benötigen.

Cloud messaging settingsCloud messaging settingsCloud messaging settings

Erstellen Sie eine Ionic-App

Als nächstes müssen Sie eine Ionic-App auf der Ionic-Website erstellen. Auf diese Weise können Sie auch mit dem Ionic Push-Dienst und anderen Ionic-Diensten arbeiten. Wenn du noch kein Ionic-Konto hast, kannst du eines erstellen, indem du dich anmeldest. Sobald Sie ein Konto erstellt haben, werden Sie zum Dashboard weitergeleitet, wo Sie eine neue App erstellen können.

Create Ionic AppCreate Ionic AppCreate Ionic App

Erstellen Sie ein Sicherheitsprofil

Gehen Sie nach dem Erstellen Ihrer App zu Einstellungen > Zertifikate und klicken Sie auf die Schaltfläche Neues Sicherheitsprofil. Geben Sie einen beschreibenden Namen für den Profilnamen ein und setzen Sie den Typ vorerst auf Entwicklung:

Create new security profileCreate new security profileCreate new security profile

Sicherheitsprofile dienen dazu, die Firebase Cloud Messaging-Anmeldeinformationen, die Sie zuvor erhalten haben, sicher zu speichern. Sobald es erstellt wurde, wird es in einer Tabelle aufgelistet. Klicken Sie neben dem neu erstellten Sicherheitsprofil auf die Schaltfläche Bearbeiten. Klicken Sie dann auf die Registerkarte Android. Fügen Sie den Wert für den Serverschlüssel, den Sie zuvor von der Firebase-Konsole erhalten haben, in das Feld FCM-Serverschlüssel ein. Klicken Sie abschließend auf Speichern, um die Änderungen zu speichern.

Add Firebase Cloud Messaging credentialsAdd Firebase Cloud Messaging credentialsAdd Firebase Cloud Messaging credentials

Bootstrapping einer neuen Ionic App

Erstellen Sie ein neues Ionic 2-Projekt mit der leeren Vorlage:

Nachdem das Projekt erstellt wurde, installieren Sie das phonegap-plugin-push-Plugin. Geben Sie die Absender-ID an, die Sie zuvor von der Firebase-Konsole erhalten haben:

Als nächstes müssen Sie das Ionic Cloud-Plugin installieren. Dies macht es einfach, mit Ionic-Diensten innerhalb der App zu arbeiten:

Schließlich müssen Sie die Ionic-Konfigurationsdateien aktualisieren, damit Ionic weiß, dass dieses spezielle Projekt der zuvor erstellten Ionic-App zugewiesen werden sollte. Sie können dies tun, indem Sie die App-ID auf der Dashboard-Seite Ihrer Ionic-App kopieren. Die App-ID finden Sie direkt unter dem Namen der App. Öffnen Sie nach dem Kopieren die Dateien .io-config.json und ionic.config.json und fügen Sie den Wert für die app_id ein.

App erstellen

Jetzt können Sie die App erstellen. Als erstes müssen Sie den Ionic-Entwicklungsserver starten, damit Sie die Änderungen sofort sehen können, wenn Sie die App entwickeln:

Rufen Sie nach Abschluss des Kompilierungsvorgangs die Entwicklungs-URL in Ihrem Browser auf.

Ionic App und Push-Einstellungen hinzufügen

Öffnen Sie die Datei src/app/app.module.ts und fügen Sie die Einstellungen für die App (core) und Push-Benachrichtigungen (push) hinzu. Die app_id ist die ID der Ionic-App, die Sie zuvor erstellt haben. Die sender_id ist die Absender-ID, die Sie zuvor von der Firebase-Konsole erhalten haben. Unter dem pluginConfig-Objekt können Sie optional Push-Benachrichtigungseinstellungen festlegen. Im Folgenden setzen wir nur die sound- und vibrate-Einstellungen auf true, um der Hardware mitzuteilen, dass sie Push-Benachrichtigungstöne abspielen oder vibrieren kann, wenn sich das Gerät im Lautlos-Modus befindet. Wenn Sie mehr über die verfügbaren Konfigurationsoptionen erfahren möchten, lesen Sie die Dokumentation zu den Push-Benachrichtigungsoptionen für Android.

Lassen Sie Ionic als Nächstes wissen, dass Sie die cloudSettings verwenden möchten:

Startseite

Die Standardstartseite in der leeren Vorlage dient als Anmeldeseite. Öffnen Sie die Datei pages/home/home.html und fügen Sie Folgendes hinzu:

Der Einfachheit halber haben wir nur einen Login-Button anstelle eines ausgewachsenen Login-Formulars. Dies bedeutet, dass die Anmeldeinformationen, die wir für die Anmeldung verwenden, in den Code selbst eingebettet sind.

Öffnen Sie als Nächstes die Datei src/pages/home/home.ts und fügen Sie Folgendes hinzu:

Nachdem wir den obigen Code aufgeschlüsselt haben, importieren wir zuerst die Controller, die für die Arbeit mit Navigation, Ladern und Warnungen erforderlich sind:

Importieren Sie dann die für die Arbeit mit Push und Auth benötigten Dienste.

Nachdem diese hinzugefügt wurden, importieren Sie die User-Seite. Kommentieren Sie es vorerst aus, da wir diese Seite noch nicht erstellt haben. Vergessen Sie nicht, dies später zu entkommentieren, sobald die Benutzerseite fertig ist.

Überprüfen Sie im Konstruktor, ob der aktuelle Benutzer authentifiziert ist. Navigieren Sie sofort zur Benutzerseite, wenn sie:

Zeigen Sie für die login-Funktion den Loader an und stellen Sie ihn so ein, dass er nach 5 Sekunden automatisch geschlossen wird. Auf diese Weise bleibt dem Benutzer keine unendliche Ladeanimation, wenn mit dem Authentifizierungscode etwas schief geht:

Melden Sie sich danach mit den hartcodierten Anmeldeinformationen eines Benutzers an, der bereits in Ihrer App hinzugefügt wurde:

Wenn Sie noch keinen Benutzer haben, können Sie im Ionic-Dashboard nicht wirklich neue Benutzer erstellen, obwohl Sie zusätzliche Benutzer erstellen können, sobald Sie bereits mindestens einen Benutzer haben. Der einfachste Weg, einen neuen Benutzer zu erstellen, besteht also darin, die Methode signup() vom Auth-Dienst aus aufzurufen. Entkommentieren Sie einfach den obigen Login-Code und ersetzen Sie ihn durch den untenstehenden. Beachten Sie, dass Sie den Benutzer über den Browser erstellen können, da das E-Mail-/Kennwortauthentifizierungsschema nur HTTP-Anforderungen verwendet.

Nachdem Sie nun einen Benutzer haben, mit dem Sie sich anmelden können, können Sie den Anmeldecode entfernen und den Anmeldecode auskommentieren.

Innerhalb der Erfolgs-Callback-Funktion für die Anmeldung müssen Sie die Methode register() vom Push-Dienst aufrufen. Dieser entscheidende Schritt ermöglicht es dem Gerät, Push-Benachrichtigungen zu empfangen. Es stellt eine Anfrage an den Ionic Push-Dienst, um ein Geräte-Token zu erhalten. Wie im Abschnitt Funktionsweise weiter oben erwähnt, dient dieses Gerätetoken als eindeutige Kennung für das Gerät, damit es Push-Benachrichtigungen empfangen kann.

Das Tolle an Ionic Push ist die Integration mit Ionic Auth. Der Grund, warum wir die Geräte-Tokens direkt nach der Anmeldung registrieren, liegt an dieser Integration. Wenn Sie die Methode saveToken() aufrufen, ist sie intelligent genug, um zu erkennen, dass ein Benutzer gerade angemeldet ist. Sie weist diesen Benutzer also automatisch dem Gerät zu. Auf diese Weise können Sie dann gezielt eine Push-Benachrichtigung an diesen Benutzer senden.

Benutzerseite

Die Benutzerseite ist die Seite, die Push-Benachrichtigungen empfängt. Erstellen Sie es mit dem Ionic-Generate-Befehl:

Dadurch wird das Verzeichnis src/pages/user-page mit drei Dateien erstellt. Öffnen Sie die Datei user-page.html und fügen Sie Folgendes hinzu:

Um die Dinge einfach zu halten, haben wir nur eine Schaltfläche zum Abmelden des Benutzers. Der Hauptzweck dieser Seite besteht darin, nur Push-Benachrichtigungen zu empfangen und anzuzeigen. Die Schaltfläche zum Abmelden wird einfach hinzugefügt, da der Benutzer abgemeldet und getestet werden muss, ob er nach dem Abmelden noch Benachrichtigungen erhalten kann.

Öffnen Sie als Nächstes die Datei user-page.ts und fügen Sie Folgendes hinzu:

Der obige Code ist ziemlich selbsterklärend, daher gehe ich nur auf den Teil ein, der sich mit Benachrichtigungen befasst. Der folgende Code verarbeitet die Benachrichtigungen. Es verwendet die Methode subscribe(), um alle eingehenden oder geöffneten Push-Benachrichtigungen zu abonnieren. Wenn ich "geöffnet" sage, bedeutet dies, dass der Benutzer auf die Benachrichtigung im Benachrichtigungsbereich getippt hat. In diesem Fall wird die App gestartet und die Callback-Funktion aufgerufen, die Sie an die Methode subscribe() übergeben haben. Andererseits erfolgt eine eingehende Push-Benachrichtigung, wenn die App gerade geöffnet wird. Beim Versenden einer Push-Benachrichtigung wird auch diese Callback-Funktion aufgerufen. Der einzige Unterschied besteht darin, dass es nicht mehr in den Benachrichtigungsbereich geht.

Für jede Benachrichtigung enthält das an die Callback-Funktion übergebene Argument die Nutzlast des Objekts:

Push notification payloadPush notification payloadPush notification payload

Im obigen Code verwenden wir nur den title und den text, die als Inhalt für die Warnung bereitgestellt werden. Wir sind jedoch nicht nur auf Warnungen beschränkt – wie Sie im obigen Screenshot sehen können, gibt es dieses payload-Objekt, das zusätzliche Daten speichert, die Sie an jede Benachrichtigung weitergeben möchten. Sie können diese Daten tatsächlich verwenden, um zu steuern, was Ihre App tun wird, wenn sie diese Art von Benachrichtigung erhält. Im obigen Beispiel ist is_cat auf 1 gesetzt und wir können den Hintergrund der App in ein Katzenbild ändern lassen, wenn sie diese Benachrichtigung erhält. Später im Abschnitt Senden von Push-Benachrichtigungen erfahren Sie, wie Sie die Nutzdaten für jede Benachrichtigung anpassen.

Ausführen der App auf einem Gerät

Jetzt ist es an der Zeit, die App auf einem Gerät zu testen. Fahren Sie fort und fügen Sie die Plattform hinzu und erstellen Sie die App für diese Plattform. Hier verwenden wir Android:

Kopieren Sie die .apk-Datei im Ordner platforms/android/build/outputs/apk auf Ihr Gerät und installieren Sie sie.

Beheben von Build-Fehlern

Als ich das erste Mal versuchte, den build-Befehl auszuführen, erhielt ich die folgende Fehlermeldung:

Android build errorAndroid build errorAndroid build error

Wenn Sie den gleichen Fehler haben, folgen Sie diesem. Wenn keine Fehler aufgetreten sind, können Sie mit dem nächsten Abschnitt fortfahren.

Das Problem hierbei ist, dass die genannten SDK-Komponenten nicht installiert wurden oder möglicherweise ein wichtiges Update installiert werden muss. Die Fehlermeldung ist jedoch etwas irreführend, da sie nur besagt, dass die Lizenzvereinbarung akzeptiert werden muss.

Um das Problem zu lösen, starten Sie das Android SDK-Installationsprogramm und überprüfen Sie dann das Android Support Repository und das Google Repository. Klicken Sie anschließend auf die Schaltfläche Installieren und stimmen Sie der Lizenzvereinbarung zur Installation der Komponenten zu.

Senden von Push-Benachrichtigungen

Nachdem Sie die App auf Ihrem Gerät installiert haben, ist es nun an der Zeit, tatsächlich einige Push-Benachrichtigungen zu senden. Hier sind einige Szenarien, die Sie testen können:

  • wenn ein Benutzer gerade nicht angemeldet ist
  • wenn ein Benutzer angemeldet ist
  • an alle Benutzer
  • an Benutzer, die einer bestimmten Suchanfrage entsprechen
  • wenn die App geöffnet wird
  • wenn die App geschlossen ist

Der erste Schritt zum Senden einer Push-Benachrichtigung besteht darin, zu Ihrem Ionic-App-Dashboard zu gehen und auf die Registerkarte Push zu klicken. Da Sie den Dienst zum ersten Mal nutzen, sollten Sie den folgenden Bildschirm sehen:

create your first pushcreate your first pushcreate your first push

Fahren Sie fort und klicken Sie auf die Schaltfläche Erstellen Sie Ihren ersten Push. Dadurch werden Sie zur Seite weitergeleitet, auf der Sie eine Push-Benachrichtigung erstellen können. Hier können Sie den Namen der Kampagne, Titel und Text der Benachrichtigung sowie weitere Daten eingeben, die Sie weitergeben möchten. Hier setzen wir is_cat auf 1.

push detailspush detailspush details

Als nächstes können Sie optional die Push-Benachrichtigungsoptionen für iOS oder Android festlegen. Da wir nur an Android-Geräte senden, legen wir nur die Optionen für Android fest:

android push optionsandroid push optionsandroid push options

Im nächsten Schritt wählen Sie die Benutzer aus, die die Benachrichtigung erhalten. Hier können Sie Alle Benutzer auswählen, wenn Sie die Benachrichtigung an alle Geräte senden möchten, die für Push-Benachrichtigungen registriert sind.

Select users to push toSelect users to push toSelect users to push to

Wenn Sie nur an bestimmte Benutzer senden möchten, können Sie auch nach ihnen filtern:

push to selected userspush to selected userspush to selected users

Beachten Sie, dass die Benutzerliste aus Benutzern aufgefüllt wird, die über den Auth-Dienst registriert sind.

Der letzte Schritt besteht darin, auszuwählen, wann die Benachrichtigung gesendet werden soll. Da wir nur testen, können wir es sofort versenden. Wenn Sie auf die Schaltfläche Diesen Push senden klicken, wird die Benachrichtigung an Ihre ausgewählten Benutzer gesendet.

Schedule pushSchedule pushSchedule push

Abschluss und nächste Schritte

In diesem Tutorial haben Sie Ionic Push kennengelernt und wie es die Implementierung von Push-Benachrichtigungen vereinfacht. Über das Ionic-Dashboard konnten Sie die Benachrichtigungen, die Sie an Benutzer senden, anpassen. Sie können auch auswählen, an welche Benutzer Sie die Benachrichtigungen senden möchten.

Dies funktioniert hervorragend, wenn Sie noch kein Backend haben. Wenn Sie jedoch bereits über ein Backend verfügen, fragen Sie sich möglicherweise, wie Sie Ionic Push mit Ihrer bestehenden Webanwendung verwenden können. Nun, die Antwort darauf ist die Ionic HTTP API. Auf diese Weise können Sie eine HTTP-Anfrage von Ihrem Webserver an den Server von Ionic senden, wenn eine bestimmte Bedingung erfüllt ist. Die von Ihnen gesendete Anfrage löst dann eine Push-Benachrichtigung aus, die an Ihre Benutzer gesendet wird. Wenn Sie mehr erfahren möchten, können Sie die Dokumentation zum Ionic Push Service lesen.

Und während Sie hier sind, sehen Sie sich einige unserer anderen Kurse und Tutorials zu Ionic 2 an!

  • Ionic 2
    Codieren Sie Ihre erste Ionic 2-App: Eine App zum Teilen von Fotos
    Wernher-Bel Ancheta
  • Ionic
    Erste Schritte mit Ionic 2
    Reginald Dawson
  • Ionic
    So erstellen Sie eine Kamera-App mit Ionic 2
    Ashraff Hathibelagal
Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.