Ionic Capacitor Notifiche Push con Firebase: Una 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@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-firebase-messaging.

Capacitor push ionic In primo luogo, creeremo un'app __CAPGO_KEEP_0__ Ionic con __CAPGO_KEEP_0__ abilitato e specificeremo il nostropackage id

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

che è l'identificatore univoco per la tua app. Poi, costruiremo l'app e aggiungeremo le piattaforme native. capacitor.config.json __CAPGO_KEEP_0__.config.json per includere il tuo. However, if your native folders already exist, you will need to replace the id in all files where it appears, as Capacitor only creates the folder once and non aggiornerà l'id stesso. Nel capacitor.config.json, puoi anche specificare opzioni come aggiornare il conteggio del badge, riprodurre un suono sul 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": {}
}

Ora, configuriamo le notifiche push al di fuori dell'app.

Configurazione Firebase

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

“Inizia con l'aggiunta di Firebase all'app” nel pannello di controllo dell'app. Altrimenti, clicca l'icona del clessidra e vai a in your app’s dashboard. Otherwise, click the gear icon and go to impostazioni del progetto per aggiungere un'app.

Il dialogo per iOS e Android è simile, e l'importante è utilizzare il tuo ID del pacchetto per le app.

configurazione dell'app Firebase per iOS

Dopo il primo passo, scarica i seguenti file:

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

Configura quindi le piattaforme.

Preparazione Push per Android

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

Tutto qui per Android. Ora configuriamo iOS.

Preparazione Push per iOS

Questa parte è più complessa. In primo luogo, crea un ID App per il tuo app all'interno della lista degli identificatori

del tuo account di sviluppatore Apple. Assicurati di __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ seleziona la capacità di Push Notifications dalla lista.

ionic-ios-push-id

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

Ora, crea una chiave e abilita il servizio di Push Notifications 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

Seleziona la capacità di Push Notifications

After scaricare il .p8 caricare il file su Firebase. Aprire la sezione Cloud Messaging su impostazioni del progetto Firebase, caricare il file e inserire i dettagli per la chiave ID e il tuo ID di team da iOS.

firebase-upload-ios-key

Ora, apportare modifiche al tuo progetto Xcode eseguendo:

npx cap open ios

copiare il file GoogleService-Info.plist scaricato da Firebase nel tuo progetto iOS. Trascinare il file all'interno del progetto Xcode all'interno della cartella app/app, e selezionare Copy items if needed.

Infine, aggiungere 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 questo comando:

npx cap update ios

Modifica il file Swift code in ios/App/App/AppDelegate.swift per registrare 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();
    });
  }
}

Gestire 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'app, 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

C'è più di un modo per inviare notifiche push con Firebase.

Test di Dispositivo Specifico

Dopo aver distribuito il tuo'app sul dispositivo, puoi controllare i registri del console per vedere il token dopo la registrazione. Utilizza questo token per inviare una notifica push mirata per confermare che la tua integrazione funziona. In Firebase, vai a Cloud Messaging e seleziona Inviare messaggio di prova. Aggiungi il token del dispositivo dai registri.

firebase-test-push

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

Notifica 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 sezione Opzioni avanzate 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 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 il Chiave del server dalla sezione Impostazioni del tuo progetto Firebase sotto la scheda Cloud Messaging tabella.

Con la chiave del server, puoi inviare una richiesta POST al Firebase API con il payload richiesto. Ecco un esempio utilizzando Node.js e la 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 YOUR_DEVICE_TOKEN contexto: Pagina/Area: Sito web di marketing Capgo. Ruolo: Etichetta breve o elemento di navigazione. Visualizzato in: pagina trust.astro. Chiave del messaggio `e` (E).

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.

È tutto! Hai integrato correttamente le notifiche push nel tuo app Ionic Capacitor utilizzando Firebase. Ora puoi inviare notifiche push ai tuoi utenti su entrambi i piattaforme Android e iOS.

Continua da qui: Integrazione delle notifiche push di Ionic __CAPGO_KEEP_0__ con Firebase: Una Guida Passo dopo Passo se stai utilizzando Ionic Capacitor Notifiche Push con Firebase: Guida Passo dopo Passo per pianificare la migrazione e le operazioni aziendali, connettilo con Capgo Azienda per il workflow del prodotto in Capgo Azienda Alternative per il plugin di Ionic Azienda per il workflow del prodotto in Alternative per il plugin di Ionic Azienda Capgo Alternative per il workflow del prodotto in Capgo Alternative Capgo Consulenza per il workflow del prodotto in Capgo Consulenza, e Capgo Supporto Premium per il workflow del prodotto in Capgo Supporto Premium

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