Angular 如何使用电容器在Android原生应用程序中获得角度推送通知？

我正在开发Angular progressive web应用程序，当我使用

ng serve

运行该应用程序时，它在浏览器中运行良好，并在service worker上显示后台通知

但同样的功能不适用于使用npx cap add android的电容器构建工具创建的移动应用程序

我的firebase-service-worker.js文件：

---

当您执行npx cap add android时，您将创建一个本地android项目

---

对于Android项目，您必须使用本机推送实现，而不是web实现，Capactor为其提供了一个插件

为了在后台注册和监控Firebase Angular APP的推送通知，请在Ionic+Angular应用程序中使用电容器的推送通知API

准备您的Firebase帐户，并在Firebase控制台中使用包ID创建Android应用程序，示例包：

com.example.myapp

从Firebase控制台下载

google services.json

文件，并将其粘贴到项目根目录

使用以下命令在目录中创建Android项目：

npx cap add Android

最后，在应用程序组件中处理通知侦听器

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('Initializing HomePage');

    PushNotifications.register();

    PushNotifications.addListener('registration', 
      (token: PushNotificationToken) => {
        alert('Push registration success, token: ' + token.value);
      }
    );

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

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

    PushNotifications.addListener('pushNotificationActionPerformed', 
      (notification: PushNotificationActionPerformed) => {
        alert('Push action performed: ' + JSON.stringify(notification));
      }
    );
}

注意：当您收到来自Firebase的通知时，不会触发此应用程序，但当您单击通知并重定向到应用程序时，

PushNotificationActionExecuted

将触发

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('Initializing HomePage');

    PushNotifications.register();

    PushNotifications.addListener('registration', 
      (token: PushNotificationToken) => {
        alert('Push registration success, token: ' + token.value);
      }
    );

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

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

    PushNotifications.addListener('pushNotificationActionPerformed', 
      (notification: PushNotificationActionPerformed) => {
        alert('Push action performed: ' + JSON.stringify(notification));
      }
    );
}