如何为Web(Angular6)与Ionic4应用的FCM群组推送设置不同click_action？

你遇到的这个问题我之前帮不少开发者处理过，核心矛盾就是FCM全局的click_action字段没法同时适配Web和移动端的不同跳转需求。解决思路很简单：放弃全局统一设置click_action，改用自定义data字段为不同平台分发专属配置，具体方案如下：

1. 重构推送Payload结构 #

把通用的通知展示内容放在顶层notification字段，而Web端的跳转URL、移动端的动作配置都塞进data自定义字段里，示例Payload如下：

{
  "to": "你的用户fcm_notification_key",
  "notification": {
    "title": "新消息提醒",
    "body": "你有一条未读消息"
  },
  "data": {
    "web_click_url": "https://your-app.com/messages",
    "mobile_action": "FCM_PLUGIN_ACTIVITY",
    "mobile_target_page": "/messages" // 可选：如果需要跳转到App内特定页面
  }
}

2. Angular 6 Web端处理逻辑 #

在你的FCM服务中监听通知点击事件，读取data.web_click_url并执行跳转：

// 假设已完成FCM初始化，引入Angular平台判断工具
import { PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

// 监听通知点击
this.fcm.onNotificationClick().subscribe((payload) => {
  if (isPlatformBrowser(this.platformId)) {
    const targetUrl = payload.data.web_click_url;
    if (targetUrl) {
      // 需求是打开新页面就用window.open，单页应用内跳转用Router
      window.open(targetUrl, '_blank');
      // this.router.navigateByUrl(targetUrl);
    }
  }
});

3. Ionic 4移动端处理逻辑 #

借助Ionic的FCM插件，在通知点击回调里读取移动端专属配置，处理应用内跳转：

import { FCM } from '@ionic-native/fcm/ngx';
import { NavController } from '@ionic/angular';

constructor(private fcm: FCM, private navCtrl: NavController) {
  this.fcm.onNotification().subscribe((payload) => {
    if (payload.wasTapped) {
      // 通知被用户点击时触发
      const targetAction = payload.data.mobile_action;
      const targetPage = payload.data.mobile_target_page;
      
      if (targetAction === 'FCM_PLUGIN_ACTIVITY') {
        // 默认打开App，若有指定页面则跳转到对应路由
        targetPage && this.navCtrl.navigateRoot(targetPage);
      }
    }
  });
}

方案优势说明 #

• notification字段保留通用展示内容，确保Web和移动端的通知样式一致
• data字段完全由客户端自定义解析，FCM不会干预，避免了全局配置的冲突
• 两端各自读取对应平台的配置，互不干扰，完美适配群组推送的跨场景需求

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