Comment obtenir la notification Push Angular dans l'application native Android à l'aide de Capacitor?

Question

Je suis en train de développer une application web progressive Angular, lorsque je lance l'application en utilisant ng serve, elle fonctionne bien dans les navigateurs avec les notifications en arrière-plan sur le service worker.

Mais la même fonctionnalité ne fonctionne pas avec l'application mobile qui est créée avec les outils de construction Capacitor en utilisant npx cap add android.

Mon fichier firebase-service-worker.js :

importScripts('https://www.gstatic.com/firebasejs/5.5.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/5.5.0/firebase-messaging.js');

firebase.initializeApp({
  'messagingSenderId': '65358642427'
});

const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function (payload) {

  var notificationTitle = JSON.parse(payload.notification).title;
  var notificationOptions = {
    body: JSON.parse(payload.notification).body
  };

  return self.registration.showNotification(notificationTitle, notificationOptions);
});

Answer 1

Afin de vous inscrire et de surveiller en arrière-plan les notifications push de l'application Firebase Angular, utilisez l'API de notifications push pour Capacitor dans une application Ionic + Angular.

1. Préparez votre compte Firebase et créez une application Android dans la console Firebase avec un identifiant de package, par exemple : com.example.myapp
2. Téléchargez le fichier google-services.json depuis la console Firebase et collez-le dans le répertoire racine de votre projet.
3. Créez un projet Android dans votre répertoire en utilisant capacitor : npx cap add android

Enfin, gérez l'écouteur de notifications dans le composant de votre application.

import { Component, OnInit } from '@angular/core';

import {
  Plugins,
  PushNotification,
  PushNotificationToken,
  PushNotificationActionPerformed } from '@capacitor/core';

const { PushNotifications } = Plugins;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage implements OnInit {

  ngOnInit() {
    console.log('Initialisation de la page d'accueil');

    PushNotifications.register();

    PushNotifications.addListener('registration', 
      (token: PushNotificationToken) => {
        alert('Inscription aux notifications push réussie, jeton : ' + token.value);
      }
    );

    PushNotifications.addListener('registrationError', 
      (error: any) => {
        alert('Erreur lors de l'inscription : ' + JSON.stringify(error));
      }
    );

    PushNotifications.addListener('pushNotificationReceived', 
      (notification: PushNotification) => {
        alert('Notification push reçue : ' + JSON.stringify(notification));
      }
    );

    PushNotifications.addListener('pushNotificationActionPerformed', 
      (notification: PushNotificationActionPerformed) => {
        alert('Action de notification push effectuée : ' + JSON.stringify(notification));
      }
    );
}

Note : Lorsque vous recevez une notification de Firebase, cette application ne sera pas déclenchée mais pushNotificationActionPerformed sera déclenché lorsque vous cliquez sur la notification et êtes redirigé vers l'application.

https://capacitor.ionicframework.com/docs/apis/push-notifications

Answer 2

Lorsque vous exécutez npx cap add android, vous créez un projet Android natif.

Pour les projets Android, vous devez utiliser l'implémentation push native, pas celle du web. Capacitor fournit un plugin pour cela. https://capacitor.ionicframework.com/docs/apis/push-notifications