Questa guida mostra come creare un’applicazione (android, iOS o windows) che supporta le notifiche push di Puship attraverso la piattaforma Ionic Framework sul CLI Cordova.
Se è la tua prima app con ionic framework ti consiglio di seguirti questa guida cosi da installare i tool necessari e fare un po di pratica con una prima applicazione base.
ionic start PushipExample --Il primo argomento è il nome della tua applicazione
Seleziona il framework javascript che preferisci utilizzare, in questo tutorial utilizzeremo Angular.
Seleziona il template dal quale vuoi partire per creare il tuo progetto, in questo tutorial utilizzeremo il Blank template.
Ionic permette di scegliere se utilizzare la CLI Capacitor oppure Cordova. Dato che in questa guida useremo Cordova seleziona NO alla richiesta di integrazione di Capacitor.
-- geolocation plugin ionic cordova plugin add cordova-plugin-geolocation npm install @ionic-native/geolocation -- device plugin ionic cordova plugin add cordova-plugin-device npm install @ionic-native/device -- push plugin ionic cordova plugin add phonegap-plugin-push npm install @ionic-native/push --puship plugin ionic cordova plugin add puship-plugin
import { Push } from '@ionic-native/push/ngx'; providers: [ StatusBar, SplashScreen, Push, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ],
import { Component } from '@angular/core'; import { Platform } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { Push, PushObject, PushOptions } from '@ionic-native/push/ngx'; declare var Puship; @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.scss'] }) export class AppComponent { constructor( private platform: Platform, private splashScreen: SplashScreen, private push: Push, private statusBar: StatusBar ) { this.initializeApp(); } initializeApp() { this.platform.ready().then(() => { this.statusBar.styleDefault(); this.splashScreen.hide(); this.push.hasPermission() .then((res: any) => { if (res.isEnabled) { console.log('We have permission to send push notifications'); } else { console.log('We do not have permission to send push notifications'); } }); //REMOVE THIS SECTION ON IOS // Create a channel (Android O and above). You'll need to provide the id, description and importance properties. this.push.createChannel({ id: "testchannel1", description: "My first test channel", // The importance property goes from 1 = Lowest, 2 = Low, 3 = Normal, 4 = High and 5 = Highest. importance: 3, //badge is used to if badge appears on the app icon see https://developer.android.com/reference/android/app/NotificationChannel.html#setShowBadge(boolean). //false = no badge on app icon. //true = badge on app icon badge: false }).then(() => console.log('Channel created')); // Delete a channel (Android O and above) this.push.deleteChannel('testchannel1').then(() => console.log('Channel deleted')); // Return a list of currently configured channels this.push.listChannels().then((channels) => console.log('List of channels', channels)) //REMOVE THIS SECTION ON IOS // to initialize push notifications const options: PushOptions = { android: {}, ios: { alert: 'true', badge: true, sound: 'false' }, windows: {}, browser: { pushServiceURL: 'http://push.api.phonegap.com/v1/push' } } const pushObject: PushObject = this.push.init(options); pushObject.on('notification').subscribe((notification: any) => { alert('Received a notification:' + JSON.stringify(notification)); } ); pushObject.on('registration').subscribe((registration: any) => { console.log('Device registered: ', registration); //Puship.EnableLog(true); Puship.Register( registration.registrationId, 'YOUR-PUSHIP-APP-CODE', { successCallback: function (pushipresult) { alert("device registered with DeviceId:" + pushipresult.DeviceId()); }, failCallback: function (pushipresult) { alert("error during registration: " + JSON.stringify(pushipresult)); } } ); }); pushObject.on('error').subscribe(error => console.error('Error with Push plugin', error)); }); } }
ionic build
ionic cordova prepare android //The platform parameter can be android or ios
Ad applicazione avviata dovresti visualizzare il messaggio “device registered with…”. Puoi ora connetterti al Puship Manager e inviare notifiche push ai tuoi device!
Nota bene:
Di seguito sono disponibili dei video che spiegano passo passo come creare un’applicazione e attivare le notifiche push con Puship per Android e per iOS:
Di seguito trovi il codice utilizzato nei video:
Per poter conoscere dettagliatamente come aggiungere tags, gestire la geolocalizzazione e tutto ciò che riguarda il resto delle api puship visita la documentazione comune per tutte le piattaforme: