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

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

• 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.

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

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.

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

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”.

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ă.

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.

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 {}

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.

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.

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.

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();
  }
}

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();
    });
  }
}

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.

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.

Navigați la panoul din stânga la o filă de creștere și faceți clic pe mesagerie 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.

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?

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.

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.

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

5. Deschideți fila „Capabilități” de sus și activați „Notificări 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.

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

Acum să alegem aplicația dvs.

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”.

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

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

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

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)”.

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.

Acum trebuie să ne întoarcem la Firebase.

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

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”.

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”.

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.

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.

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