如何自定义Ionic推送通知实现类似来电呼叫的展示效果

你现有代码已经完成了基础的FCM Token获取、通知监听和后台模式配置，只需要新增以下逻辑即可实现来电样式推送：

• 首先在后端推送的FCM payload中新增自定义字段区分来电通知，示例payload结构如下（安卓端要走data通道保证后台能获取到完整参数）：

{
  "to": "设备FCM Token",
  "data": {
    "type": "call",
    "caller_name": "联系人姓名",
    "call_id": "通话唯一标识",
    "landing_page": "/call-answer"
  },
  "android": {
    "priority": "high",
    "ttl": "30s"
  }
}

• 安装@ionic-native/local-notifications插件用来实现带操作按钮的自定义通知，同时提前向用户申请悬浮窗、通知、震动权限。
• 修改现有FCM通知监听逻辑，代码示例如下：

// 先导入localNotifications
import { LocalNotifications } from '@ionic-native/local-notifications/ngx';

constructor(private localNotifications: LocalNotifications) {}

// 原有platform.ready逻辑修改
this.platform.ready().then(() => {
  this.backgroundMode.enable();
  this.backgroundMode.on('activate').subscribe(() => {
    console.log('backgroundMode activate');
  });
  this.startService();
  FCM.getToken().then(token => {
    console.log(token);
    this.storage.set('DeviceId', token);  
  });

  FCM.onNotification().subscribe(data => {
    console.log(data);
    // 新增判断：如果是来电类型通知
    if(data.type === 'call') {
      if (!data.wasTapped) {
        // 前台/后台收到未点击的来电通知，弹自定义带操作按钮的通知
        this.localNotifications.schedule({
          id: 1,
          title: `来自${data.caller_name}的通话邀请`,
          text: '点击接听或挂断',
          priority: 2,
          sound: 'file://assets/call_ring.mp3',
          vibrate: [2000, 1000, 2000],
          actions: [
            { id: 'answer', title: '接听', launch: true },
            { id: 'hangup', title: '挂断', launch: false }
          ],
          foreground: true
        });
        // 监听通知按钮点击
        this.localNotifications.on('action').subscribe(notify => {
          if (notify.actionId === 'answer') {
            this.router.navigate([data.landing_page], { queryParams: { call_id: data.call_id } });
          } else if (notify.actionId === 'hangup') {
            // 调用挂断通话的接口
            this.localNotifications.clear(1);
          }
        });
      } else {
        // 用户点击通知栏直接跳转到接听页
        this.router.navigate([data.landing_page], { queryParams: { call_id: data.call_id } });
      }
    } else {
      // 普通通知走原有逻辑
      this.router.navigate([data.landing_page]);
    }
  });    

  FCM.onTokenRefresh().subscribe(token => {
    console.log(token);
    this.storage.set('DeviceId', token);
  });
  
});
this.platform.resume.subscribe((e) => {
  this.backgroundMode.enable();
});
this.authenticationService.authState.subscribe(state => {
  if (state) {
    this.router.navigate(['home']);
  } else {
    this.router.navigate(['login']);
  }
});

• 额外适配注意点：
  • 安卓端需要申请SYSTEM_ALERT_WINDOW权限，保证后台收到来电可以直接弹出通话页面
  • iOS端建议搭配VoIP推送实现，普通FCM推送的后台唤醒优先级不足，容易出现来电延迟的问题
  • 来电通知的铃声建议使用长铃声，符合通话呼叫的使用习惯

内容的提问来源于stack exchange，提问作者Sunny Jain