Ionic 6集成Azure通知服务求助：旧示例无法使用

一、替换废弃插件，安装当前维护的依赖 #

由于旧的PhoneGap推送插件已停止维护，我们使用目前活跃维护的@havesource/cordova-plugin-push及其Ionic Native包装器：

• 卸载旧插件（若已安装）：

  cordova plugin remove phonegap-plugin-push
  

• 安装新推送插件：

  npm install @havesource/cordova-plugin-push
  

• 安装Ionic Native适配层：

  npm install @awesome-cordova-plugins/push
  

二、Azure通知中心前置配置 #

1. Android端：在Azure通知中心配置Firebase FCM服务器密钥（从Firebase控制台获取）
2. iOS端：上传APNs证书到Azure通知中心，确保Xcode项目已开启推送通知权限

三、Ionic 6 代码实现示例 #

1. 封装推送通知服务（push-notification.service.ts） #

import { Injectable } from '@angular/core';
import { Push, PushObject, PushOptions } from '@awesome-cordova-plugins/push/ngx';
import { Platform } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class PushNotificationService {
  private pushInstance: PushObject | null = null;

  constructor(private push: Push, private platform: Platform) {}

  async initPush(): Promise<void> {
    await this.platform.ready();

    const pushOptions: PushOptions = {
      android: {
        senderID: '你的Firebase Sender ID',
        icon: 'notification_icon', // 需在android/res/drawable下放置对应图标
        iconColor: '#2563eb'
      },
      ios: {
        alert: 'true',
        badge: 'true',
        sound: 'true'
      }
    };

    this.pushInstance = this.push.init(pushOptions);

    // 监听设备令牌获取事件
    this.pushInstance.on('registration').subscribe(async (data: any) => {
      console.log('设备令牌:', data.registrationId);
      // 调用后端接口将令牌注册到Azure通知中心
      await this.registerTokenToAzure(data.registrationId);
    });

    // 监听推送通知接收事件
    this.pushInstance.on('notification').subscribe((notification: any) => {
      console.log('收到推送:', notification);
      // 根据应用状态处理通知
      if (notification.additionalData.foreground) {
        // 应用前台时弹出提示
        alert(`新通知：${notification.message}`);
      } else {
        // 应用后台/关闭时，处理点击通知后的逻辑（如跳转页面）
        if (notification.additionalData.targetPage) {
          // 示例：导航到指定页面
          // this.navCtrl.navigateForward(notification.additionalData.targetPage);
        }
      }
    });

    // 监听注册错误
    this.pushInstance.on('error').subscribe((error: any) => {
      console.error('推送注册失败:', error);
    });
  }

  private async registerTokenToAzure(deviceToken: string): Promise<void> {
    // 注意：必须通过后端完成Azure注册，避免前端泄露Azure连接字符串
    // 以下为伪代码，替换为你的后端接口
    // const res = await fetch('/api/azure/register-device', {
    //   method: 'POST',
    //   body: JSON.stringify({
    //     token: deviceToken,
    //     platform: this.platform.is('android') ? 'android' : 'ios'
    //   }),
    //   headers: { 'Content-Type': 'application/json' }
    // });
    // const result = await res.json();
    // console.log('Azure注册结果:', result);
  }

  // 注销推送服务
  async unregisterPush(): Promise<void> {
    if (this.pushInstance) {
      await this.pushInstance.unregister();
      this.pushInstance = null;
    }
  }
}

2. 在App组件中初始化推送 #

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { PushNotificationService } from './services/push-notification.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private pushService: PushNotificationService
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(async () => {
      // 初始化推送通知
      await this.pushService.initPush();
    });
  }
}

四、平台额外配置 #

• Android：确保google-services.json已放置在android/app目录，且build.gradle已配置Firebase依赖
• iOS：在info.plist中添加权限描述：

  <key>NSNotificationAlertUsageDescription</key>
  <string>需要推送权限接收重要消息</string>
  <key>NSBadgeUsageDescription</key>
  <string>需要徽章权限显示未读消息数量</string>
  <key>NSSoundUsageDescription</key>
  <string>需要声音权限提醒您收到新消息</string>
  

五、后端注册逻辑示例（Node.js） #

使用Azure官方SDK完成设备令牌注册：

const { NotificationHubsClient } = require('@azure/notification-hubs');

const azureConnStr = '你的Azure通知中心连接字符串';
const hubName = '你的通知中心名称';

async function registerDevice(deviceToken, platform) {
  const client = new NotificationHubsClient(azureConnStr, hubName);
  const registrationId = await client.createRegistrationId();

  if (platform === 'android') {
    await client.createOrUpdateFcmRegistration(registrationId, deviceToken);
  } else if (platform === 'ios') {
    await client.createOrUpdateApnsRegistration(registrationId, deviceToken);
  }
  return registrationId;
}

内容的提问来源于stack exchange，提问作者Dave Lyons