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

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

    1. HTML 文件（index.html）

    1. html>
    2. <html>
    3. <head>
    4.   <title>FCM Push Notification Exampletitle>
    5.   <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js">script>
    6.   <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-messaging.js">script>
    7. head>
    8. <body>
    9.   <h1>Welcome to FCM Push Notification Exampleh1>
    10.   <script src="main.js">script>
    11. body>
    12. html>

    2. 主 JavaScript 文件（main.js）

    1. // Initialize Firebase
    2. firebase.initializeApp({
    3.   apiKey: "your-api-key",
    4.   authDomain: "your-auth-domain",
    5.   projectId: "your-project-id",
    6.   messagingSenderId: "your-messaging-sender-id",
    7.   appId: "your-app-id"
    8. });
    9.  
    10. const messaging = firebase.messaging();
    11.  
    12. // Request permission and get token
    13. Notification.requestPermission().then((permission) => {
    14.   if (permission === 'granted') {
    15.     messaging.getToken().then((currentToken) => {
    16.       if (currentToken) {
    17.         console.log('Token:', currentToken);
    18.         // Send this token to your server
    19.       } else {
    20.         console.log('No registration token available. Request permission to generate one.');
    21.       }
    22.     }).catch((err) => {
    23.       console.log('An error occurred while retrieving token. ', err);
    24.     });
    25.   }
    26. });
    27.  
    28. // Handle incoming messages
    29. messaging.onMessage((payload) => {
    30.   console.log('Message received:', payload);
    31.   // Customize notification here
    32.   const notificationTitle = payload.notification.title;
    33.   const notificationOptions = {
    34.     body: payload.notification.body,
    35.     icon: payload.notification.icon
    36.   };
    37.  
    38.   new Notification(notificationTitle, notificationOptions);
    39. });

    3. Service Worker 文件（firebase-messaging-sw.js）

    1. // Import and configure the Firebase SDK
    2. importScripts('https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js');
    3. importScripts('https://www.gstatic.com/firebasejs/8.0.0/firebase-messaging.js');
    4.  
    5. firebase.initializeApp({
    6.   apiKey: "your-api-key",
    7.   authDomain: "your-auth-domain",
    8.   projectId: "your-project-id",
    9.   messagingSenderId: "your-messaging-sender-id",
    10.   appId: "your-app-id"
    11. });
    12.  
    13. const messaging = firebase.messaging();
    14.  
    15. // Handle background messages
    16. messaging.onBackgroundMessage((payload) => {
    17.   console.log('Received background message:', payload);
    18.  
    19.   const notificationTitle = payload.notification.title;
    20.   const notificationOptions = {
    21.     body: payload.notification.body,
    22.     icon: payload.notification.icon
    23.   };
    24.  
    25.   self.registration.showNotification(notificationTitle, notificationOptions);
    26. });
    27.  
    28. // Handle notification click
    29. self.addEventListener('notificationclick', (event) => {
    30.   event.notification.close();
    31.   event.waitUntil(
    32.     clients.openWindow('https://fbspider.com')
    33.   );
    34. });

     

    4. 在服务器端发送推送

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

    1. curl -X POST "https://fcm.googleapis.com/fcm/send" \
    2.      -H "Authorization: key=your-server-key" \
    3.      -H "Content-Type: application/json" \
    4.      -d '{
    5.            "to": "client-token",
    6.            "notification": {
    7.              "title": "Your Title",
    8.              "body": "Your Body",
    9.              "icon": "your-icon-url"
    10.            }
    11.          }'

    这个示例包括：

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

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

  • 相关阅读:
    Adobe Acrobat Pro DC 2023：提升工作效率，激发创意灵感 mac/win版
    翻译软件-免费翻译软件-自动批量翻译软件
    06 文件和异常
    web页面拦截用户登录，管理session和cookie
    2025武忠祥考研数学，视频百度网盘+基础全程课程PDF
    GRACE球谐数据滤波处理（利用matlab实现GRACE月水储量的二维傅里叶变化滤波）
    企业如何做好疫情防控？数字化疫情管理事半功倍
    萌新卷妹带你逃出算法无名岛第六站
    IDEA 打包MapReduce程序到集群运行的两种方式以及XShell和Xftp过期的解决
    搞懂 冒泡排序原理 锁和事务的原理(图文并茂)
  • 原文地址：https://blog.csdn.net/kevin_lcq/article/details/133760063