react如何实现手机通知

使用浏览器通知 API

React 可以通过浏览器的 Notification API 实现通知功能。该 API 允许网页在获得用户授权后发送桌面或移动设备通知。

示例代码：

import React, { useEffect } from 'react';

const NotificationComponent = () => {
  useEffect(() => {
    if ('Notification' in window) {
      Notification.requestPermission().then(permission => {
        if (permission === 'granted') {
          new Notification('Hello!', {
            body: 'This is a notification from React.',
            icon: '/path/to/icon.png'
          });
        }
      });
    }
  }, []);

  return <div>Check notification permission</div>;
};

export default NotificationComponent;

注意事项：

• 通知仅在 HTTPS 或本地开发环境（localhost）生效。
• 需要用户主动授权，通常建议在用户交互（如按钮点击）后触发请求。

使用第三方推送服务（如 Firebase Cloud Messaging）

对于移动端推送（包括锁屏通知），可以通过 Firebase Cloud Messaging (FCM) 实现。

实现步骤：

1. 注册 Firebase 项目：在 Firebase 控制台 创建项目并配置 Web 应用。
2. 安装 Firebase SDK：

   npm install firebase

3. 初始化 FCM 并请求权限：

   
   import { initializeApp } from 'firebase/app';
   import { getMessaging, getToken, onMessage } 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));

// 监听前台消息 onMessage(messaging, payload => { console.log('Message received:', payload); new Notification(payload.notification.title, { body: payload.notification.body }); });

4. 后端集成：通过 Firebase Admin SDK 或 REST API 发送推送消息。  

---

### 使用 Service Worker 实现离线通知  
通过 Service Worker 可以在应用关闭时仍接收推送通知。  

示例 Service Worker 代码（`firebase-messaging-sw.js`）：  
```javascript
importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js');

firebase.initializeApp({
  apiKey: "YOUR_API_KEY",
  projectId: "YOUR_PROJECT_ID",
  messagingSenderId: "YOUR_SENDER_ID"
});

const messaging = firebase.messaging();

messaging.onBackgroundMessage(payload => {
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/icon.png'
  };
  self.registration.showNotification(notificationTitle, notificationOptions);
});

其他方案（如 OneSignal）

第三方服务如 OneSignal 提供更简化的集成：

1. 注册 OneSignal 并获取 App ID。
2. 安装 SDK：

   npm install onesignal

3. 初始化：

   
   import OneSignal from 'onesignal';

OneSignal.init({ appId: "YOUR_APP_ID", allowLocalhostAsSecureOrigin: true });

---

### 关键注意事项  
- 用户授权：所有通知需用户明确授权。  
- 移动端限制：iOS 浏览器对推送通知的支持有限，建议使用 FCM 或原生应用方案。  
- HTTPS 要求：大多数推送服务要求部署在 HTTPS 环境。