Ionic Capacitor Notifiche Push con Firebase: Guida Passo dopo Passo

In this tutorial, we will integrate push notifications in an Ionic Capacitor app using Firebase. For a maintained Capacitor plugin with Firebase Cloud Messaging support, see @capgo/capacitor-firebase-messaging. Non è necessario un servizio specifico per questo, ma è necessario configurare diverse cose in anticipo. Firebase è un'ottima scelta poiché è richiesto per Android, e puoi facilmente utilizzarlo per inviare notifiche senza utilizzare il database.

First, we will create an Ionic app with Capacitor enabled and specify our package id, 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 i tuoi ID dell'applicazione. Tuttavia, se i tuoi cartelli nativi esistono già, dovrai sostituire l'ID in tutti i file in cui compare, poiché Capacitor crea il cartello una volta sola e non aggiorna l'ID stesso. Nel capacitor.config.json, puoi specificare anche opzioni come l'aggiornamento del conteggio del badge, la riproduzione del suono durante la notifica e la visualizzazione di un avviso quando una notifica arriva.

{
  "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 notifiche push fuori dall'applicazione.

Configurazione di Firebase

Inizia creando un nuovo progetto di Firebase o utilizzando uno esistente. Fornisci un nome e opzioni di default per un nuovo progetto. Se hai un nuovo app, dovresti vedere

cartelli nativi esistenti “Inizia aggiungendo Firebase all'app” nella dashboard dell'app. Altrimenti, clicca l'icona del clessidra e vai a impostazioni del progetto per aggiungere un'app.

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

Dopo il primo passo, scarica i seguenti file:

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

Configura poi le piattaforme.

Preparazione Push per Android

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

Tutto qui per Android. Ora configuriamo iOS.

Preparazione Push per iOS

Questa parte è più complicata. In primo luogo,

__CAPGO_KEEP_0__ crea un ID App per la tua app all'interno della lista degli identificatori di tuo account di sviluppatore Apple. Assicurati di selezionare la capacità di Push Notifications dalla lista da

il tuo ID App

dovrebbe essere lo stesso del tuo ID App all'interno di __CAPGO_KEEP_0__ e Firebase. Ora, should be the same as your App ID within Capacitor and Firebase.

e abilita il servizio di Push Notifications Apple (APNs) ionic-ios-push-id Il ID Bundle. Se hai raggiunto il numero massimo di chiavi, puoi utilizzare una chiave esistente o un certificato al suo posto, ma il processo è più complesso.

chiave di sviluppatore di push per iOS

Dopo aver scaricato il .p8 scarica il file, caricalo su Firebase. Apri la sezione Cloud Messaging in impostazioni del tuo progetto Firebase, caricalo e inserisci i dettagli per la chiave ID e il tuo ID di squadra da iOS.

carica su Firebase la chiave di sviluppatore di push per iOS

Ora, apporta modifiche al tuo progetto Xcode eseguendo:

npx cap open ios

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

Successivamente, 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 la nativa 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 all'interno del tuo progetto Xcode.

capacitor-xcode-capability

Ora, costruisci il tuo 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.

Invia 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 una notifica push mirata di test per confermare che la tua integrazione funziona. In Firebase, vai a Messaggi Cloud e seleziona Invia messaggio di test. Aggiungi il token del dispositivo dai registri.

firebase-test-push

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

Messaggio di push con Payload

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

firebase-push-payload

Nella Opzioni avanzate sezione, aggiungi un dati personalizzati 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 aver inviato la notifica di push, l'app dovrebbe riceverla e visualizzare la pagina dei dettagli con l'id specificato quando la notifica viene premuta.

Usando Firebase API

Puoi anche inviare notifiche push in modo programmatico utilizzando il Firebase API. Per farlo, è necessario ottenere la chiave del server dalla configurazione del tuo progetto Firebase nella sezione 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 la

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 e

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

con la tua chiave del server effettiva e il token dispositivo. Esegui lo script e il tuo dispositivo dovrebbe ricevere la notifica push con il payload personalizzato. YOUR_SERVER_KEY Ecco fatto! Hai integrato con successo le notifiche push nel tuo app Ionic __CAPGO_KEEP_0__ utilizzando Firebase. Ora puoi inviare notifiche push ai tuoi utenti su entrambi i piattaforme Android e iOS. YOUR_DEVICE_TOKEN Usando Firebase __CAPGO_KEEP_0__

Puoi anche inviare notifiche push in modo programmatico utilizzando il Firebase Capacitor. Per farlo, è necessario ottenere la

Continua con Ionic Capacitor Notifiche Push con Firebase: Una Guida Passo dopo Passo

Se stai utilizzando Ionic Capacitor Notifiche Push con Firebase: Una Guida Passo dopo Passo per pianificare la migrazione e le operazioni aziendali, connettilo con Capgo Enterprise per il workflow del prodotto in Capgo Enterprise, Ionic Enterprise Plugin Alternatives per il workflow del prodotto in Ionic Enterprise Plugin Alternatives, Capgo Alternatives per il workflow del prodotto in Capgo Alternatives, Capgo Consulting per il workflow del prodotto in Capgo Consulting, e Capgo Supporto Premium per il flusso di lavoro del prodotto in Capgo Supporto Premium.

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