You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

VueJS移动端APP实现FCM通知及设备ID获取问题咨询

VueJS移动端FCM通知+设备ID获取问题解决方案

嘿,我正好在Vue移动端项目里折腾过这俩问题,给你分享下实际可行的解决思路和代码,应该能帮到你~

一、基于设备ID实现FCM通知的核心逻辑

首先得明确:FCM推送的核心依赖是FCM注册令牌(Registration Token),而非硬件设备ID。如果要基于设备ID定向推送,我们需要把「硬件设备ID」和「FCM注册令牌」绑定后存储到后端,推送时通过设备ID找到对应令牌再发起通知。

实现步骤:

  • 获取设备的硬件ID(后面会讲怎么稳定拿到)
  • 获取FCM注册令牌
  • 将设备ID与令牌配对上传到后端数据库
  • 后端推送时,根据目标设备ID查询对应令牌,调用FCM API发送通知

Vue组件内代码示例:

// 前提:已安装cordova-plugin-device和cordova-plugin-firebase
export default {
  mounted() {
    // 等Cordova设备就绪后再执行
    document.addEventListener('deviceready', this.initFCMAndDeviceInfo, false);
  },
  methods: {
    async initFCMAndDeviceInfo() {
      try {
        // 1. 获取硬件设备ID
        const deviceId = window.device.uuid;
        console.log('硬件设备ID:', deviceId);

        // 2. 获取FCM注册令牌
        const fcmToken = await window.FirebasePlugin.getToken();
        console.log('FCM注册令牌:', fcmToken);

        // 3. 上传到后端关联存储
        await this.$axios.post('/api/bind-device-fcm', {
          deviceId,
          fcmToken
        });
      } catch (error) {
        console.error('初始化失败:', error);
      }
    }
  }
}

二、解决无法获取设备ID的问题

你提到用cordova-plugin-firebase拿不到设备ID很正常——这个插件主打FCM功能,获取硬件设备ID得用cordova-plugin-device,这是Cordova官方维护的插件,兼容性拉满,我之前踩坑后换它就搞定了。

解决步骤:

  1. 安装插件:
cordova plugin add cordova-plugin-device
  1. 在Cordova设备就绪后调用(必须等设备初始化完成,不然拿不到)
  2. 代码示例:
// 在Vue项目中监听Cordova初始化完成事件
document.addEventListener('deviceready', () => {
  // 获取核心设备ID
  const deviceId = window.device.uuid;
  // 还能拿到其他设备信息
  const platform = window.device.platform; // iOS/Android
  const model = window.device.model; // 比如iPhone 14

  console.log('设备ID:', deviceId);
  console.log('当前平台:', platform);
}, false);

常见排查点:

  • 执行cordova plugin list确认插件已正确安装
  • iOS端:无需额外权限,只要Cordova项目配置正常即可
  • Android端:插件会自动配置权限,无需手动修改AndroidManifest.xml

三、后端调用FCM API推送示例(Node.js)

当需要基于设备ID推送时,先从数据库找到对应FCM令牌,再调用FCM接口:

const axios = require('axios');

async function sendFCMByDeviceId(deviceId) {
  // 1. 从数据库查询设备ID对应的FCM令牌
  const [device] = await yourDb.query('SELECT fcm_token FROM devices WHERE device_id = ?', [deviceId]);
  if (!device?.fcm_token) return;

  // 2. 调用FCM API发送通知
  const serverKey = '你的FCM服务器密钥';
  await axios.post('https://fcm.googleapis.com/fcm/send', {
    to: device.fcm_token,
    notification: {
      title: '专属通知',
      body: '这是一条基于你的设备ID推送的消息'
    }
  }, {
    headers: {
      'Authorization': `key=${serverKey}`,
      'Content-Type': 'application/json'
    }
  });
}

内容的提问来源于stack exchange,提问作者sharmila

火山引擎 最新活动