基于Google‘s FCM实现消息推送

2024-07-10 09:41| 来源: 网络整理| 查看: 265

当然，下面是一个简单的示例，演示了如何使用 Service Worker 和 Google's Firebase Cloud Messaging（FCM）来实现 Web 推送通知。

1. HTML 文件（index.html） FCM Push Notification Example Welcome to FCM Push Notification Example 2. 主 JavaScript 文件（main.js） // Initialize Firebase firebase.initializeApp({ apiKey: "your-api-key", authDomain: "your-auth-domain", projectId: "your-project-id", messagingSenderId: "your-messaging-sender-id", appId: "your-app-id" }); const messaging = firebase.messaging(); // Request permission and get token Notification.requestPermission().then((permission) => { if (permission === 'granted') { messaging.getToken().then((currentToken) => { if (currentToken) { console.log('Token:', currentToken); // Send this token to your server } else { console.log('No registration token available. Request permission to generate one.'); } }).catch((err) => { console.log('An error occurred while retrieving token. ', err); }); } }); // Handle incoming messages messaging.onMessage((payload) => { console.log('Message received:', payload); // Customize notification here const notificationTitle = payload.notification.title; const notificationOptions = { body: payload.notification.body, icon: payload.notification.icon }; new Notification(notificationTitle, notificationOptions); }); 3. Service Worker 文件（firebase-messaging-sw.js） // Import and configure the Firebase SDK importScripts('https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js'); importScripts('https://www.gstatic.com/firebasejs/8.0.0/firebase-messaging.js'); firebase.initializeApp({ apiKey: "your-api-key", authDomain: "your-auth-domain", projectId: "your-project-id", messagingSenderId: "your-messaging-sender-id", appId: "your-app-id" }); const messaging = firebase.messaging(); // Handle background messages messaging.onBackgroundMessage((payload) => { console.log('Received background message:', payload); const notificationTitle = payload.notification.title; const notificationOptions = { body: payload.notification.body, icon: payload.notification.icon }; self.registration.showNotification(notificationTitle, notificationOptions); }); // Handle notification click self.addEventListener('notificationclick', (event) => { event.notification.close(); event.waitUntil( clients.openWindow('https://fbspider.com') ); });

4. 在服务器端发送推送

使用 cURL 或其他 HTTP 客户端发送一个 POST 请求：

curl -X POST "https://fcm.googleapis.com/fcm/send" \ -H "Authorization: key=your-server-key" \ -H "Content-Type: application/json" \ -d '{ "to": "client-token", "notification": { "title": "Your Title", "body": "Your Body", "icon": "your-icon-url" } }'

这个示例包括：

初始化 Firebase 和消息传递服务。请求用户权限并获取 FCM 令牌。在前台和后台接收消息。点击通知后跳转到 https://fbspider.com。

请确保替换所有的 your-* 占位符为你自己的 Firebase 配置和服务器密钥。希望这个示例能帮助你！

【本文地址】

公司简介

联系我们