Push notifikacije postaju sve popularnije i nisu više rezervirane samo za nativne mobilne aplikacije. U ovom ćemo blog postu proći kroz proces postavljanja Ionic 2 aplikacije za primanje push notifikacija.
Što se tiče slanja push notifikacija to smo obradili u blog postu pod nazivom Node.js API za slanje Push notifikacija. To je samo jedan od načina kako slati push notifikacije i ako vam djeluje komplicirano ili vam se jednostavno ne sviđa uvijek možete koristiti nešto od sljedećeg: Ionic Cloud, Pushwoosh, OneSignal,…
Instalacija Push plugina
Nakon što smo postavili Ionic 2 projekt možemo dodati Push plugin pomoću naredbe:
1 |
$ ionic plugin add phonegap-plugin-push --variable SENDER_ID=XXXXXXXXX |
SENDER_ID ćete pronaći u Google Firebase sučelju na adresi https://console.firebase.google.com/.
API servis
Prije nego postavimo push plugin napravit ćemo servis api-service.ts. Više o Ionic 2 servisima možete saznati u blog postu Ionic 2 – prikaz JSON-a sa API-ja.
Možete primijetiti da koristimo https://localhost:3001/api/device-token za slanje tokena u MySQL bazu. To je URL koji smo napravili u jednom od prethodnih blog postova.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import 'rxjs/add/operator/map'; @Injectable() export class ApiService { constructor(public _http: Http) { console.log('Hello ApiService'); } sendToken(a: any){ return this._http.post('http://localhost:3001/api/device-token', a) .map(res => res.json()); } } |
Postavljanje push plugina
Nakon što smo instalirali Push plugin trebamo ga uključiti u projekt.
Sve dalje navedeno dodajemo u app.component.ts.
Za početak pozivamo Push plugin i ApiService.
1 2 |
import { StatusBar, Splashscreen, Push } from 'ionic-native'; import { ApiService } from '../providers/api-service'; |
Dodajemo provider za MyApp komponentu
1 |
providers: [ApiService] |
Unutar konstruktora definiramo ranije kreiran ApiService
1 |
public _api: ApiService |
Sljedeći dio služi za upravljanje push notifikacijama. O ovom dijelu koda odvija se inicijalizacija plugina.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
var push = Push.init({ android: { senderID: "xxxxxxxxxxxx" }, ios: { alert: "true", badge: true, sound: 'false' }, windows: {} }); push.on('registration', (data) => { console.log(data.registrationId); this.device_token.token = data.registrationId; //Provjera tokena if(localStorage.getItem('device_token')){ console.log("Ne šalji ništa! Token već postoji lokalno!"); } else { //Token ne postoji, spremi novi localStorage.setItem('device_token', this.device_token.token) //Pošalji token u bazu console.log("Šaljem token u bazu!"); this._api.sendToken(this.device_token).subscribe(res => { console.log("Rezultat: " + res); }); } }); push.on('notification', (data) => { console.log(data); }); push.on('error', (e) => { console.log(e.message); }); |
Sve zajedno to izgleda ovako:
P.S. Ako ne želite koristiti svoj NodeJS/Express.js server ne morate praviti import { ApiService } from '../providers/api-service;' i možete izbaciti dio vezan uz provjeru tokena.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
import { Component } from '@angular/core'; import { Platform } from 'ionic-angular'; import { StatusBar, Splashscreen, Push } from 'ionic-native'; import { ApiService } from '../providers/api-service'; import { HomePage } from '../pages/home/home'; @Component({ templateUrl: 'app.html', providers: [ApiService] }) export class MyApp { rootPage = HomePage; device_token = { token: '' }; constructor(platform: Platform, public _api: ApiService) { platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. StatusBar.styleDefault(); //Push notifikacije početak var push = Push.init({ android: { senderID: "344715041226" }, ios: { alert: "true", badge: true, sound: 'false' }, windows: {} }); push.on('registration', (data) => { console.log(data.registrationId); this.device_token.token = data.registrationId; //Provjera tokena if(localStorage.getItem('device_token')){ console.log("Ne šalji ništa! Token već postoji lokalno!"); } else { //Token ne postoji, spremi novi localStorage.setItem('device_token', this.device_token.token) //Pošalji token u bazu console.log("Šaljem token u bazu!"); this._api.sendToken(this.device_token).subscribe(res => { console.log("Rezultat: " + res); }); } }); push.on('notification', (data) => { console.log(data); }); push.on('error', (e) => { console.log(e.message); }); //Push notifikacije kraj Splashscreen.hide(); }); } } |
Slanje push notifikacija iz Firebase sučelja
Push notifikacije također možete slati direktno iz Google Firebase sučelja bez potrebe za izradom i pokretanjem NodeJS servera i uvozom import { ApiService } from '../providers/api-service;' u Ionic 2 aplikaciju.
Pokretanje aplikacije
Kada se aplikacija prvi put pokrene token ne postoji u lokalnoj memoriji te se u tom trenutku sprema u lokalnu memoriju uređaja i istovremeno šalje u bazu podataka.
Ako bi maknuli provjeru tokena to bi značilo da bi se token putem API-ja poslao u MySQL bazu svaki put kada se pokrene aplikacija. To naravno ne želimo pa zato vršimo provjeru.
Kada se aplikacija pokrene svaki sljedeći put provjera će vidjeti da token već postoji i neće ga ponovno slati u MySQL bazu.
Zaključak
U ovom smo blog postu obradili postupak postavljanja Ionic 2 aplikacije za primanje push notifikacija na Android mobilni uređaj. Kao što se može vidjeti postupak nije kompliciran, a sve dalje ovisi o specifičnim potrebama svake aplikacije. Različiti scenariji kada i kome slati push notifikacije trebaju se razraditi za svaku aplikaciju posebno.
Što se primanja push notifikacija na iOS uređaje tiče o tome možda nekom drugom prilikom jer postupak je kompliciraniji.