咨询Ionic 3 + Firebase实现跨平台用户间通知的最优简便方案

刚好我之前在Ionic 3项目里折腾过类似的跨平台用户通知功能，结合你用的Firebase Auth和Database，其实用Firebase Cloud Messaging（FCM）+ 云函数是最省心且适配双平台的方案，不用自己搭复杂的推送服务。下面给你一步步拆解实现细节，都是实际项目验证过的：

要给特定用户发通知，首先得把每个用户的设备FCM令牌和UID绑定存在数据库里，触发事件（比如加好友、发新帖）时，通过云函数取出目标用户的令牌，调用FCM发送推送。

1. 配置Ionic项目的FCM环境 #

首先安装适配Ionic3的FCM插件，注意版本要对应（Ionic3配@ionic-native 4.x版本）：

ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated
npm install @ionic-native/fcm@4

然后在app.module.ts里导入FCM模块，添加到providers数组中，确保全局可调用。

2. 存储用户设备令牌到Firebase Database #

用户通过Firebase Auth登录成功后，获取当前设备的FCM令牌，把它和用户UID关联存在数据库里。推荐节点结构为/userTokens/{uid}，如果用户有多台设备，可以存令牌数组（示例里先做单设备覆盖）：

import { FCM } from '@ionic-native/fcm';
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';

constructor(
  private fcm: FCM,
  private afDb: AngularFireDatabase,
  private afAuth: AngularFireAuth
) {}

// 登录成功后调用此方法
saveUserToken() {
  // 获取当前设备FCM令牌
  this.fcm.getToken().then(token => {
    const userId = this.afAuth.auth.currentUser.uid;
    // 将令牌存入数据库，覆盖旧令牌（多设备可改用push存数组）
    this.afDb.object(`userTokens/${userId}`).set(token);
  }).catch(err => {
    console.error('获取FCM令牌失败:', err);
  });

  // 监听令牌刷新，自动更新数据库
  this.fcm.onTokenRefresh().subscribe(newToken => {
    const userId = this.afAuth.auth.currentUser.uid;
    this.afDb.object(`userTokens/${userId}`).set(newToken);
  });
}

3. 触发通知：用Firebase云函数发送推送（推荐） #

绝对不推荐前端直接发推送，会暴露Firebase服务密钥，有安全风险。用云函数托管推送逻辑，既安全又能和Firebase生态无缝联动。

步骤3.1 编写云函数 #

初始化Firebase云函数后，在index.js里写一个可调用的云函数，比如处理好友请求通知：

const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();

// 云函数：发送好友请求通知
exports.sendFriendRequestNotification = functions.https.onCall(async (data, context) => {
  // 验证调用者已登录
  if (!context.auth) {
    throw new functions.https.HttpsError('unauthenticated', '请先登录');
  }

  const targetUid = data.targetUid;
  const senderName = data.senderName;
  const senderUid = context.auth.uid;

  // 从数据库获取目标用户的FCM令牌
  const tokenSnapshot = await admin.database().ref(`/userTokens/${targetUid}`).once('value');
  const targetToken = tokenSnapshot.val();

  if (!targetToken) {
    throw new functions.https.HttpsError('not-found', '目标用户未开启推送权限');
  }

  // 构建FCM推送内容
  const payload = {
    notification: {
      title: '新的好友请求',
      body: `${senderName} 添加你为好友`,
      click_action: 'FCM_PLUGIN_ACTIVITY' // 点击通知打开App
    },
    data: {
      type: 'friend_request',
      senderUid: senderUid
      // 可添加自定义参数，比如跳转页面的ID
    }
  };

  // 发送推送
  await admin.messaging().sendToDevice(targetToken, payload);
  return { success: true };
});

步骤3.2 前端调用云函数 #

用户点击“添加好友”按钮时，调用上面的云函数：

import { AngularFireFunctions } from 'angularfire2/functions';

constructor(private fns: AngularFireFunctions) {}

// 点击添加好友按钮触发
sendFriendRequest(targetUid: string, senderName: string) {
  const callable = this.fns.httpsCallable('sendFriendRequestNotification');
  callable({ targetUid, senderName })
    .subscribe(result => {
      console.log('通知发送成功:', result);
    }, err => {
      console.error('发送通知失败:', err);
    });
}

4. 处理通知点击跳转 #

在app.component.ts里监听FCM通知事件，根据通知类型跳转到对应页面：

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

constructor(private fcm: FCM, private navCtrl: NavController) {
  this.initializeApp();
}

initializeApp() {
  // 监听通知事件
  this.fcm.onNotification().subscribe(data => {
    if (data.wasTapped) {
      // App后台时点击通知
      console.log('后台点击通知:', data);
      // 根据通知类型跳转页面
      switch(data.type) {
        case 'friend_request':
          this.navCtrl.push('FriendRequestsPage', { senderUid: data.senderUid });
          break;
        case 'new_post':
          this.navCtrl.push('PostDetailPage', { postId: data.postId });
          break;
      }
    } else {
      // App前台时收到通知，可弹出提示
      console.log('前台收到通知:', data);
    }
  });
}

5. 双平台适配注意事项 #

• iOS：需要在Apple Developer后台生成APNs证书，上传到Firebase控制台的「项目设置-Cloud Messaging」里。同时在config.xml添加推送权限说明：

<platform name="ios">
  <config-file parent="NSNotificationsUsageDescription" platform="ios" target="*-Info.plist">
    <string>我们需要推送通知来提醒你新的消息和动态</string>
  </config-file>
</platform>

• Android：Firebase控制台会生成google-services.json，把它放在项目的android/app目录下，Ionic打包时会自动配置，不用手动修改AndroidManifest。

为什么这是最优方案？ #

• 完全基于Firebase生态，不用额外搭建推送服务器，维护成本极低。
• 插件cordova-plugin-fcm-with-dependecy-updated专门适配Ionic3，双平台兼容性稳定。
• 云函数处理推送逻辑，避免前端暴露敏感密钥，安全性更高，还能实现数据库实时触发（比如新帖子发布时自动发通知）。
• 通知跳转逻辑统一，双平台不用写两套原生代码，符合Ionic跨平台的理念。

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