vue-cordova项目中cordova-fcm-plugin-with-dependecy-updated的onNotification放置位置问题

数据老陈

2026-9-26

直接在main.js根层级执行代码会白屏的核心原因是：Cordova插件需要等待设备初始化完成（即deviceready事件触发）后，FCM、cordova这类全局对象才会被挂载到window上，提前调用会抛出未定义错误，导致应用初始化中断出现白屏。

正确处理方案

所有调用Cordova插件的逻辑都需要包裹在deviceready事件回调内，你可以直接在main.js中按如下方式修改代码：

// main.js 中添加，不要直接顶层调用FCM方法
document.addEventListener('deviceready', () => {
  // 先判断插件是否已加载完成，避免调试环境报错
  if (window.FCM && window.cordova?.plugins?.notification?.badge) {
    FCM.onNotification((data) => {
      cordova.plugins.notification.badge.increase();
      if (data.wasTapped) {
        // 通知在系统托盘被用户点击触发
        alert(JSON.stringify(data));
        // 此处可添加自定义逻辑，比如跳转到对应消息详情页
      } else {
        // 应用在前台运行时收到通知
        alert(JSON.stringify(data));
      }
    });
  }
}, false);

注意事项

必须确保你已经安装了所有依赖的插件：
- 推送核心插件：cordova-fcm-plugin-with-dependecy-updated
- 角标插件：cordova-plugin-badge
  少装任意一个插件都会导致对应对象调用时报错。
如果你的项目用了Vue Cordova相关封装，也可以将该逻辑放在根组件的mounted钩子中，但仍然需要套上deviceready事件监听，避免Vue组件渲染完成时Cordova还未初始化完成。
应用后台/被杀死场景的兼容：该注册方式可以覆盖所有场景的通知回调，哪怕应用完全被关闭后点击推送启动，插件也会将通知事件缓存到deviceready触发后再执行你的回调逻辑。