如何使用 Capacitor 在 Android Native App 中获取 Angular Push Notification？

Question

我正在开发 Angular 渐进式 Web 应用程序，当我运行使用 ng serve 的应用程序时，它在浏览器中运行良好，并在 service worker 上提供后台通知。

但相同的功能不适用于使用 Capacitor 构建工具创建的移动应用程序 npx cap add android。

我的 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

当您执行 npx cap add android 时，您会创建一个本机 Android 项目。

对于 Android 项目，您必须使用本机推送实现，而不是网络推送实现，Capacitor 为其提供了一个插件。 https://capacitor.ionicframework.com/docs/apis/push-notifications

Answer 2

为了在后台注册和监控来自 Firebase Angular APP 的推送通知，请在 Ionic + Angular 应用程序中为 Capacitor 使用推送通知 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 的通知时，不会触发此应用程序，但当您点击通知并重定向到 APP 时会触发 pushNotificationActionPerformed。

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

如何使用 Capacitor 在 Android Native App 中获取 Angular Push Notification？

How to get Angular Push Notification in Android Native App using Capacitor?

push-notification

firebase

progressive-web-apps

angular

capacitor