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官方维护的插件,兼容性拉满,我之前踩坑后换它就搞定了。
解决步骤:
- 安装插件:
cordova plugin add cordova-plugin-device
- 在Cordova设备就绪后调用(必须等设备初始化完成,不然拿不到)
- 代码示例:
// 在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




