angular - 如何使用 Capacitor 在 Android Native App 中获取 Angular 推送通知？

Question

我正在开发 Angular 渐进式 Web 应用程序，当我使用 ng serve 运行该应用程序时，它在带有服务 worker 后台通知的浏览器中运行良好。

但相同的功能不适用于使用电容器构建工具使用 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

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

1. 准备您的 Firebase 帐户并在 Firebase 控制台中使用包 ID 创建 Android 应用程序，示例包:com.example.myapp
2. 从 Firebase 控制台下载 google-services.json 文件并将其粘贴到您的项目根目录。
3. 使用电容器在您的目录中创建 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