de Filip Jerga

Cum să primiți notificări push funcționând cu Ionic 4 și Firebase

Un tutorial complet pas cu pas care vă va duce pe drumul cel bun pentru iOS și Android

Cum sa primiti notificari push functionand cu Ionic 4 si

Configurarea notificărilor push poate fi cu adevărat frustrantă și consumatoare de timp. Așa că am parcurs toate setările și ți-am pregătit acest tutorial.

Condiție prealabilă

Ionic 4 ar trebui să fie deja instalat.

Navigare în secțiune

  1. Instalarea pachetului
  2. Configurare Firebase pentru Android și iOS
  3. Implementarea codului de notificare push
  4. Testează notificările push pe Android
  5. Preinstalare notificări push iOS
  6. Testează notificările push pe iOS

1. Instalarea pachetului

Deschideți proiectul dvs. Ionic în editorul de codare la alegere și deschideți și terminalul. Navigați la folderul proiectului.

În primul rând, vom instala toate pachetele necesare.

Ce trebuie să instalăm:

  • Plugin Cordova pentru firebase: ionic cordova plugin add cordova-plugin-firebase
  • Pachetul nativ Firebase: deoarece Ionic 4 este în versiune beta, verificați pachetele native Ionic în package.json și instalați aceeași versiune ca și alte pachete native Ionic. În cele din urmă, să tastăm: npm install --save @ionic-native/firebase@5.0.0-beta.14
Cum sa primiti notificari push functionand cu Ionic 4 si
Am versiunea beta.14
  • Un ultim pachet, AngularFire 2. Aceasta este o bibliotecă pentru Angular și Firebase: npm install --save angularfire2 firebase

Instalarea pachetelor, gata! Să trecem la a doua secțiune.

2. Configurare Firebase pentru iOS și Android

Înainte de a începe toată configurarea, trebuie să vă avertizez că nu puteți testa notificările push pe emulatorul iOS. Pentru a-l testa, trebuie să aveți un cont de dezvoltator Apple, care costă în jur de 99 USD pe an. Vă sugerez să parcurgeți oricum configurarea iOS, astfel încât să vă ofere o mai bună înțelegere pentru proiectele viitoare.

Notă: Pașii care încep aici sunt foarte importanți, așa că vă rugăm să aveți răbdare. Citiți încet și asigurați-vă că aveți totul în regulă. Căutarea problemelor după toate configurările poate fi foarte frustrantă, credeți-mă – vorbesc din propria experiență.

iOS

Navigați la pagina Firebase și conectați-vă la o consolă. Dacă nu aveți încă un proiect creat, faceți-l acum. Ar trebui să vedeți acest ecran.

1612125250 664 Cum sa primiti notificari push functionand cu Ionic 4 si

Faceți clic pe butonul iOS și veți vedea acest lucru:

1612125250 502 Cum sa primiti notificari push functionand cu Ionic 4 si

Acum trebuie să furnizăm ID-ul pachetului nostru iOS și acesta trebuie să fie același ca în proiectul dvs. Ionic. Să presupunem că vreau să am numele pachetului com.filipjerga.angularcourse, atunci trebuie să fac următoarele:

Deschideți proiectele Ionic și navigați la fișierul „config.xml”. Să inspectăm elementul widget. Id atributul deține identificatorul unic al aplicației dvs.. Am mai spus dacă ați specificat numele pachetului dvs. la com.filipjerga.angularcourse în Firebase, id în proiectul tău ionic trebuie să fie același! Puteți, de asemenea, să părăsiți id așa cum îl aveți deja în proiectul dvs. Ionic, dar trebuie să îl schimbați în Firebase.

1612125250 210 Cum sa primiti notificari push functionand cu Ionic 4 si
ID-ul elementului widget este ceea ce trebuie să specificăm în Firebase

După ce obțineți valoarea de id, nu uitați să îl furnizați aplicației dvs. Firebase ca ID de pachet.

1612125251 180 Cum sa primiti notificari push functionand cu Ionic 4 si
ID-ul pachetului trebuie să fie identic cu cel al widgetului dvs.

Ar trebui să fie totul în primul pas al înregistrării aplicației. Acest pas este crucial, deci verificați dublu valoarea id pe widget și ID-ul pachetului aplicației dvs. Firebase.

Lăsați celelalte câmpuri goale și faceți clic pe „Înregistrați aplicația”.

Acum trebuie să descărcăm „GoogleService-Info.plist”.

1612125251 214 Cum sa primiti notificari push functionand cu Ionic 4 si

Când este descărcat, lipiți-l într-un folder de bază al proiectelor dvs. Puteți vedea o structură de dosare în proiectul meu aici.

Putem sări peste toți pașii suplimentari, deoarece nu sunt necesari pentru configurarea proiectului Ionic. Ar trebui să aveți aplicația IOS pregătită.

1612125251 965 Cum sa primiti notificari push functionand cu Ionic 4 si
Sari peste acest pas

Android

Următorii pași pentru Android sunt aproape aceiași ca și pentru configurarea iOS:

  • Faceți clic pe „adăugați aplicație” pentru Android, la fel ca și în iOS.
  • Numele pachetului Android trebuie să fie același cu ID-ul nostru widget, în cazul meu: com.filipjerga.angularcourse
  • Apoi, descărcați google-services.json. La fel ca înainte cu fișierul iOS, trebuie să îl copiem în dosarul de bază al aplicațiilor noastre
  • Faceți clic pe „Următorul” până când ajungeți la ultimul pas, pe care îl puteți omite și ar trebui să ajungeți la ambele aplicații create.

Ura! Felicitări! Dar este încă prea devreme pentru a ne înveseli.

1612125251 277 Cum sa primiti notificari push functionand cu Ionic 4 si
Au fost create atât aplicațiile iOS, cât și cele angulare.

3. Implementați codul de notificare push

Importarea pachetelor

A sosit momentul să ne încălzim degetele în cele din urmă prin tastarea unui cod. Vom începe cu importul pachetelor pe care le-am instalat înainte.

  1. Mergi la app.module.ts
  2. Fișierul dvs. ar trebui să arate astfel:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { Firebase } from '@ionic-native/firebase/ngx';

const config = {
    apiKey: "AIzaSyD-K6SlFECXKmd8iHwEvggVtavKgyPF2k8",
    authDomain: "angular2-course-9270e.firebaseapp.com",
    databaseURL: "https://angular2-course-9270e.firebaseio.com",
    projectId: "angular2-course-9270e",
    storageBucket: "angular2-course-9270e.appspot.com",
    messagingSenderId: "443316848633"
  };

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    IonicStorageModule.forRoot(),
    AngularFireModule.initializeApp(config),
    AngularFirestoreModule],
  providers: [
    StatusBar,
    SplashScreen,
    Firebase,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
app.module.ts

Poti sa vezi Firebase în matricea furnizorilor și AngularFirestoreModule și AngularFireModule în importuri.

Dar unde a făcut config obiect provenit de la? Puteți vedea multe informații acolo ca „apiKey, authDomain” și așa mai departe.

Pentru a răspunde la acest lucru, trebuie să ne întoarcem la consola noastră Firebase și să creăm un aplicație web.

1612125251 328 Cum sa primiti notificari push functionand cu Ionic 4 si
Selectați platforma web

Trebuie să faceți clic pe pictograma platformei web din dreapta de pe pictograma Android (vedeți imaginea de mai sus). Când este selectată aplicația web, vi se va prezenta propria dvs. config obiect.

1612125251 753 Cum sa primiti notificari push functionand cu Ionic 4 si
Obiectul meu de configurare pentru Firebase după selectarea aplicației web.

Acum este timpul să copiați întreg config obiecta la app.module.ts în proiectele noastre ionice. Vă rog a te asigura îl schimbați pentru obiectul dvs. de configurare! Al meu nu va funcționa pentru tine.

1612125251 100 Cum sa primiti notificari push functionand cu Ionic 4 si
Furnizați config la app.module.ts

Acum putem începe să lucrăm la implementarea serviciului de notificare push.

Serviciu de notificare push

Să creăm un serviciu nou. Spune-i cum îți place. O voi numi pe a mea fcm.service.ts. FCM înseamnă Firebase Cloud Messaging.

În primul rând, să aruncăm o privire asupra implementării serviciului. Îl voi explica rând cu rând.

import { Injectable } from '@angular/core';
import { Firebase } from '@ionic-native/firebase/ngx';
import { Platform } from '@ionic/angular';
import { AngularFirestore } from 'angularfire2/firestore';

@Injectable()
export class FcmService {

  constructor(private firebase: Firebase,
              private afs: AngularFirestore,
              private platform: Platform) {}

  async getToken() {
    let token;

    if (this.platform.is('android')) {
      token = await this.firebase.getToken();
    }

    if (this.platform.is('ios')) {
      token = await this.firebase.getToken();
      await this.firebase.grantPermission();
    }

    this.saveToken(token);
  }

  private saveToken(token) {
    if (!token) return;

    const devicesRef = this.afs.collection('devices');

    const data = {
      token,
      userId: 'testUserId'
    };

    return devicesRef.doc(token).set(data);
  }

  onNotifications() {
    return this.firebase.onNotificationOpen();
  }
}
fcm.service.ts

Dacă dorim să trimitem o notificare push către un dispozitiv, trebuie să obținem un identificator unic al dispozitivului. În acest caz se numește a token.

Trebuie să verificăm dacă există un dispozitiv specific platformei, din cauza unui pas suplimentar în configurarea iOS. iOS necesită permisiuni explicite pentru a primi notificări push.

Acum trebuie să stocăm acest jeton undeva, dar unde? Vom stoca jetoane în Baza de date Firebase. Puteți vedea, eu creez dispozitiv colecții și le completez cu data care conține token și doar o testare UserId. Perfect! Acum, ne-am stocat simbolul și ne putem abona la notificări.

Abonarea la notificări este de fapt foarte simplă. Trebuie doar să sunăm this.firebase.onNotificationOpen()

Uimitor. Serviciu verificat!

Toate acestea sunt frumoase, dar cam inutile, deoarece încă nu ne folosim serviciul. Să o rezolvăm!

Treceți la app.component.ts și scrieți următoarele:

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 { FcmService } from './shared/service/fcm.service';
import { ToastService } from './shared/service/toast.service';
import { ToastController } from '@ionic/angular';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private fcm: FcmService,
    private toastr: ToastService,
    public toastController: ToastController

  ) {
    this.initializeApp();
  }

  private async presentToast(message) {
    const toast = await this.toastController.create({
      message,
      duration: 3000
    });
    toast.present();
  }

  private notificationSetup() {
    this.fcm.getToken();
    this.fcm.onNotifications().subscribe(
      (msg) => {
        if (this.platform.is('ios')) {
          this.presentToast(msg.aps.alert);
        } else {
          this.presentToast(msg.body);
        }
      });
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.notificationSetup();
    });
  }
}
app.component.ts

Funcția este deosebit de importantă aici notificationSetup.

Primim mai întâi un simbol unic al dispozitivului.

De asemenea, ne abonăm la notificările primite de la Firebase.

Când mesajul este primit, trebuie să verificăm, din nou, platforme specifice. Pe iOS textul mesajului dvs. este sub aps.alert . Pe Android este sub body.

Apoi, vom afișa pur și simplu mesajul primit ca un Toast.

Acum, configurarea codului este terminată. Ne apropiem foarte mult! Este timpul să-l testați.

4. Testați notificările push pe Android

Toate setările necesare pentru Android ar trebui făcute chiar acum. Puteți începe să emulați aplicația prin:

ionic cordova emulate android

sau

ionic cordova build android și deschideți versiunea manuală în Android Studio.

Să lansăm aplicațiile noastre și să mergem la un meniu Acasă, așa că vom vedea o notificare push acolo. Asigurați-vă că aplicația dvs. a fost lansată corect în emulator și că nu aveți erori.

Reveniți la browserele dvs. la aplicațiile Firebase. Acum este timpul să inspectăm baza noastră de date Firebase. Puteți găsi opțiunea bazei de date în panoul din stânga sub Dezvolta categorie.

1612125251 59 Cum sa primiti notificari push functionand cu Ionic 4 si
Baza de date Firebase

După ce aplicația dvs. a fost lansată în emulatoare, codul de la app.component.ts am scris acum câteva clipe a fugit. Nu este de mirare că baza noastră de date este populată. În funcția „saveToken” am specificat colecția „dispozitive” și am salvat simbolul cu ID-ul utilizatorului ca document în această colecție de dispozitive. Asta vedem în baza noastră de date.

În cazul meu, am mai multe jetoane în baza de date, dar ar trebui să aveți doar unul, deoarece am rulat aplicația noastră pentru prima dată. Veți crea un document nou pe dispozitiv / emulator unic pe care rulați aplicația.

Acum este timpul să copiați acest jeton pentru a trimite notificări push către un anumit dispozitiv.

1612125251 699 Cum sa primiti notificari push functionand cu Ionic 4 si
Colecția de baze de date Firebase, veți vedea un singur document

Navigați la panoul din stânga la o filă de creștere și faceți clic pe mesagerie cloud.

1612125251 139 Cum sa primiti notificari push functionand cu Ionic 4 si
Faceți clic pe Mesagerie în cloud

Acum trebuie să completăm datele necesare. Introduceți textul mesajului dvs. și furnizați simbolul dispozitivului din baza de date pe care tocmai am copiat-o.

1612125251 212 Cum sa primiti notificari push functionand cu Ionic 4 si

Când trimiteți un mesaj, deschideți simultan dispozitivul emulat și urmăriți ce se întâmplă.

Trimiteți un mesaj, aaaa și Felicitări! Acum configurarea dvs. Android este terminată și puteți trimite notificări push! Nu este minunat?

1612125251 513 Cum sa primiti notificari push functionand cu Ionic 4 si
Notificare push pe Android.

5. Preinstalare notificări push iOS

Închideți băieții, instalarea iOs vine. Să separăm această configurare în mai mulți pași, astfel încât să nu avem un atac de panică. Hai să săpăm!

Primul, creați aplicația pentru iOS: ionic cordova build ios

Deschideți Xcode și găsiți aplicația încorporată platforms/ios/nameofyourapp.xcodeproj . Deschidel.

1612125251 158 Cum sa primiti notificari push functionand cu Ionic 4 si
Deschideți .xcodeproj

Aceasta ar trebui să deschidă o structură arborescentă a aplicației dvs. în partea stângă. Faceți dublu clic pe fișierul rădăcină al acestei structuri. Se va deschide un meniu suplimentar cu mai multe setări pentru aplicația dvs.

1612125251 482 Cum sa primiti notificari push functionand cu Ionic 4 si
Mai multe setari

Conectați-vă cu contul dvs. de dezvoltator.

1612125251 120 Cum sa primiti notificari push functionand cu Ionic 4 si
Conectați-vă cu un cont de dezvoltator

5. Deschideți fila „Capabilități” de sus și activați „Notificări push”.

1612125251 64 Cum sa primiti notificari push functionand cu Ionic 4 si
Activați notificările push

6. Navigați la Pagina contului de dezvoltator Apple. Sub „Certificate”, selectați „Toate” și faceți clic pe „+" la adăuga un nou certificat.

1612125251 606 Cum sa primiti notificari push functionand cu Ionic 4 si
Faceți clic pe semnul plus.

Activați serviciul Apple Push Notification și treceți la pasul următor.

1612125251 576 Cum sa primiti notificari push functionand cu Ionic 4 si

Acum să alegem aplicația dvs.

1612125251 23 Cum sa primiti notificari push functionand cu Ionic 4 si

Avem nevoie să cere un certificat. Pe computerul dvs. Mac, accesați „Keychain Access” -> „Certificate Assistant” -> „Solicitați un certificat de la o autoritate de certificare”.

1612125251 969 Cum sa primiti notificari push functionand cu Ionic 4 si

Completați toate informațiile necesare – adresa dvs. de e-mail și numele comun – și salvați-le pe disc.

1612125251 196 Cum sa primiti notificari push functionand cu Ionic 4 si

În Consola Apple treceți la pasul următor și încărcați cererea dvs. de certificat.

1612125251 40 Cum sa primiti notificari push functionand cu Ionic 4 si

În pasul următor, certificatul dvs. ar trebui creat și îl puteți descărca. Veți avea nevoie de el mai târziu.

1612125251 781 Cum sa primiti notificari push functionand cu Ionic 4 si

Acum trebuie creați o cheie de serviciu pentru a activa notificările push Apple. Sub „Taste” selectați „Toate”. Alegeți numele cheii. Activați „Serviciul de notificări push Apple (APN)”.

1612125251 779 Cum sa primiti notificari push functionand cu Ionic 4 si

Faceți clic pe „Continuați” și confirmați cheia. Nu partajați niciodată astfel de date cu alții. Acum puteți descărca cheia.

1612125251 230 Cum sa primiti notificari push functionand cu Ionic 4 si

Acum trebuie să ne întoarcem la Firebase.

În Firebase, deschideți aplicația iOS și navigați la „Mesagerie în cloud”.

1612125252 577 Cum sa primiti notificari push functionand cu Ionic 4 si

Avem nevoie să încărcați cheia noastră de autentificare APN pe care am generat-o cu ceva timp în urmă. Faceți clic pe „Încărcați”.

1612125252 965 Cum sa primiti notificari push functionand cu Ionic 4 si

Furnizați toate informațiile și încărcați cheia.

În primul rând, încărcați fișierul „.p8”, descărcat mai devreme de pe consola Apple. Introduceți ID-ul cheii. Puteți obține prefixul ID-ului aplicației din consola Apple în „Identificatori” -> „ID-urile aplicației” -> „Aplicația dvs.” -> „Prefix”.

1612125252 275 Cum sa primiti notificari push functionand cu Ionic 4 si
1612125252 742 Cum sa primiti notificari push functionand cu Ionic 4 si
Încărcați fișierul p8 și obțineți codul ID și prefixul ID

Asta este. Lacrimi de bucurie îmi curg pe față.

Putem testa notificările push pe iOS. Să nu uităm că trebuie să folosim un dispozitiv real.

6. Testați notificarea push pe iOS

În primul rând, trebuie să ne construim aplicațiile, așa că haideți să rulăm: ionic cordova build ios

În Xcode puteți rula aplicația pe un dispozitiv conectat prin USB cu computerul.

1612125252 688 Cum sa primiti notificari push functionand cu Ionic 4 si
Alegeți dispozitivul

Să așteptăm până când totul este lansat. Acum putem repeta pașii pentru a trimite notificări push Secțiunea 4, deoarece este la fel ca pe Android.

Sa nu uiti asta trebuie să utilizați un nou jeton acum, acest lucru a fost generat pentru dispozitivul dvs. iOS. Accesați Bazele de date, obțineți un nou jeton și trimiteți o notificare push. Rezultatul dvs. ar trebui să arate astfel.

1612125252 908 Cum sa primiti notificari push functionand cu Ionic 4 si
1612125252 317 Cum sa primiti notificari push functionand cu Ionic 4 si

Sper că ați reușit să configurați notificările push. Este nevoie de ceva timp și răbdare pentru a obține totul corect, dar rezultatul și beneficiile sunt uimitoare.

Dacă îți place tutorialul meu și te interesează mai multe, poți verifica cursul meu despre Udemy: Ionic 4 Crash Course cu Heartstone API și Angular.

Pentru un proiect complet vezi Github Repo al meu.

Codificare fericită!

Filip