Canvas应用如何实现推送通知功能？

Question

**问题：** 在基于HTML5 Canvas开发的Web应用中，如何实现跨平台的推送通知功能？是否可以结合Service Worker与Push API实现原生级消息推送？若Canvas应用运行于微信小游戏或抖音小程序等封闭平台，又该如何适配其各自的推送机制？

Answer 1

一、推送通知在HTML5 Canvas Web应用中的实现路径

在基于HTML5 Canvas开发的Web应用中，实现跨平台的推送通知功能是一个常见的需求。由于Canvas本身只是渲染层技术，真正的推送机制需要依赖于浏览器提供的API和服务。

现代浏览器支持通过Service Worker与Push API结合的方式，实现后台消息推送，即使页面关闭也能接收通知，这种能力接近原生App的推送体验。

二、使用Service Worker与Push API实现原生级消息推送

Service Worker 是运行在浏览器后台的脚本，具备拦截网络请求、缓存资源和处理推送消息的能力。Push API 则允许服务器向客户端发送消息，而无需用户主动发起请求。

以下是基本实现流程：

1. 注册Service Worker
2. 获取用户的推送权限
3. 订阅推送服务（通过PushManager）
4. 将生成的订阅信息发送给后端服务器
5. 服务器通过VAPID协议向推送服务发送消息
6. Service Worker接收到消息并显示通知

// 注册 Service Worker
navigator.serviceWorker.register('/service-worker.js')
  .then(registration => {
    return registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array('你的公钥')
    });
  })
  .then(subscription => {
    // 将subscription对象发送到后端
  });

function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/-/g, '+')
    .replace(/_/g, '/');
  const rawData = atob(base64);
  const outputArray = new Uint8Array(rawData.length);
  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}
  

三、适配微信小游戏与抖音小程序的推送机制

当Canvas应用部署在如微信小游戏或抖音小程序等封闭平台时，无法直接使用Service Worker和Push API。这些平台通常提供自己的推送接口，开发者需进行适配。

• 微信小游戏：使用wx.requestSubscribeSystemMessage或wx.requestSubscribeDeviceMessage接口申请系统或设备类消息推送权限。
• 抖音小程序：使用tt.subscribeSystemMessage等接口，并遵循其推送策略。

平台	推送方式	是否支持后台推送	适用场景
Web	Service Worker + Push API	是	网页端长期活跃用户
微信小游戏	系统/设备消息订阅	否（依赖用户打开小程序）	社交传播型小游戏
抖音小程序	系统消息订阅	否	短视频引流+互动型应用

四、跨平台统一推送架构设计建议

为了实现跨平台一致的推送体验，可以采用“抽象层 + 多平台适配”的设计模式。核心逻辑封装在抽象层中，不同平台通过插件或条件判断调用各自API。

以下为一个简化的架构图：

graph TD
      A[推送抽象层] --> B{平台判断}
      B -->|Web| C[Service Worker + Push API]
      B -->|微信小游戏| D[wx.requestSubscribeSystemMessage]
      B -->|抖音小程序| E[tt.subscribeSystemMessage]

该架构有助于未来扩展更多平台，同时保持核心业务逻辑不变。