Share
Dans ce tutoriel, vous allez découvrir Ionic Push, un service ionique qui facilite l'envoi de notifications push à vos utilisateurs..
Ionic Push vous permet d'envoyer des notifications push aux utilisateurs de votre application. Ceux-ci peuvent être déclenchés à tout moment. Par exemple, à la date de naissance de l'utilisateur, vous pouvez lui envoyer automatiquement une notification push pour le saluer..
Ionic Push sert d'intermédiaire entre le périphérique de l'utilisateur et la messagerie Firebase Cloud. La première étape consiste pour l’application à envoyer son jeton de périphérique au serveur Ionic Push. Ce jeton de périphérique sert d'identifiant faisant référence à ce périphérique spécifique. Une fois que le serveur dispose de ce jeton, il peut désormais demander au serveur Firebase Cloud Messaging d'envoyer une notification push au périphérique. Sur chaque appareil Android, un service Google Play est en cours d'exécution, appelé service Google Cloud Messaging. Cela permet au périphérique de recevoir des notifications push de la plate-forme Firebase Cloud Messaging..
Voici un graphique qui montre le flux de notification push:
Vous allez créer une application simple pouvant recevoir des notifications push via Ionic Push. Il utilisera également le service Ionic Auth pour connecter les utilisateurs. Cela nous permet d'essayer des notifications push ciblées qui n'enverront les notifications qu'à des utilisateurs spécifiques. L'application aura deux pages: la page de connexion et la page utilisateur. Les utilisateurs ne devraient pouvoir recevoir de notifications qu'après s'être connectés.
Pour vous donner une idée de l'apparence des notifications, voici une capture d'écran de la notification reçue lorsque l'application est actuellement ouverte:
D'autre part, voici à quoi ressemble une notification lorsque l'application est fermée:
Dans cette section, nous allons configurer les services de cloud Firebase et Ionic pour autoriser les notifications push. Les notifications push sur Android sont principalement traitées par le service de messagerie en nuage Firebase. Ionic Push est simplement une couche au-dessus de ce service qui facilite le travail avec les notifications push dans les applications Ionic..
La première étape consiste à créer un nouveau projet Firebase. Vous pouvez le faire en accédant à la console Firebase et en cliquant sur le bouton Ajouter un projet bouton. Vous verrez le formulaire suivant:
Entrez le nom du projet et cliquez sur le bouton Créer un projet bouton.
Une fois le projet créé, vous serez redirigé vers le tableau de bord du projet. De là, cliquez sur l’icône représentant un engrenage juste à côté de Vue d'ensemble onglet et sélectionnez Paramètres du projet.
Sur la page des paramètres, cliquez sur le bouton Messagerie Cloud languette. Vous y trouverez le Clé de serveur et ID de l'expéditeur. Prenez-en note car vous en aurez besoin plus tard.
Ensuite, vous devez créer une application Ionic sur le site Web Ionic. Cela vous permet également de travailler avec le service Ionic Push et d’autres services Ionic. Si vous n'avez pas encore de compte Ionic, vous pouvez en créer un en vous inscrivant. Une fois que vous avez créé un compte, vous serez redirigé vers le tableau de bord où vous pourrez créer une nouvelle application..
Une fois votre application créée, allez à Réglages > Certificats et cliquez sur le Nouveau profil de sécurité bouton. Entrez un nom descriptif pour le Nom de profil et mettre le Type à Développement pour l'instant:
Les profils de sécurité permettent de stocker en toute sécurité les informations d'identification de Firebase Cloud Messaging précédemment fournies. Une fois créé, il sera répertorié dans un tableau. Clique sur le modifier bouton à côté du profil de sécurité nouvellement créé. Puis cliquez sur le Android languette. Collez la valeur pour le Clé de serveur que vous avez obtenu plus tôt de la console Firebase dans le Clé du serveur FCM champ. Enfin, cliquez sur sauvegarder enregistrer les modifications.
Créez un nouveau projet Ionic 2 en utilisant le modèle vierge:
début ionique - v2 pushApp
Une fois le projet créé, installez le phonegap-plugin-push brancher. Indiquez l'ID de l'expéditeur que vous avez obtenu précédemment de la console Firebase:
cordova plugin add phonegap-plugin-push --variable SENDER_ID = YOUR_FCM_SENDER_ID --save
Ensuite, vous devez installer le plugin Ionic Cloud. Cela facilite le travail avec les services Ionic dans l'application:
npm install @ ionic / cloud-angular --save
Enfin, vous devez mettre à jour les fichiers de configuration Ionic afin qu'Ionic sache que ce projet spécifique doit être attribué à l'application Ionic que vous avez créée précédemment. Vous pouvez le faire en copiant l'identifiant de l'application dans la page du tableau de bord de votre application Ionic. Vous pouvez trouver l'identifiant de l'application juste en dessous du nom de l'application. Une fois que vous l'avez copié, ouvrez le .io-config.json et ionic.config.json fichiers et collez la valeur pour la app_id.
Vous êtes maintenant prêt à créer l'application. La première chose à faire est de lancer le serveur de développement Ionic pour que vous puissiez voir immédiatement les changements à mesure que vous développez l'application:
service ionique
Une fois le processus de compilation terminé, accédez à l'URL de développement de votre navigateur..
Ouvrez le src / app / app.module.ts fichier et ajouter les paramètres de l'application (coeur) et notifications push (pousser). le app_id est l'ID de l'application Ionic que vous avez créée précédemment. le sender_id est l'ID de l'expéditeur que vous avez obtenu précédemment à partir de la console Firebase. Sous le pluginConfig objet, vous pouvez éventuellement définir les paramètres de notification push. Ci-dessous, nous ne mettons que le du son et vibrer paramètres à vrai indiquer au matériel qu’il peut lire les notifications push ou vibrer si l’appareil est en mode silencieux. Si vous voulez en savoir plus sur les options de configuration disponibles, consultez la documentation sur les options de notification Push pour Android..
import CloudSettings, CloudModule depuis '@ ionic / cloud-angular'; const cloudSettings: CloudSettings = 'core': 'app_id': 'VOTRE ID APP IONIQUE',, 'push': 'sender_id': 'VOTRE ID FCM SENDER ID', 'pluginConfig': 'android': 'son': vrai, 'vibre': vrai;
Ensuite, faites savoir à Ionic que vous voulez utiliser le cloudSettings:
importations: [BrowserModule, IonicModule.forRoot (MyApp), CloudModule.forRoot (cloudSettings) // <-- add this ],
La page d'accueil par défaut dans le modèle vierge servira de page de connexion. Ouvrez le pages / home / home.html déposer et ajouter ce qui suit:
PushApp
Pour simplifier les choses, nous n’avons qu’un bouton de connexion au lieu d’un formulaire de connexion complet. Cela signifie que les informations d'identification que nous allons utiliser pour la connexion sont intégrées au code lui-même..
Ensuite, ouvrez le src / pages / home / home.ts déposer et ajouter ce qui suit:
Accentsconagua
importer composant de '@ angular / core'; importer NavController, LoadingController, AlertController de 'ionic-angular'; import Push, PushToken, Auth, User, UserDetails de '@ ionic / cloud-angular'; importer UserPage de '… / user-page / user-page'; @Component (sélecteur: 'page-home', templateUrl: 'home.html') classe d'exportation HomePage constructeur (navCtrl publique: NavController, push public: Push, alerte publiqueCtrl: AlertController, chargement publicCtrl: LoadingController, autorisation publique: Auth, utilisateur public: Utilisateur) if (this.auth.isAuthenticated ()) this.navCtrl.push (UserPage); login () let loader = this.loadingCtrl.create (content: "Connexion en cours" "); loader.present (); setTimeout (() => loader.dismiss ();, 5000); laissez les détails: UserDetails = 'email': 'VOTRE UTILISATEUR IONIC AUTH', 'mot de passe': "MOT DE PASSE DE VOTRE UTILISATEUR IONIC AUTH"; this.auth.login ('basic', details) .then ((res) => this.push.register (). then ((t: PushToken) => retour this.push.saveToken (t); ) .then ((t: PushToken) => loader.dismiss (); this.navCtrl.push (UserPage);, (err) => let alert = this.alertCtrl.create (title: 'Enregistrement poussé failed ', subTitle:' Un problème est survenu lors de l'enregistrement des notifications push. Veuillez réessayer. ', boutons: [' OK ']); alert.present (););, () => let alert = this .alertCtrl.create (title: 'Login Failed', sous-titre: 'Informations d'identification non valides. Veuillez réessayer.', boutons: ['OK']); alert.present ();); En décomposant le code ci-dessus, nous importons d'abord les contrôleurs nécessaires pour utiliser la navigation, les chargeurs et les alertes:
importer NavController, LoadingController, AlertController de 'ionic-angular';
Puis importez les services nécessaires pour travailler avec Push et Auth.
import Push, PushToken, Auth, User, UserDetails de '@ ionic / cloud-angular';
Une fois ceux-ci ajoutés, importez le Utilisateur page. Commentez pour le moment car nous n'avons pas encore créé cette page. N'oubliez pas de supprimer ce commentaire plus tard une fois la page utilisateur prête.
// importer UserPage depuis '… / user-page / user-page';
Dans le constructeur, vérifiez si l'utilisateur actuel est authentifié. Naviguez immédiatement vers la page utilisateur s’ils sont:
constructeur (public navCtrl: NavController, public push: Push, public alertCtrl: AlertController, public loadingCtrl: LoadingController, authentification publique: utilisateur, utilisateur public: utilisateur) if (this.auth.isAuthenticated ()) this.navCtrl.push ( UserPage);
Pour le s'identifier fonction, affichez le chargeur et configurez-le pour qu'il disparaisse automatiquement au bout de 5 secondes. Ainsi, si quelque chose ne va pas avec le code d'authentification, l'utilisateur ne se retrouve pas avec une animation de chargement infinie:
login () let loader = this.loadingCtrl.create (content: "Connexion en cours" "); loader.present (); setTimeout (() => loader.dismiss ();, 5000);
Ensuite, connectez-vous à l'aide des informations d'identification codées en dur d'un utilisateur déjà ajouté à votre application:
laissez les détails: UserDetails = 'email': 'VOTRE UTILISATEUR IONIC AUTH', 'mot de passe': "MOT DE PASSE DE VOTRE UTILISATEUR IONIC AUTH"; this.auth.login ('basic', details) .then ((res) => …, () => let alert = this.alertCtrl.create (titre: 'Login Failed', sous-titre: 'Invalid Credentials Essayez à nouveau. ', Boutons: [' OK ']); alert.present (););Si vous n'avez pas encore d'utilisateur existant, le tableau de bord Ionic ne vous permet pas vraiment de créer de nouveaux utilisateurs, bien que vous puissiez créer des utilisateurs supplémentaires une fois que vous avez déjà au moins un utilisateur. Le moyen le plus simple de créer un nouvel utilisateur est donc d'appeler le s'inscrire() méthode du service Auth. Décommentez simplement le code de connexion ci-dessus et remplacez-le par celui ci-dessous. Notez que vous pouvez créer l'utilisateur à partir du navigateur, car le schéma d'authentification par courrier électronique / mot de passe utilise uniquement les requêtes HTTP..
this.auth.signup (détails) .then ((res) => console.log ('L'utilisateur a été créé!', res););Maintenant que vous avez un utilisateur que vous pouvez vous connecter, vous pouvez aller de l'avant et supprimer le code d'inscription et décommenter le code de connexion.
Dans la fonction de rappel de réussite pour la connexion, vous devez appeler le registre() méthode du service Push. Cette étape cruciale permet à l'appareil de recevoir des notifications push. Il adresse une demande au service Ionic Push pour obtenir un jeton de périphérique. Comme mentionné dans le Comment ça marche section précédente, ce jeton de périphérique sert d'identificateur unique pour le périphérique afin qu'il puisse recevoir des notifications push.
this.push.register () then ((t: PushToken) => renvoie this.push.saveToken (t);). then ((t: PushToken) => loader.dismiss (); this.navCtrl .push (UserPage);, (err) => let alert = this.alertCtrl.create (title: 'L'enregistrement push a échoué', sous-titre: 'Un problème est survenu lors de l'enregistrement des notifications push. Veuillez réessayer.', boutons : ['OK']); alert.present (););
La grande chose à propos de Ionic Push est son intégration avec Ionic Auth. La raison pour laquelle nous enregistrons les jetons de périphérique juste après la connexion est à cause de cette intégration. Quand vous appelez le saveToken () méthode, il est suffisamment intelligent pour reconnaître qu’un utilisateur est actuellement connecté. Il attribue donc automatiquement cet utilisateur au périphérique. Cela vous permet ensuite d'envoyer spécifiquement une notification push à cet utilisateur..
La page utilisateur est la page qui reçoit les notifications push. Créez-le avec la commande Ionic generate:
ionic g page utilisateur
Cela va créer le src / pages / page utilisateur répertoire avec trois fichiers dedans. Ouvrez le utilisateur-page.html déposer et ajouter ce qui suit:
Page utilisateur
Pour simplifier les choses, tout ce dont nous disposons est un bouton permettant de déconnecter l’utilisateur. Le but principal de cette page est de recevoir et d’afficher uniquement les notifications push. Le bouton de déconnexion est simplement ajouté car il est nécessaire de déconnecter l'utilisateur et de vérifier s'il peut toujours recevoir des notifications après sa déconnexion..
Ensuite, ouvrez le utilisateur-page.ts déposer et ajouter ce qui suit:
importer composant de '@ angular / core'; importer NavController, AlertController de 'ionic-angular'; import Push, Auth de '@ ionic / cloud-angular'; @Component (sélecteur: 'page-utilisateur-page', templateUrl: 'utilisateur-page.html',) classe d'exportation UserPage constructeur (navCtrl publique: navController, push public: Push, auth publique: Auth, alerte publiqueCtrl: AlertController) this.push.rx.notification () .subscribe ((msg) => let alert = this.alertCtrl.create (titre: msg.title, sous-titre: msg.text, boutons: ['OK'] ); alert.present ();); logout () this.auth.logout (); this.navCtrl.pop ();
Le code ci-dessus est assez explicite, donc je vais seulement passer en revue la partie qui concerne les notifications. Le code ci-dessous gère les notifications. Il utilise le souscrire() méthode pour s'abonner à toute notification push entrante ou ouverte. Quand je dis "ouvert", cela signifie que l'utilisateur a tapé sur la notification dans la zone de notification. Lorsque cela se produit, l'application est lancée et la fonction de rappel que vous avez transmise au souscrire() la méthode s'appelle. D'autre part, une notification push entrante se produit lorsque l'application est actuellement ouverte. Lorsqu'une notification push est envoyée, cette fonction de rappel est également appelée. La seule différence est qu'il ne va plus dans la zone de notification.
this.push.rx.notification () .subscribe ((msg) => let alert = this.alertCtrl.create (titre: msg.title, sous-titre: msg.text, boutons: ['OK']); alert.present (););
Pour chaque notification, l'argument transmis à la fonction de rappel contient la charge d'objet:
Dans le code ci-dessus, nous utilisons uniquement le Titre et le texte à fournir comme contenu de l'alerte. Nous ne sommes pas limités aux seules alertes, bien que, comme vous pouvez le voir sur la capture d'écran ci-dessus, il y a ceci charge utile objet qui stocke des données supplémentaires que vous souhaitez transmettre à chaque notification. Vous pouvez réellement utiliser ces données pour indiquer ce que votre application va faire lorsqu'elle reçoit ce type de notification. Dans l'exemple ci-dessus, is_cat est réglé sur 1, et nous pouvons demander à l'application de changer son arrière-plan en image de chat si elle reçoit cette notification. Plus tard dans le Envoi de notifications push section, vous apprendrez à personnaliser la charge utile de chaque notification.
Il est maintenant temps de tester l'application sur un appareil. Allez-y, ajoutez la plate-forme et construisez l'application pour cette plate-forme. Ici, nous utilisons Android:
plate-forme ionique ajouter android ionic build android
Copier le .apk déposer à l'intérieur du plates-formes / android / build / output / apk dossier sur votre appareil et installez-le.
La première fois que j'ai essayé de lancer le construire commande, j'ai eu l'erreur suivante:
Si vous avez la même erreur, suivez-la. Si vous n'avez rencontré aucune erreur, vous pouvez passer à la section suivante..
Le problème ici est que les composants du SDK mentionnés n'ont pas été installés ou qu'une mise à jour importante doit être installée. Cependant, le message d'erreur est un peu trompeur, puisqu'il indique seulement que le contrat de licence doit être accepté..
Donc, pour résoudre le problème, lancez l’installateur Android SDK, puis cochez la case Dépôt de support Android et Google Repository. Après cela, cliquez sur le bouton Installer bouton et acceptez les termes du contrat de licence pour installer les composants.
Maintenant que vous avez installé l'application sur votre appareil, il est temps d'envoyer des notifications push. Voici quelques scénarios que vous pouvez tester:
La première étape de l'envoi d'une notification push consiste à accéder à votre tableau de bord de l'application Ionic et à cliquer sur le bouton Pousser languette. Comme il s’agit de votre première utilisation du service, vous devriez voir l’écran suivant:
Allez-y et cliquez sur le Créez votre premier Push bouton. Cela vous redirigera vers la page pour créer une notification push. Ici, vous pouvez entrer le nom de la campagne, le titre et le texte de la notification, ainsi que toute donnée supplémentaire que vous souhaitez transmettre. Ici, nous définissons is_cat à 1.
Ensuite, vous pouvez éventuellement définir les options de notification push pour iOS ou Android. Étant donné que nous allons uniquement envoyer des messages vers des appareils Android, nous définissons uniquement les options pour Android:
L'étape suivante consiste à sélectionner les utilisateurs qui recevront la notification. Ici vous pouvez sélectionner Tous les utilisateurs si vous souhaitez envoyer la notification à tous les périphériques enregistrés pour les notifications push.
Si vous souhaitez uniquement envoyer à des utilisateurs spécifiques, vous pouvez également les filtrer:
Notez que la liste des utilisateurs est composée d'utilisateurs enregistrés via le service Auth..
La dernière étape consiste à sélectionner quand envoyer la notification. Comme nous ne faisons que tester, nous pouvons l’envoyer immédiatement. En cliquant sur le Envoyer ce push bouton enverra la notification à vos utilisateurs sélectionnés.
Dans ce tutoriel, vous avez découvert Ionic Push et comment il facilite la mise en œuvre des notifications push. Grâce au tableau de bord Ionic, vous avez pu personnaliser les notifications que vous envoyez aux utilisateurs. Il vous permet également de sélectionner les utilisateurs auxquels vous souhaitez envoyer les notifications..
Cela fonctionne très bien si vous n’avez pas déjà de serveur principal. Mais si vous avez déjà un back-end, vous vous demandez peut-être comment utiliser Ionic Push avec votre application Web existante. Eh bien, la réponse à cette question est l’API Ionic HTTP. Cela vous permet d'envoyer une requête HTTP de votre serveur Web au serveur d'Ionic chaque fois qu'une condition spécifique est remplie. La demande que vous envoyez va alors déclencher l'envoi d'une notification push à vos utilisateurs. Si vous voulez en savoir plus, vous pouvez consulter la documentation du service push ionique.
Et pendant que vous êtes ici, consultez certains de nos autres cours et tutoriels sur Ionic 2!
