uniapp h5 消息推送如何实现

在uniapp开发的H5应用中，如何实现消息推送功能？需要支持用户离线时也能接收到推送消息。目前尝试了WebSocket和uni-push，但WebSocket在应用退到后台时会断开，而uni-push在H5端似乎不支持。有没有可靠的解决方案或第三方服务推荐？最好能提供具体的实现步骤和注意事项。

2 回复

UniApp H5 消息推送可通过以下方式实现：

  1. 使用 WebSocket 建立长连接，实时接收服务器推送。
  2. 结合 Service Worker 实现后台消息推送（需 HTTPS）。
  3. 调用第三方推送服务（如个推、极光推送的 Web SDK）。
  4. 定时轮询服务器获取新消息（简单但效率低）。

推荐使用 WebSocket + Service Worker 方案，兼容性和实时性较好。


在UniApp的H5平台实现消息推送，主要依赖浏览器推送机制，通常使用Web Push API（需HTTPS环境）或第三方推送服务（如个推、友盟等）。以下是具体实现方法：

1. 使用Web Push API（原生方案）

适用场景：支持Service Worker和Push API的浏览器（如Chrome、Firefox）。

实现步骤：

  1. 生成VAPID密钥（用于身份验证）：

    npm install web-push -g
web-push generate-vapid-keys

    保存生成的公钥和私钥。

  2. 注册Service Worker（sw.js）：

    // sw.js - 处理推送事件
self.addEventListener('push', event => {
  const options = {
    body: event.data?.text() || '新消息',
    icon: '/icon.png',
    badge: '/badge.png'
  };
  event.waitUntil(
    self.registration.showNotification('消息标题', options)
  );
});

  3. 订阅推送（前端代码）：

    // 在UniApp页面中
async function subscribePush() {
  const registration = await navigator.serviceWorker.register('/sw.js');
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: 'YOUR_VAPID_PUBLIC_KEY'
  });
  
  // 将subscription发送到服务器保存（用于后续推送）
  uni.request({
    url: 'https://your-server.com/save-subscription',
    method: 'POST',
    data: subscription
  });
}

  4. 服务端推送（Node.js示例）：

    const webpush = require('web-push');
webpush.setVapidDetails(
  'mailto:your-email@domain.com',
  'VAPID_PUBLIC_KEY',
  'VAPID_PRIVATE_KEY'
);

// 向订阅对象发送推送
webpush.sendNotification(subscription, '推送消息内容');

2. 使用第三方推送服务（推荐）

优势：兼容性更好，支持多浏览器，无需自行维护服务端。

以「个推」为例：

  1. 集成SDK：

    • 在个推官网注册账号，创建H5应用并获取配置参数（AppID、AppKey等）。
    • 在UniApp的main.js中引入SDK：
      import './utils/gt-h5.js'; // 个推H5 SDK

  2. 初始化并订阅：

    // 页面中调用
const geTui = window.GeTui;
geTui.init({
  appId: 'YOUR_APP_ID',
  appKey: 'YOUR_APP_KEY'
});

// 监听消息
geTui.onMessage(data => {
  uni.showModal({
    title: '推送消息',
    content: data.payload
  });
});

  3. 服务端调用个推API发送推送。

注意事项：

  1. HTTPS要求：Web Push API必须部署在HTTPS域名下，本地开发可用localhost。
  2. 用户授权：浏览器会弹窗请求通知权限，需用户同意。
  3. 兼容性： Safari等浏览器对Web Push支持有限，建议用第三方服务兜底。
  4. UniApp限制：H5平台无法直接调用原生推送（如UniPush需原生App环境）。

总结：

  • 轻量需求：用Web Push API（需自建服务端）。
  • 生产环境：推荐个推/友盟等第三方服务，省去兼容性处理。
  • 完整示例代码需结合具体业务调整，重点确保Service Worker和订阅逻辑正确。
回到顶部