Vue实现手机推送

Vue 中实现手机推送的方法

在 Vue 项目中实现手机推送功能，通常需要结合第三方推送服务（如 Firebase Cloud Messaging、极光推送等）或原生移动端能力（通过 Cordova/Capacitor 封装）。以下是几种常见实现方式：

使用 Firebase Cloud Messaging (FCM)

FCM 是谷歌提供的跨平台消息推送服务，适合 Vue 与移动端（Android/iOS）集成。

初始化 Firebase 在 public/index.html 中引入 Firebase SDK：

<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js"></script>

配置 Firebase 在 Vue 项目中创建 firebase.js 配置文件：

import { initializeApp } from 'firebase/app';
import { getMessaging, getToken } from 'firebase/messaging';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  projectId: 'YOUR_PROJECT_ID',
  messagingSenderId: 'YOUR_SENDER_ID',
  appId: 'YOUR_APP_ID'
};

const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

// 获取设备令牌
getToken(messaging, { vapidKey: 'YOUR_VAPID_KEY' })
  .then((token) => console.log('Device token:', token))
  .catch((err) => console.error('Token error:', err));

处理推送消息 在 src/App.vue 中监听推送：

import { onMessage } from 'firebase/messaging';

onMessage(messaging, (payload) => {
  console.log('Message received:', payload);
  // 显示通知
  new Notification(payload.notification.title, {
    body: payload.notification.body
  });
});

通过 Cordova/Capacitor 插件实现

适用于混合应用开发，通过插件调用原生推送能力。

安装 Cordova 插件

cordova plugin add cordova-plugin-firebasex

在 Vue 中调用插件

// 监听推送
document.addEventListener('deviceready', () => {
  FirebasePlugin.onMessageReceived((payload) => {
    console.log('Push data:', payload);
  });
});

使用极光推送（JPush）

适合国内项目，需在移动端集成 SDK。

配置极光推送

1. 在原生项目中集成 JPush SDK（Android/iOS）。
2. 通过 window.JPush 调用方法：

   // 注册推送
   window.JPush.init();
   window.JPush.getRegistrationID((id) => {
   console.log('Registration ID:', id);
   });

注意事项

• 权限申请：浏览器端需用户授权通知权限，移动端需配置原生权限。
• 服务端集成：推送需通过服务端调用 API（如 FCM 的 Admin SDK）。
• 离线支持：移动端需配置后台服务处理离线消息。

根据项目需求选择方案：纯 Web 应用推荐 FCM，混合应用推荐 Cordova/Capacitor 插件，国内项目可考虑极光推送。