Tencent Cloud Web Push SDK

A web-based push notification SDK built on modern Web APIs including Service Worker, Push API, and Notification API.

Features

• 🚀 Built on modern Web standard APIs
• 📱 Cross-platform push notification support
• 🔧 TypeScript support
• 📊 Built-in analytics functionality
• 🎯 Event-driven architecture
• 💾 Local state persistence
• 🔒 Secure VAPID authentication

Browser Support

• Chrome 50+
• Firefox 44+
• Safari 16+
• Edge 17+

Installation

npm install @tencentcloud/web-push

Quick Start

Basic Usage

import webPush from '@tencentcloud/web-push';

const SDKAppID = 0; // Your SDKAppID
const appKey = 'your-app-key'; // Client key
const userID = 'xxx'; // User ID

// Register push service
await webPush.registerPush({ SDKAppID, appKey, userID });

// Listen for push messages
webPush.addPushListener(webPush.EVENT.MESSAGE_RECEIVED, (message) => {
  console.log('Received push message:', message);
});

// Listen for notification clicks
webPush.addPushListener(webPush.EVENT.NOTIFICATION_CLICKED, (data) => {
  console.log('Notification clicked:', data);
});

// Listen for message revocation
webPush.addPushListener(webPush.EVENT.MESSAGE_REVOKED, (messageID) => {
  console.log('Message revoked:', messageID);
});

Integration with Chat SDK

import webPush from '@tencentcloud/web-push';
import ChatSDK from '@tencentcloud/lite-chat';

const SDKAppID = 0; // Your SDKAppID
const appKey = 'your-app-key'; // Client key
const userID = 'xxx'; // User ID
const userSig = 'xxxx'; // User signature for IM login

const chat = ChatSDK.create({ SDKAppID });
await chat.login({ userID, userSig });

// Register push service with chat instance
await webPush.registerPush({ SDKAppID, appKey, userID, chat });

API Reference

Methods

| API | Parameters | Description | | -------------------- | --------------------------------------------------- | -------------------------- | | registerPush | options: RegisterPushOptions | Register push service | | unRegisterPush | - | Unregister push service | | addPushListener | eventName: EVENT, listener: Function<EventResult> | Add push event listener | | removePushListener | eventName: EVENT, listener: Function<EventResult> | Remove push event listener |

Type Definitions

interface RegisterPushOptions {
  SDKAppID: number;
  appKey: string;
  userID: string;
  serviceWorkerPath?: string;
  chat?: any;
}

enum EVENT {
  MESSAGE_RECEIVED = 'message_received',
  MESSAGE_REVOKED = 'message_revoked',
  NOTIFICATION_CLICKED = 'notification_clicked',
}

interface Message {
  ID: string;
  type:
    | 'TIMTextElem'
    | 'TIMImageElem'
    | 'TIMSoundElem'
    | 'TIMVideoFileElem'
    | 'TIMFileElem'
    | 'TIMCustomElem'
    | 'TIMRelayElem'
    | 'TIMLocationElem'
    | 'TIMFaceElem';
  payload: any;
  conversationID: string;
  conversationType: 'C2C' | 'GROUP';
  to: string;
  from: string;
  flow: string;
  time: number;
  status: string;
  isRevoked: boolean;
  nick: string;
  avatar: string;
  isPeerRead: boolean;
  nameCard: string;
  atUserList: string[];
  cloudCustomData: string;
  isDeleted: boolean;
  isModified: boolean;
  needReadReceipt: boolean;
  readReceiptInfo: any;
  isBroadcastMessage: boolean;
  isSupportExtension: boolean;
  receiverList?: string[];
  revoker: string;
  sequence: number;
  progress: number;
  revokerInfo: {
    userID: string;
    nick: string;
    avatar: string;
  };
  revokeReason: string;
  hasRiskContent: boolean;
}

interface MessageReceivedResult {
  message: Message;
}

interface MessageRevokedResult {
  messageID: string;
}

interface MessageNotificationClickedResult {
  ext: string;
}

interface EventResult {
  data:
    | MessageReceivedResult
    | MessageRevokedResult
    | MessageNotificationClickedResult;
}

Event Types

• MESSAGE_RECEIVED: Received a push message
• MESSAGE_REVOKED: Message was revoked
• NOTIFICATION_CLICKED: Notification was clicked

Service Worker Configuration

The SDK requires a Service Worker to handle push messages. Make sure to place the sw.js file in your website's root directory:

// public/sw.js
importScripts('node_modules/@tencentcloud/web-push/sw.js');

License

MIT License