HTML5+ push消息推送

HTML5 本身并不支持直接的 push 消息推送，这通常是通过 Web 推送通知（Web Push Notifications）来实现的，需要结合服务器端的支持。以下是一个使用 Service Worker 接收和显示 push 消息的基本示例：

首先，在你的 HTML 文件中注册 Service Worker：

// 确保在 HTTPS 环境下运行
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    // 注册成功
    console.log('Service Worker 注册成功');
  }).catch(function(err) {
    // 注册失败
    console.error('Service Worker 注册失败', err);
  });
}

然后，在 Service Worker 脚本 (sw.js) 中，你可以添加以下代码来处理 push 事件：

self.addEventListener('push', function(event) {
  if (event.data) {
    // 如果推送事件中包含数据，解析并显示
    event.waitUntil(
      event.data.json().then(function(data) {
        // 发起一个通知
        return self.registration.showNotification(data.title, {
          body: data.body,
          icon: data.icon,
          vibrate: [100, 50, 100],
          data: {
            url: data.url
          }
        });
      })
    );
  }
});
 
self.addEventListener('notificationclick', function(event) {
  // 当用户点击通知时，打开对应的 URL
  event.notification.close();
  event.waitUntil(
    clients.matchAll({ type: 'window' }).then(function(clientList) {
      // 检查是否有已经打开的窗口
      for (var i = 0; i < clientList.length; i++) {
        var client = clientList[i];
        if (client.url === '/' && 'focus' in client) {
          return client.focus();
        }
      }
      // 如果没有打开的窗口，则创建一个新的窗口
      if (clients.openWindow) {
        return clients.openWindow(event.notification.data.url);
      }
    })
  );
});

在服务器端，你需要生成一个 push 消息，并通过相应的 API 发送给用户的 Service Worker。以下是一个使用 Node.js 和 web-push 库的示例：

const webPush = require('web-push');
 
const pushSubscription = {
  endpoint: 'https://fcm.googleapis.com/fcm/send/...', // 这里填写你的端点
  keys: {
    auth: '...', // 这里填写你的认证密钥
    p256dh: '...' // 这里填写你的P-256 DH密钥
  }
};
 
const payload = JSON.stringify({
  title: 'Hello World!',
  body: '这是一条推送消息。',
  icon: '/icon.png',
  url: 'https://yourdomain.com'
});
 
webPush.sendNotification(pushSubscription, payload)
  .then(response => console.log('Push 消息发送成功', respo