Piattaforma per l’invio di notifiche push

Di piattaforme per inviare push notifications ne esistono diverse.

In questo tutorial creo una semplice app Ionic al solo scopo di concentrarmi sulla configurazione ed invio di messaggi push dalla piattaforma OneSignal.

Creazione progetto Ionic

Per chi non ha ancora installato Ionic o non l’ha mai usato rimando alla documentazione della getting-started.

Per chi invece ha già installato Ionic può lanciare il comando che permette la creazione di un progetto base a scopo divulgativo.

ionic start run PushAppDemo tabs

Dove PushAppDemo è il nome del progetto e il nome che viene dato alla cartella che ospita l’intero progetto Ionic.

Entrati nella root del progetto appena creato possiamo installare il necessario per distribuire e testare l’invio delle notifiche push.

L’ordine corretto di installazione lo possiamo trovare stranamente nel Troubleshooting di Onesignal, riporto un estratto dei comandi con relativo ordine di esecuzione:

ionic platform add android
ionic platform add ios
ionic plugin add onesignal-cordova-plugin
ionic plugin add cordova-plugin-whitelist

Registrazione e configurazione Google

Ogni volta che vogliamo usare le API di Google dobbiamo entrate nella console web di Google, creare un progetto e attivare i servizi a cui vogliamo accedere ed infine creare le credenziali associate ai servizi attivi.

Dato che la documentazione OneSignal sembra del tutto esaustiva riguardo a questo aspetto vi indico solo dove trovarla per ridurre i tempi di ricerca: Web Push Configuration

Registrazione e configurazione OneSignal

Una volta completata la registrazione alla piattaforma OneSignal non dobbiamo fare altro che creare un’app, consiglio di dare lo stesso nome che avete dato al progetto nella console di Google.

Viene avviato un wizard dove scegliamo nel mio caso la piattaforma Android e come SDK Ionic e dove rispettivamente inseriamo l’API Key del servizio di messaggistica presente nella google console associato all’attivazione nel punto precedente.

notifiche push dashboard OneSignal

notifiche push dashboard OneSignal

notifiche push dashboard OneSignal

Mani nel codice

Nel classico file app.js di Ionic inseriamo il seguente codice:

Dove vediamo in sequenza, la funzione di callback quando riceviamo la notifica

var notificationOpenedCallback = function(jsonData) {
alert('push notifications received');
console.log('didReceiveRemoteNotificationCallBack: ' + JSON.stringify(jsonData));
};

L’inizializzazione dove in ordine si presentano i  parametri dell’app-id dell’app creata in

OneSignal e il project number del progetto creato nella google console:

window.plugins.OneSignal.init(<OneSignal App ID>,
{googleProjectNumber: <Google Project number>},
notificationOpenedCallback);

Qui recuperiamo lo userid o player id come viene chiamato in OneSignal del device registrato

window.plugins.OneSignal.getIds(function(ids) {
console.log('UserID: ' + ids.userId);
console.log('PushToken: ' + ids.pushToken);
console.log('getIds: ' + JSON.stringify(ids));
});

Ed infine alcune property che dobbiamo settare per mostrare alert ed impostare la subscription

// Show an alert box if a notification comes in when the user is in your app.
window.plugins.OneSignal.setSubscription(true);
window.plugins.OneSignal.enableNotificationsWhenActive(true);
window.plugins.OneSignal.enableInAppAlertNotification(true);

Per i dettagli seguite la API reference

Testing

  1. Deve comparire dopo l’installazione nella sezione all users, l’utente appena registrato
  2. Entriamo nella sezione dashboard e utilizziamo il form di invio push notification messo a disposizione dalla piattaforma

notifiche push dashboard OneSignal

Entriamo nella preview e inviamo la notifica.

  1. Facciamo un test con Postman chrome add-on o altri client per testare le API che poi andremo a utilizzare lato server

OneSignal testing messaggi push

Nel mio Github trovate il codice dell’app ionic di test dove dovete inserire nel file app.js nei parametri del metodo init come indicato dalla API reference

App_id lo trovate trovate nella dashboard:

OneSignal notifiche push configuration

Nel codice SERVER o nel client POSTMAN dovrete usare la REST API key

Il googleProjectNumber lo trovate nella Google console.

Nel test che ho fatto ho usato invece che la property relativa al segmento, lo specifico player ID  con cui viene registrato su OneSignal il device.

Conclusioni

La documentazione al progetto è sufficiente e al momento della pubblicazione di questo post non ci sono costi per utilizzare il servizio. Dopo l’invio c’è una comoda sezione dove vedere le statistiche relative alle notifiche.

Prima di chiudere il post vi suggerisco alcuni  gruppi dove trovare possibili risposte non contemplate qui:

Ionic Framework Group su Facebook

Ionic Italia Gruppo su Facebook

Ed immancabile la già citata documentazione OneSignal

Condividi:

Leave a Reply

Your email address will not be published. Required fields are marked *

Il presente sito Web utilizza cookie tecnici e di profilazione di terze parti per migliorare l'esperienza di navigazione. Puoi usare il sito senza cambiare le impostazioni dei cookie o cliccare su Accetta per acconsentire il loro utilizzo. Informazioni

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close

Copyright © 2018 Refacturing Ltd

Refacturing Ltd Registered in England & Wales,

Company Number: 09953873 VAT GB 240 7996 82

Privacy Policy - Utilizzo dei cookie