时间戳

首页 > 解决方案 > 如何使用 Capacitor 在 Android Native App 中获取 Angular 推送通知？

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

问题描述

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

但是相同的功能不适用于使用 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);
});

标签： angularfirebasepush-notificationprogressive-web-appscapacitor

解决方案

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

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

推荐阅读