Notifiche push Ionic Capacitor con Firebase: guida passo passo

In questo tutorial integreremo le notifiche push in un'app Ionic Capacitor usando Firebase. Per un plugin Capacitor mantenuto con supporto a Firebase Cloud Messaging, vedi @capgo/capacitor-firebase-messaging. Non serve un servizio specifico, ma è necessario configurare alcune cose in anticipo. Firebase è un'ottima scelta perché è richiesto per Android e permette di inviare notifiche facilmente senza usare il database.

Per prima cosa, creeremo un'app Ionic con Capacitor abilitato e specificheremo il nostro ID del pacchetto, che è l'identificativo univoco della tua app. Successivamente, build della app e aggiunta delle 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 hai già un'app, puoi modificare il capacitor.config.json per includere il tuo appId. Tuttavia, se le cartelle native esistono già, dovrai sostituire l'id in tutti i file in cui compare, poiché Capacitor crea la cartella solo una volta e non aggiorna l'id stesso. Nel capacitor.config.json, puoi anche specificare opzioni come aggiornare il badge count, riprodurre un suono alla ricezione di una push e mostrare un alert 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": {}
}

Ora configuriamo le push notification fuori dall'app.

Configurazione Firebase

Inizia creando un nuovo progetto Firebase o usandone uno già esistente. Inserisci un nome e le opzioni predefinite per un nuovo progetto.

Se hai una nuova app, dovresti vedere “Inizia aggiungendo Firebase alla tua app” nella dashboard della tua app. Altrimenti, clicca sull'icona dell'ingranaggio e vai su impostazioni del progetto per aggiungere un'app.

La finestra di dialogo per iOS e Android è simile; l'importante è usare il tuo ID del pacchetto per le app.

Dopo il primo passaggio, scarica i seguenti file:

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

Ora configura le piattaforme.

Preparazione Push per Android

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

Fatto per Android. Ora configuriamo iOS.

Preparazione Push per iOS

Questa parte è più complessa. Per prima cosa, crea un App ID per la tua app nell'elenco degli identifier del tuo account Apple Developer. Assicurati di selezionare la capability Push Notifications dall'elenco.

ionic-ios-push-id

Il Bundle ID deve coincidere con l'App ID in Capacitor e Firebase.

Ora, crea una chiave e abilita l' Apple Push Notifications service (APNs). Se hai raggiunto il numero massimo di chiavi, puoi usare una chiave esistente o un certificato, ma il processo è più complesso.

ios-developer-push-key

Dopo aver scaricato il file .p8 , caricalo su Firebase. Apri Cloud Messaging nella scheda delle impostazioni del tuo progetto Firebase, carica il file e inserisci i dettagli del Key ID e del tuo Team ID da iOS.

firebase-upload-ios-key

Ora, apporta le modifiche al tuo progetto Xcode eseguendo:

npx cap open ios

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

Poi aggiungi un nuovo Pod per la dipendenza Firebase nel ios/App/Podfile:

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

Aggiorna la piattaforma nativa con questo comando:

npx cap update ios

Modifica il code Swift nativo in ios/App/App/AppDelegate.swift per registrarti su Firebase e restituire il token corretto alla tua 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 Capability per le Push Notifications nel tuo progetto Xcode.

capacitor-xcode-capability

Ora, builda la tua app e integra le push notifications.

Integrazione Push Notification in Ionic

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

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

Aggiorna il 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 service per gestire le push notifications 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}`);
        }
      }
    );
  }
}

Chiama il 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 nella 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>

Builda l'app, sincronizza le modifiche e fai il deploy sul tuo dispositivo.

ionic build
npx cap sync

Ora puoi inviare notifiche push con Firebase.

Inviare notifiche push con Firebase

Esistono diversi modi per inviare notifiche push con Firebase.

Test su dispositivo specifico

Dopo aver distribuito l'app su un dispositivo, puoi controllare i log della console per vedere il token dopo la registrazione. Usa questo token per inviare una notifica di test mirata e confermare che l'integrazione funzioni. In Firebase, vai su Cloud Messaging e seleziona Invia messaggio di test. Aggiungi il token del dispositivo dai log.

firebase-test-push

Se tutto è configurato correttamente, dovresti ricevere la notifica push sul tuo dispositivo.

Messaggio push con payload

Per testare una push notification con informazioni aggiuntive, segui la procedura guidata nella stessa pagina per specificare i dati generali e selezionare la piattaforma di destinazione. Aggiungi opzioni aggiuntive per inviare un payload con la tua push notification.

firebase-push-payload

Nel Opzioni avanzate sezione, aggiungi una Dati personalizzati coppia chiave-valore. Ad esempio, puoi usare la chiave detailsId e un valore a tua scelta. Questi dati verranno usati nell'app per navigare alla pagina dei dettagli con l'id specificato.

Dopo aver inviato la push notification, la tua app dovrebbe riceverla e mostrare la pagina dei dettagli con l'id specificato quando si tocca la notifica.

Usando Firebase API

Puoi anche inviare push notification in modo programmatico tramite Firebase API. Per farlo, devi ottenere la Chiave del server dalle impostazioni del tuo progetto Firebase sotto Cloud Messaging scheda.

Con la server key, puoi inviare una richiesta POST all'endpoint Firebase API con il payload richiesto. Ecco un esempio usando Node.js e la request libreria:

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 YOUR_DEVICE_TOKEN con la tua server key e il device token. Esegui lo script e il tuo dispositivo riceverà la notifica push con il payload personalizzato.

Fatto! Hai integrato con successo le notifiche push nella tua app Ionic Capacitor usando Firebase. Ora puoi inviare notifiche push ai tuoi utenti sia su Android che su iOS.

Continua con le notifiche push di Ionic Capacitor con Firebase: guida passo passo

Se stai usando Notifiche push Ionic Capacitor con Firebase: guida passo passo per pianificare la migrazione e le operazioni enterprise, collegalo a Capgo Enterprise per il workflow del prodotto in Capgo Enterprise, Alternative ai plugin Ionic Enterprise per il workflow del prodotto nelle alternative ai plugin Ionic Enterprise, Alternative a Capgo per il workflow del prodotto in Capgo Alternatives, Consulenza Capgo per il workflow di prodotto in Capgo Consulting, e Supporto Premium Capgo per il workflow di prodotto in Capgo Premium Support.