Share
In questo tutorial, imparerai a conoscere Ionic Push, un servizio Ionic che facilita l'invio di notifiche push ai tuoi utenti.
Ionic Push ti consente di inviare notifiche push agli utenti della tua app. Questi possono essere attivati ogni volta che si sceglie. Ad esempio, quando si tratta della data di nascita dell'utente, è possibile inviare automaticamente una notifica push per salutarli.
Ionic Push funge da intermediario tra il dispositivo dell'utente e Firebase Cloud Messaging. Il primo passo è che l'app invii il suo token dispositivo al server Ionic Push. Questo token del dispositivo funge da ID che si riferisce a quel dispositivo specifico. Una volta che il server ha quel token, possono ora effettuare una richiesta al server Firebase Cloud Messaging per inviare effettivamente una notifica push al dispositivo. Su ciascun dispositivo Android è in esecuzione un servizio Google Play, chiamato servizio Google Cloud Messaging. Ciò consente al dispositivo di ricevere notifiche push dalla piattaforma Firebase Cloud Messaging.
Ecco un grafico che mostra il flusso di notifica push:
Stai per creare una semplice app che può ricevere notifiche push tramite Ionic Push. Utilizzerà anche il servizio Ionic Auth per registrare gli utenti. Ciò ci consente di provare notifiche push mirate che invieranno le notifiche solo a utenti specifici. L'app avrà due pagine: la pagina di accesso e la pagina utente. Gli utenti dovrebbero essere in grado di ricevere notifiche solo quando hanno effettuato l'accesso.
Per darti un'idea di come sarebbero le notifiche, ecco uno screenshot della notifica che viene ricevuta mentre l'app è attualmente aperta:
D'altra parte, ecco come appare una notifica quando l'app è chiusa:
In questa sezione, configureremo i servizi cloud Firebase e Ionic per consentire le notifiche push. Le notifiche push in Android vengono gestite principalmente dal servizio di messaggistica cloud Firebase. Ionic Push è solo uno strato in cima a questo servizio che semplifica il lavoro con le notifiche push nelle app Ionic.
Il primo passo è creare un nuovo progetto Firebase. Puoi farlo andando nella Console di Firebase e cliccando su Aggiungi progetto pulsante. Vedrai il seguente modulo:
Inserire il nome del progetto e fare clic sul Crea progetto pulsante.
Una volta creato il progetto, verrai reindirizzato al dashboard del progetto. Da lì, fai clic sull'icona dell'ingranaggio accanto a Panoramica scheda e selezionare Impostazioni del progetto.
Nella pagina delle impostazioni, fare clic su Cloud Messaging scheda. Lì troverai il Chiave del server e identità del mittente. Prendi nota di questi come ne avrai bisogno in seguito.
Successivamente, è necessario creare un'app Ionic sul sito Ionic. Ciò consente di lavorare anche con il servizio Ionic Push e altri servizi ionici. Se non hai già un account Ionic, puoi crearne uno registrandoti. Una volta creato un account, verrai reindirizzato alla dashboard in cui puoi creare una nuova app.
Una volta creata l'app, vai a impostazioni > certificati e fare clic su Nuovo profilo di sicurezza pulsante. Inserisci un nome descrittivo per Nome del profilo e impostare il genere a Sviluppo per adesso:
I profili di sicurezza servono come un modo per archiviare in modo sicuro le credenziali Firebase Cloud Messaging che avevi in precedenza. Una volta creato, verrà elencato in una tabella. Clicca sul modificare pulsante accanto al profilo di sicurezza appena creato. Quindi fare clic sul androide scheda. Incolla il valore per il Chiave del server che hai ottenuto in precedenza dalla console di Firebase nel Chiave del server FCM campo. Infine, fai clic su Salvare per salvare le modifiche.
Crea un nuovo progetto Ionic 2 usando il modello vuoto:
ionic start --v2 pushApp blank
Una volta creato il progetto, installare il PhoneGap-plugin-push collegare. Fornisci l'ID mittente che hai ricevuto dalla console Firebase in precedenza:
plugin cordova aggiungi phonegap-plugin-push - variabile SENDER_ID = YOUR_FCM_SENDER_ID --salva
Successivamente, è necessario installare il plug-in Ionic Cloud. Ciò semplifica il lavoro con i servizi Ionic all'interno dell'app:
npm install @ ionic / cloud-angular --save
Infine, è necessario aggiornare i file di configurazione Ionic in modo che Ionic sappia che questo specifico progetto deve essere assegnato all'app Ionic creata in precedenza. Puoi farlo copiando l'ID app nella pagina del dashboard dell'app Ionic. Puoi trovare l'ID app proprio sotto il nome dell'app. Una volta copiato, apri il .io-config.json e ionic.config.json file e incollare il valore per il APP_ID.
Ora sei pronto per creare l'app. La prima cosa che devi fare è avviare il server di sviluppo Ionic in modo che tu possa vedere immediatamente le modifiche mentre sviluppi l'app:
servire ionico
Una volta terminato il processo di compilazione, accedi all'URL di sviluppo del tuo browser.
Apri il src / app / app.module.ts file e aggiungere le impostazioni per l'app (nucleo) e notifiche push (Spingere). Il APP_ID è l'ID dell'app Ionic che hai creato in precedenza. Il identità del mittente è l'ID del mittente che hai ottenuto in precedenza dalla console di Firebase. Sotto il pluginConfig oggetto, è possibile impostare facoltativamente le impostazioni di notifica push. Di seguito stiamo solo impostando il suono e vibrare impostazioni a vero per dire all'hardware che può suonare suoni di notifica push o vibrare se il dispositivo è in modalità silenziosa. Se vuoi sapere di più su quali opzioni di configurazione sono disponibili, controlla i documenti nelle opzioni di notifica push per Android.
import CloudSettings, CloudModule da '@ ionic / cloud-angular'; const cloudSettings: CloudSettings = 'core': 'app_id': 'YOUR IONIC APP ID',, 'push': 'sender_id': 'YOUR FCM SENDER ID', 'pluginConfig': 'android': 'suono': vero, 'vibrazione': vero;
Quindi, fai sapere a Ionic che vuoi usare il cloudSettings:
importazioni: [BrowserModule, IonicModule.forRoot (MyApp), CloudModule.forRoot (cloudSettings) // <-- add this ],
La pagina iniziale predefinita nel modello vuoto fungerà da pagina di accesso. Apri il pagine / home / home.html file e aggiungere il seguente:
pushApp
Per semplificare le cose, abbiamo solo un pulsante di accesso invece di un modulo di accesso completo. Ciò significa che le credenziali che useremo per l'accesso sono incorporate nel codice stesso.
Quindi, apri il src / pagine / home / home.ts file e aggiungere il seguente:
Accentsconagua
importare Component da '@ angular / core'; import NavController, LoadingController, AlertController da 'ionico-angolare'; import Push, PushToken, Auth, User, UserDetails da '@ ionic / cloud-angular'; importare UserPage da '... / user-page / user-page'; @Component (selector: 'page-home', templateUrl: 'home.html') export class HomePage costruttore (public navCtrl: NavController, public push: Push, public alertCtrl: AlertController, public loadingCtrl: LoadingController, public auth: Auth, public user: User) if (this.auth.isAuthenticated ()) this.navCtrl.push (UserPage); login () let loader = this.loadingCtrl.create (content: "Login in ..."); loader.present (); setTimeout (() => loader.dismiss ();, 5000); let details: UserDetails = 'email': 'YOUR IONIC AUTH USER', 'password': "LA TUA PASSWORD DELL'UTENTE PER L'UTENTE IONICO"; this.auth.login ('basic', details) .then ((res) => this.push.register (). then ((t: PushToken) => return this.push.saveToken (t); ) .then ((t: PushToken) => loader.dismiss (); this.navCtrl.push (UserPage);, (err) => let alert = this.alertCtrl.create (title: 'Registrazione push failed ", sottotitolo:" Qualcosa non ha funzionato con la registrazione delle notifiche push. Riprovare. ", i pulsanti: ['OK']); alert.present (););, () => let alert = this .alertCtrl.create (title: 'Login fallito', sottotitolo: 'Credenziali non valide. Si prega di riprovare.', pulsanti: ['OK']); alert.present ();); Annullando il codice sopra, per prima cosa importiamo i controller necessari per lavorare con la navigazione, i caricatori e gli avvisi:
import NavController, LoadingController, AlertController da 'ionico-angolare';
Quindi importa i servizi necessari per lavorare con Push e Auth.
import Push, PushToken, Auth, User, UserDetails da '@ ionic / cloud-angular';
Una volta aggiunti, importa il file Utente pagina. Commentalo ora perché non abbiamo ancora creato quella pagina. Non dimenticare di decommentare questo più tardi una volta che la pagina utente è pronta.
// import UserPage da '... / user-page / user-page';
Nel costruttore, controlla se l'utente corrente è autenticato. Passa immediatamente alla pagina utente se sono:
costruttore (public navCtrl: NavController, public push: Push, public alertCtrl: AlertController, public loadingCtrl: LoadingController, public auth: Auth, public user: User) if (this.auth.isAuthenticated ()) this.navCtrl.push ( Pagina utente);
Per il accesso funzione, mostra il caricatore e lo imposta in modo automatico dopo 5 secondi. In questo modo se qualcosa va storto con il codice di autenticazione, l'utente non viene lasciato con un'animazione di caricamento infinita:
login () let loader = this.loadingCtrl.create (content: "Login in ..."); loader.present (); setTimeout (() => loader.dismiss ();, 5000);
Successivamente, accedi con le credenziali hard-coded di un utente che è già stato aggiunto nella tua app:
let details: UserDetails = 'email': 'YOUR IONIC AUTH USER', 'password': "LA TUA PASSWORD DELL'UTENTE PER L'UTENTE IONICO"; this.auth.login ('basic', details) .then ((res) => ..., () => let alert = this.alertCtrl.create (title: 'Login fallito', sottotitolo: 'Credenziali non valide Si prega di riprovare. ', Pulsanti: [' OK ']); alert.present (););Se non si dispone ancora di un utente esistente, la dashboard di Ionic non consente di creare nuovi utenti, sebbene sia possibile creare utenti aggiuntivi dopo aver già almeno un utente. Quindi il modo più semplice per creare un nuovo utente è chiamare il Iscriviti() metodo dal servizio Auth. Basta decommentare il codice di accesso qui sopra e sostituirlo con quello qui sotto. Prendi nota che puoi creare l'utente dal browser poiché lo schema di autenticazione email / password utilizza solo le richieste HTTP.
this.auth.signup (dettagli) .then ((res) => console.log ('L'utente è stato creato!', res););Ora che hai un utente che puoi accedere, puoi andare avanti e rimuovere il codice di registrazione e rimuovere il commento dal codice di accesso.
All'interno della funzione di callback di successo per il login, è necessario chiamare il Registrare() metodo dal servizio Push. Questo passaggio cruciale consente al dispositivo di ricevere notifiche push. Effettua una richiesta al servizio Ionic Push per ottenere un token dispositivo. Come menzionato nel Come funziona precedente, questo token dispositivo funge da identificatore univoco per il dispositivo in modo che possa ricevere notifiche push.
this.push.register (). then ((t: PushToken) => return this.push.saveToken (t);). then ((t: PushToken) => loader.dismiss (); this.navCtrl .push (UserPage);, (err) => let alert = this.alertCtrl.create (title: 'Registrazione push non riuscita', sottotitolo: 'Qualcosa non ha funzionato con la registrazione delle notifiche push. Riprova.', pulsanti : ['OK']); alert.present (););
Il bello di Ionic Push è la sua integrazione con Ionic Auth. Il motivo per cui stiamo registrando i token del dispositivo subito dopo l'accesso è a causa di questa integrazione. Quando chiami il saveToken () metodo, è abbastanza intelligente da riconoscere che un utente è attualmente connesso. In questo modo assegna automaticamente questo utente al dispositivo. Questo quindi ti consente di inviare specificamente una notifica push a quell'utente.
La pagina utente è la pagina che riceve le notifiche push. Crealo con il comando di generazione ionica:
pagina utente pagina g ionica
Questo creerà il src / pagine / user-page directory con tre file in esso. Apri il user-page.html file e aggiungere il seguente:
Pagina utente
Per mantenere le cose semplici, tutto ciò che abbiamo è un pulsante per la registrazione dell'utente. Lo scopo principale di questa pagina è quello di ricevere e visualizzare solo le notifiche push. Il pulsante di disconnessione viene semplicemente aggiunto a causa della necessità di registrare l'utente e verificare se possono ancora ricevere notifiche dopo la disconnessione.
Quindi, apri il user-page.ts file e aggiungere il seguente:
importare Component da '@ angular / core'; import NavController, AlertController da 'ionico-angolare'; import Push, Auth da '@ ionic / cloud-angular'; @Component (selector: 'page-user-page', templateUrl: 'user-page.html',) export class UserPage costruttore (public navCtrl: NavController, public push: Push, public auth: Auth, public alertCtrl: AlertController) this.push.rx.notification () .subscribe ((msg) => let alert = this.alertCtrl.create (title: msg.title, subTitle: msg.text, buttons: ['OK'] ); alert.present ();); logout () this.auth.logout (); this.navCtrl.pop ();
Il codice sopra è abbastanza auto-esplicativo, quindi passerò solo sulla parte che riguarda le notifiche. Il codice sottostante gestisce le notifiche. Usa il sottoscrivi() metodo per iscriversi a qualsiasi notifica push in entrata o aperta. Quando dico "aperto", significa che l'utente ha toccato la notifica nell'area delle notifiche. Quando ciò accade, l'app viene avviata e la funzione di callback che hai passato al sottoscrivi() il metodo viene chiamato. D'altra parte, una notifica push in arrivo si verifica quando l'app è attualmente aperta. Quando viene inviata una notifica push, viene richiamata anche questa funzione di callback. L'unica differenza è che non va più nell'area di notifica.
this.push.rx.notification () .subscribe ((msg) => let alert = this.alertCtrl.create (title: msg.title, subTitle: msg.text, buttons: ['OK']); alert.present (););
Per ogni notifica, l'argomento passato alla funzione di callback contiene il carico utile dell'oggetto:
Nel codice sopra, stiamo usando solo il titolo e il testo fornire come contenuto per l'avviso. Non siamo limitati solo agli avvisi, tuttavia, come puoi vedere dallo screenshot qui sopra, c'è questo carico utile oggetto che memorizza i dati aggiuntivi che si desidera passare a ciascuna notifica. Puoi effettivamente utilizzare questi dati per indirizzare ciò che l'app sta per fare quando riceve questo tipo di notifica. Nell'esempio sopra, is_cat è impostato per 1, e possiamo fare in modo che l'app cambi il suo sfondo in un'immagine di gatto se riceve questa notifica. Più tardi nel Invio di notifiche push sezione, imparerai come personalizzare il carico utile per ogni notifica.
Ora è il momento di testare l'app su un dispositivo. Vai avanti e aggiungi la piattaforma e crea l'app per quella piattaforma. Qui stiamo usando Android:
piattaforma ionica aggiungere Android Android costruire ionico
Copia il .apk file all'interno del piattaforme / android / costruire / uscite / apk cartella sul dispositivo e installarlo.
La prima volta che ho provato a eseguire il costruire comando, ho ricevuto il seguente errore:
Se hai lo stesso errore, segui. Se non si sono verificati errori, è possibile passare alla sezione successiva.
Il problema qui è che i componenti dell'SDK citati non sono stati installati, oppure potrebbe esserci un aggiornamento importante che deve essere installato. Tuttavia, il messaggio di errore è un po 'fuorviante, poiché dice solo che il contratto di licenza deve essere accettato.
Quindi, per risolvere il problema, avviare il programma di installazione di Android SDK e quindi controllare il Repository supporto Android e Google Repository. Successivamente, fai clic su Installare pulsante e accettare il contratto di licenza per installare i componenti.
Ora che hai installato l'app sul tuo dispositivo, è giunto il momento di inviare alcune notifiche push. Ecco alcuni scenari che puoi testare:
Il primo passo per l'invio di una notifica push è quello di andare alla dashboard dell'app Ionic e fare clic su Spingere scheda. Poiché questa è la prima volta che usi il servizio, dovresti vedere la seguente schermata:
Vai avanti e clicca su Crea il tuo primo Push pulsante. Questo ti reindirizzerà alla pagina per la creazione di una notifica push. Qui puoi inserire il nome della campagna, il titolo e il testo della notifica e tutti i dati aggiuntivi che vuoi passare. Qui stiamo impostando is_cat a 1.
Successivamente, è possibile impostare opzionalmente le opzioni di notifica push per iOS o Android. Poiché invieremo solo dispositivi Android, impostiamo solo le opzioni per Android:
Il prossimo passo è selezionare gli utenti che riceveranno la notifica. Qui puoi selezionare Tutti gli utenti se si desidera inviare la notifica a tutti i dispositivi registrati per le notifiche push.
Se si desidera inviare solo a utenti specifici, è possibile anche filtrarli:
Prendi nota che l'elenco utenti viene compilato da utenti registrati tramite il servizio Auth.
Il passaggio finale è selezionare quando inviare la notifica. Poiché stiamo solo testando, possiamo inviarlo immediatamente. Cliccando sul Invia questa spinta pulsante invierà la notifica agli utenti selezionati.
In questo tutorial, hai imparato a conoscere Ionic Push e come rendere le notifiche push più facili da implementare. Attraverso la dashboard di Ionic, sei stato in grado di personalizzare le notifiche che stai inviando agli utenti. Consente inoltre di selezionare gli utenti a cui si desidera inviare le notifiche.
Funziona alla grande se non hai già un back-end già esistente. Ma se hai già un back-end, potresti chiederti come puoi usare Ionic Push con la tua applicazione web esistente. Bene, la risposta è l'API HTTP Ionic. Ciò consente di inviare una richiesta HTTP dal proprio server Web al server di Ionic ogni volta che viene soddisfatta una condizione specifica. La richiesta inviata verrà quindi attivata per inviare una notifica push ai tuoi utenti. Se vuoi saperne di più, puoi consultare i documenti per il servizio Ionic Push.
E mentre sei qui, dai uno sguardo ad alcuni dei nostri altri corsi e tutorial su Ionic 2!
