Notifiche push Ionic Capacitor con Firebase: una guida passo dopo passo

In this tutorial, we will integrate push notifications in an Ionic Capacitor app using Firebase. You don’t need a specific service for this, but you do need to configure several things beforehand. Firebase is an excellent choice since it’s required for Android, and you can easily use it to send notifications without using the database.

Prima, creeremo un app Ionic con Capacitor abilitato e specificheremo le nostre ID del pacchetto, che è l'identificatore univoco per la tua app. Poi costruiremo l'app e aggiungeremo le piattaforme native.

ionic start pushApp blank --type=angular --capacitor --package-id=com.appdactic.devpush
cd ./pushApp
ionic build
npx cap add ios
npx cap add android

Se già hai un'app, puoi modificare il capacitor.config.json per includere il tuo appId. Tuttavia, se i cartelle native già esistono, avrai bisogno di sostituire l'ID in tutti i file in cui compare, poiché Capacitor crea la cartella una sola volta e non aggiorna l'ID stesso. Nel capacitor.config.json, puoi specificare anche opzioni come aggiornare il conteggio del badge, riprodurre un suono al push e mostrare un avviso quando arriva una notifica.

{
  "appId": "com.appdactic.devpush",
  "appName": "pushApp",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    },
    "PushNotifications": {
      "presentationOptions": ["badge", "sound", "alert"]
    }
  },
  "cordova": {}
}

Configuriamo ora le notifiche push al di fuori dell'app.

Configurazione Firebase

Inizia con creare un nuovo progetto Firebase o utilizzare uno esistente. Fornisci un nome e opzioni predefinite per un nuovo progetto.

Se hai un nuovo app, dovresti vedere “Inizia con l'aggiunta di Firebase all'app” nel tuo dashboard dell'app. Altrimenti, clicca l'icona del cassetto e vai a impostazioni del progetto per aggiungere un'app.

Il dialogo per sia iOS che Android assomiglia, e l'importante è utilizzare il tuo __CAPGO_KEEP_0__ per gli app.

Dopo lo step iniziale, scarica i seguenti file:

google-services.json file per Android
GoogleService-info.plist file per iOS

Successivamente, configura le piattaforme.

Preparazione del Push per Android

Per Android, sposta il google-services.json file che hai scaricato nella android/app/ cartella.

Ecco tutto per Android. Ora configuriamo iOS.

Preparazione per le notifiche di iOS

Questa parte è più complessa. Innanzitutto, crea un ID App per la tua app nella lista degli identificatori del tuo account di sviluppatore Apple. Assicurati di selezionare la capacità di notifiche Push dalla lista. ionic-ios-push-id Il

Bundle ID

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ dovrebbe essere lo stesso del tuo ID App all'interno di Capacitor e Firebase.

Ora, crea una Chiave e abilita il servizio di notifiche Push per Apple (APNs) Se hai raggiunto il numero massimo di chiavi, puoi utilizzare una chiave esistente o un certificato al suo posto, ma il processo è più complesso.ios-developer-push-key

Dopo aver scaricato il file .p8, caricalo su Firebase. Apri la scheda Cloud Messaging nelle impostazioni del tuo progetto Firebase, caricalo e inserisci i dettagli per la Chiave ID e il tuo ID di Team da iOS.

create a Key and enable the Apple Push Notifications service (APNs) If you have reached the maximum number of keys, you can use an existing key or a certificate instead, but the process is more complicated. ios-developer-push-key

firebase-upload-ios-key

Esegui ora le modifiche al tuo progetto Xcode eseguendo:

npx cap open ios

Copia il file GoogleService-Info.plist che hai scaricato da Firebase nel tuo progetto iOS. Trascina il file nel progetto Xcode all'interno della cartella app/app, e seleziona Copia gli elementi se necessario.

Successivamente, aggiungi un nuovo Pod per la dipendenza Firebase nella ios/App/Podfile:

target 'App' do
  capacitor_pods
  # Add your Pods here
  pod 'Firebase/Messaging'
end

Aggiorna la piattaforma nativa con il seguente comando:

npx cap update ios

Modifica il codice nativo Swift code in ios/App/App/AppDelegate.swift per registrarti con Firebase e restituire il token corretto al tuo app.

import UIKit
import Capacitor
import Firebase

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
    FirebaseApp.configure()
    return true
  }

  // All the existing functions
  // ...

  // Update this one:
    func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
        Messaging.messaging().apnsToken = deviceToken
        InstanceID.instanceID().instanceID { (result, error) in
            if let error = error {
                NotificationCenter.default.post(name: Notification.Name(CAPNotifications.DidFailToRegisterForRemoteNotificationsWithError.name()), object: error)
            } else if let result = result {
                NotificationCenter.default.post(name: Notification.Name(CAPNotifications.DidRegisterForRemoteNotificationsWithDeviceToken.name()), object: result.token)
            }
        }
    }
}

Infine, aggiungi la Capacità per le Notifiche Push nel tuo progetto Xcode.

capacitor-xcode-capability

Ora, costruisci l'app e integra le notifiche push.

Integrazione delle Notifiche Push di Ionic

Crea un servizio e una nuova pagina nel tuo progetto Ionic:

ionic g service services/fcm
ionic g page pages/details

Aggiorna la routing in app/app-routing.module.ts per includere la nuova pagina con un id dinamico:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home/:id',
    loadChildren: () => import('./pages/details/details.module').then( m => m.DetailsPageModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Crea un servizio per gestire le notifiche push in services/fcm.service.ts:

import { Injectable } from '@angular/core';
import {
  Plugins,
  PushNotification,
  PushNotificationToken,
  PushNotificationActionPerformed,
  Capacitor
} from '@capacitor/core';
import { Router } from '@angular/router';

const { PushNotifications } = Plugins;

@Injectable({
  providedIn: 'root'
})
export class FcmService {

  constructor(private router: Router) { }

  initPush() {
    if (Capacitor.platform !== 'web') {
      this.registerPush();
    }
  }

  private registerPush() {
    PushNotifications.requestPermission().then((permission) => {
      if (permission.granted) {
        // Register with Apple / Google to receive push via APNS/FCM
        PushNotifications.register();
      } else {
        // No permission for push granted
      }
    });

    PushNotifications.addListener(
      'registration',
      (token: PushNotificationToken) => {
        console.log('My token: ' + JSON.stringify(token));
      }
    );

    PushNotifications.addListener('registrationError', (error: any) => {
      console.log('Error: ' + JSON.stringify(error));
    });

    PushNotifications.addListener(
      'pushNotificationReceived',
      async (notification: PushNotification) => {
        console.log('Push received: ' + JSON.stringify(notification));
      }
    );

    PushNotifications.addListener(
      'pushNotificationActionPerformed',
      async (notification: PushNotificationActionPerformed) => {
        const data = notification.notification.data;
        console.log('Action performed: ' + JSON.stringify(notification.notification));
        if (data.detailsId) {
          this.router.navigateByUrl(`/home/${data.detailsId}`);
        }
      }
    );
  }
}

Chiamare la initPush() funzione in app/app.component.ts:

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 './services/fcm.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private fcmService: FcmService
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      // Trigger the push setup
      this.fcmService.initPush();
    });
  }
}

Gestisci le informazioni sulla pagina dei dettagli in pages/details/details.page.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Plugins } from '@capacitor/core';
const { PushNotifications } = Plugins;

@Component({
  selector: 'app-details',
  templateUrl: './details.page.html',
  styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements OnInit {
  id = null;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.id = params.get('id');
    });
  }

  resetBadgeCount() {
    PushNotifications.removeAllDeliveredNotifications();
  }

}

Visualizza i dettagli in pages/details/details.page.html:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>Details</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  My Id from push: {{ id }}

  <ion-button (click)="resetBadgeCount()" expand="block">
    Reset Badge Count
  </ion-button>
</ion-content>

Costruisci l'applicazione, sincronizza le tue modifiche e distribuiscila sul tuo dispositivo.

ionic build
npx cap sync

Ora puoi inviare notifiche push con Firebase.

Invio di Notifiche Push con Firebase

Ci sono diversi modi per inviare notifiche push con Firebase.

Test di dispositivo specifico

Dopo aver distribuito l'applicazione su un dispositivo, puoi controllare i registri del console per vedere il token dopo la registrazione. Utilizza questo token per inviare un test di notifica mirata per confermare che la tua integrazione funziona. In Firebase, vai a Cloud Messaging e selezionare Invia messaggio di test. Aggiungi il token del dispositivo dai log.

firebase-test-push

Se tutto è configurato correttamente, dovresti vedere una notifica push sul tuo dispositivo.

Messaggio di Push con Payload

Per testare una notifica push con informazioni aggiuntive, segui il wizard sulla stessa pagina per specificare informazioni generali e selezionare la piattaforma che desideri raggiungere. Aggiungi opzioni aggiuntive per inviare un payload con la tua notifica push.

firebase-push-payload

Nella Opzioni avanzate Sezione, aggiungi Dati personalizzati coppia chiave-valore. Ad esempio, puoi utilizzare la chiave detailsId e un valore di tua scelta. Questi dati verranno utilizzati nell'app per navigare alla pagina dei dettagli con l'id specificato.

Dopo l'invio della notifica push, l'app dovrebbe riceverla e visualizzare la pagina dei dettagli con l'id specificato quando la notifica viene selezionata.

Utilizzando Firebase API

Puoi anche inviare notifiche push in modo programmatico utilizzando il Firebase API. Per farlo, devi ottenere la chiave del server dalla sezione impostazioni del tuo progetto Firebase sotto la tabella Cloud Messaging Con la chiave del server, puoi inviare una richiesta POST al Firebase __CAPGO_KEEP_0__ con il payload richiesto. Ecco un esempio utilizzando Node.js e il

With the server key, you can send a POST request to the Firebase API with the required payload. Here’s an example using Node.js and the request biblioteca:

const request = require('request');

const serverKey = 'YOUR_SERVER_KEY';
const deviceToken = 'YOUR_DEVICE_TOKEN';

const options = {
  method: 'POST',
  url: 'https://fcm.googleapis.com/fcm/send',
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'key=' + serverKey
  },
  body: JSON.stringify({
    to: deviceToken,
    notification: {
      title: 'Test Push',
      body: 'This is a test push notification with custom data'
    },
    data: {
      detailsId: '123'
    }
  })
};

request(options, (error, response, body) => {
  if (error) {
    console.error('Error sending push:', error);
  } else {
    console.log('Push sent successfully:', body);
  }
});

Sostituisci YOUR_SERVER_KEY e con la tua chiave server e token dispositivo effettua il run dello script, e il tuo dispositivo dovrebbe ricevere la notifica push con il payload personalizzato. YOUR_DEVICE_TOKEN Ecco fatto! Hai integrato con successo le notifiche push nella tua app Ionic __CAPGO_KEEP_0__ utilizzando Firebase. Ora puoi inviare notifiche push ai tuoi utenti su entrambi i piattaforme Android e iOS.

That’s it! You’ve successfully integrated push notifications in your Ionic Capacitor app using Firebase. Now you can send push notifications to your users on both Android and iOS platforms.

Ionic Capacitor Push Notifications with Firebase: A Step-by-Step Guide