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

最新推荐文章于 2024-09-22 04:36:59 发布

刘春强

最新推荐文章于 2024-09-22 04:36:59 发布

阅读量938

点赞数

文章标签：前端服务器 javascript 消息推送

本文链接：https://blog.csdn.net/kevin_lcq/article/details/133760063

版权

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

1. HTML 文件（`index.html`）

<!DOCTYPE html>
<html>
<head>
  <title>FCM Push Notification Example</title>
  <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-messaging.js"></script>
</head>
<body>
  <h1>Welcome to FCM Push Notification Example</h1>
  <script src="main.js"></script>
</body>
</html>

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"
           }
         }'

这个示例包括：