NativeScript-Vue如何实现FCM后台推送及通知点击消息获取

你现有代码存在三个核心问题：Firebase相关API调用未等待初始化完成、onBackgroundMessage未绑定处理逻辑、缺失权限申请和通知点击监听逻辑，按以下步骤修改即可实现需求。

1. 修正初始化逻辑 #

所有Firebase Messaging相关的调用，必须放到firebase().initializeApp()的成功回调内执行，避免未初始化就调用API抛出异常。

2. 补全必要功能调用 #

需要补充以下几个核心API的实现：

• 通知权限申请：安卓13及以上版本、iOS系统必须主动申请通知权限，否则后台不会弹出推送提醒，调用messaging().requestPermission()即可完成申请
• 后台消息处理回调：给onBackgroundMessage传入异步处理函数，该函数会在app处于后台、收到FCM消息时触发，注意不要在该回调内执行耗时过长的逻辑
• 通知点击监听：调用onNotificationTap注册监听，用户点击通知栏的FCM推送时就会触发该回调，你可以在回调内打印、处理接收到的完整消息内容
• （可选）前台通知配置：默认app在前台时收到FCM消息不会弹出系统通知，如果需要前台也弹出提醒，可以开启前台通知展示配置

注意：如果你发送的是纯data字段的无通知载荷消息，后台状态下系统不会自动弹出通知栏提醒，需要你在onBackgroundMessage回调中手动调用本地通知API构造推送；如果消息携带标准notification字段，系统会自动完成通知展示，无需额外处理。

修正后完整app.js代码 #

import Vue from 'nativescript-vue'
import Home from './components/Home'
import { firebase } from '@nativescript/firebase-core'
import '@nativescript/firebase-auth';
import '@nativescript/firebase-storage';
import '@nativescript/firebase-messaging';

new Vue({
  render: h => h('frame', [h(Home)])
}).$start()

firebase().initializeApp().then(async fbApp => {
  console.log("Firebase app initialized!", fbApp.name)

  // 通知权限申请
  const hasPermission = await firebase().messaging().requestPermission();
  if (!hasPermission) {
    console.log("用户拒绝了通知权限，后台无法收到推送提醒");
  }

  // 原有Auth状态监听逻辑保留
  firebase().auth().addAuthStateChangeListener(async (user) => {
    console.log('user : '+user);
    if (!user) {
      console.log("firebase.auth done");
    } else {
      console.log("firebase.auth else done");
    }
  })

  // 原有获取设备Token逻辑移到初始化完成后执行
  firebase().messaging()
    .getToken()
    .then(token => {
      console.log("FCM设备Token：", token);
    });

  // 原有前台消息监听逻辑保留
  firebase().messaging().onMessage(async remoteMessage => {
    console.log('前台收到FCM消息：'+JSON.stringify(remoteMessage));
  });

  // 补全后台消息监听回调
  firebase().messaging().onBackgroundMessage(async remoteMessage => {
    console.log('后台收到FCM消息：'+JSON.stringify(remoteMessage));
    // 纯data无notification字段的消息，需要在这里手动调用本地通知API弹出提醒
    return Promise.resolve();
  });

  // 新增通知点击监听，用户点击通知栏推送时触发
  firebase().messaging().onNotificationTap(remoteMessage => {
    console.log('用户点击了通知，完整消息内容：', JSON.stringify(remoteMessage));
    // 可在此处添加页面跳转等自定义业务逻辑
  })
})

内容的提问来源于stack exchange，提问作者Seoho.An