@tencentcloud/web-push 1.0.2 → 1.0.3

package/src/service-worker/sw.ts

@@ -0,0 +1,494 @@
+declare const self: ServiceWorkerGlobalScope;
+
+type LogLevel = 0 | 1 | 2 | 3 | 4;
+
+interface NotificationMessage {
+  messageID: string;
+  title: string;
+  body: string;
+  icon?: string;
+  tag?: string;
+  data?: any;
+  timestamp: number;
+}
+
+interface ServiceWorkerMessage {
+  type: 'MESSAGE_RECEIVED' | 'NOTIFICATION_CLICKED' | 'MESSAGE_REVOKED';
+  data: any;
+}
+
+interface WebPushMessageData {
+  id: string;
+  title: string;
+  desc?: string;
+  url?: string;
+  tag?: string;
+  icon?: string;
+  image?: string;
+  rptExt: string;
+  rptURL: string;
+}
+
+interface WebPushEvent {
+  id: string;
+  EventType: number;
+  EventTime: number;
+  rptExt: string;
+}
+
+interface ReportData {
+  webpushEvents: WebPushEvent[];
+}
+
+interface ReportOptions {
+  id: string;
+  rptURL: string;
+  rptExt: string;
+  eventType?: number;
+}
+
+// 日志级别控制
+let currentLogLevel: LogLevel = 1; // 默认为 release 级别
+
+function shouldLog(messageLevel: number): boolean {
+  // 4 = 无日志级别，不输出任何日志
+  if (currentLogLevel === 4) return false;
+  
+  // 数字越大，级别越高，输出的日志越少
+  // messageLevel: 0=debug, 1=info, 2=warn, 3=error
+  return messageLevel >= currentLogLevel;
+}
+
+function swLog(message: string, ...args: any[]): void {
+  if (shouldLog(1)) { // info 级别
+    console.log(`[WebPush SW] ${message}`, ...args);
+  }
+}
+
+function swWarn(message: string, ...args: any[]): void {
+  if (shouldLog(2)) { // warn 级别
+    console.warn(`[WebPush SW] ${message}`, ...args);
+  }
+}
+
+function swError(message: string, ...args: any[]): void {
+  if (shouldLog(3)) { // error 级别
+    console.error(`[WebPush SW] ${message}`, ...args);
+  }
+}
+
+self.addEventListener('install', (_event) => {
+  swLog('Service Worker installing...');
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  swLog('Service Worker activating...');
+  event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener('push', (event) => {
+  swLog('Push message received', event);
+
+  if (!event.data) {
+    swWarn('Push message has no data');
+    return;
+  }
+
+  try {
+    const data = processWebPushData(event.data);
+    event.waitUntil(handleWebPushNotification(data));
+  } catch (error) {
+    swError('Failed to process push message', error);
+
+    event.waitUntil(
+      self.registration.showNotification('WebPush Notification', {
+        body: 'You have a new message',
+        tag: 'fallback',
+      })
+    );
+  }
+});
+
+/**
+ * 处理 WebPush 数据，提取或构造 WebPushMessageData
+ */
+function processWebPushData(eventData?: PushMessageData): WebPushMessageData {
+  if (!eventData) {
+    throw new Error('No push data available');
+  }
+
+  try {
+    const data = eventData.json();
+    swLog('Push message data (JSON):', data);
+    return data;
+  } catch {
+    const textData = eventData.text();
+    swLog('Push message data (Text):', textData);
+
+    // 如果不是 JSON 格式，创建默认数据结构
+    return {
+      id: '',
+      title: 'WebPush Notification',
+      desc: textData || 'You have a new message',
+      url: '/',
+      icon: '',
+      tag: '',
+      image: '',
+      rptExt: '',
+      rptURL: '',
+    };
+  }
+}
+
+/**
+ * 处理 WebPush 通知显示和消息发送
+ * @param data WebPush 消息数据
+ * @param options 处理选项
+ */
+async function handleWebPushNotification(
+  data: WebPushMessageData, 
+  options: { shouldReport?: boolean; clickEventType?: number } = {}
+): Promise<void> {
+  const { shouldReport = true, clickEventType = 2 } = options;
+  
+  const message: NotificationMessage = {
+    messageID: data.id || generateMessageID(),
+    title: data.title || 'New Message',
+    body: data.desc || 'You have a new message',
+    icon: data.icon || '',
+    tag: data.tag || data?.id?.slice(-100) || generateUniqueTag(),
+    data: {
+      url: data.url,
+      image: data.image,
+      rptExt: data.rptExt,
+      rptURL: data.rptURL,
+      // 添加点击时的 eventType 标记
+      clickEventType: clickEventType,
+    },
+    timestamp: Date.now(),
+  };
+
+  const notificationPromise = self.registration.showNotification(
+    message.title,
+    {
+      body: message.body,
+      icon: message.icon,
+      image: data.image,
+      tag: message.tag,
+      data: message,
+      requireInteraction: false,
+    } as NotificationOptions & { image?: string }
+  );
+
+  const clientMessage = createClientSafeMessage(message);
+
+  const messagePromise = sendMessageToClients({
+    type: 'MESSAGE_RECEIVED',
+    data: clientMessage,
+  });
+
+  // 根据 shouldReport 参数决定是否进行数据上报
+  const reportPromise =
+    shouldReport && data.rptURL && data.rptExt
+      ? reportWebPushEvent({
+          id: data.id,
+          rptURL: data.rptURL,
+          rptExt: data.rptExt,
+          eventType: 1,
+        })
+      : Promise.resolve();
+
+  await Promise.all([notificationPromise, messagePromise, reportPromise]);
+}
+
+self.addEventListener('notificationclick', (event) => {
+  swLog('Notification clicked', event);
+
+  const notification = event.notification;
+  const action = event.action;
+  const data = notification.data;
+
+  notification.close();
+
+  if (action === 'close') {
+    return;
+  }
+  const clientNotificationData = createClientSafeMessage(data);
+
+  const messagePromise = sendMessageToClients({
+    type: 'NOTIFICATION_CLICKED',
+    data: {
+      notification: clientNotificationData,
+      action: action,
+    },
+  });
+
+  // 根据消息中的 URL 打开对应页面，如果没有则打开默认页面
+  const targetUrl = data?.data?.url || '/';
+  const windowPromise = openOrFocusWindow(targetUrl);
+
+  // 点击消息时进行数据上报，使用存储在通知数据中的 clickEventType
+  const clickEventType = data?.data?.clickEventType || 2; // 默认为 2
+  const reportPromise =
+    data?.data?.rptURL && data?.data?.rptExt
+      ? reportWebPushEvent({
+          id: data.messageID,
+          rptURL: data.data.rptURL,
+          rptExt: data.data.rptExt,
+          eventType: clickEventType,
+        })
+      : Promise.resolve();
+
+  event.waitUntil(Promise.all([messagePromise, windowPromise, reportPromise]));
+});
+
+self.addEventListener('notificationclose', (event) => {
+  swLog('Notification closed', event);
+});
+
+self.addEventListener('message', (event) => {
+  swLog('Message received from main thread', event.data);
+
+  const { type, payload } = event.data;
+
+  switch (type) {
+    case 'SHOW_NOTIFICATION':
+      handleShowNotification(payload);
+      break;
+    case 'PROCESS_WEBPUSH_DATA':
+      handleWebPushData(payload);
+      break;
+    case 'REVOKE_MESSAGE':
+      handleMessageRevoke(payload.messageID);
+      break;
+    case 'SET_LOG_LEVEL':
+      handleLogLevelUpdate(payload.logLevel);
+      break;
+    case 'REPORT_WEBPUSH_EVENT':
+      reportWebPushEvent(payload);
+      break;
+  }
+});
+
+/**
+ * 创建客户端安全消息，移除敏感字段
+ * @param message 原始通知消息
+ * @returns 过滤后的客户端消息
+ */
+function createClientSafeMessage(message: NotificationMessage): NotificationMessage {
+  return {
+    messageID: message.messageID,
+    title: message.title,
+    body: message.body,
+    icon: message.icon,
+    tag: message.tag,
+    data: {
+      url: message.data?.url,
+      image: message.data?.image,
+    },
+    timestamp: message.timestamp,
+  };
+}
+
+async function sendMessageToClients(
+  message: ServiceWorkerMessage
+): Promise<void> {
+  try {
+    const clients = await self.clients.matchAll({
+      includeUncontrolled: true,
+      type: 'window',
+    });
+
+    clients.forEach((client) => {
+      client.postMessage(message);
+    });
+  } catch (error) {
+    swError('Failed to send message to clients', error);
+  }
+}
+
+async function openOrFocusWindow(targetUrl: string = '/'): Promise<void> {
+  try {
+    swLog('Attempting to open or focus window with URL:', targetUrl);
+    
+    const clients = await self.clients.matchAll({
+      type: 'window',
+      includeUncontrolled: true,
+    });
+
+    swLog('Found clients:', clients.length);
+
+    // 处理相对路径和绝对路径
+    let fullTargetUrl: string;
+    try {
+      // 如果是完整的 URL（包含协议），直接使用
+      if (targetUrl.startsWith('http://') || targetUrl.startsWith('https://')) {
+        fullTargetUrl = targetUrl;
+      } else {
+        // 如果是相对路径，构建完整 URL
+        fullTargetUrl = new URL(targetUrl, self.location.origin).href;
+      }
+    } catch (error) {
+      swWarn('Invalid URL, using origin:', targetUrl, error);
+      fullTargetUrl = self.location.origin;
+    }
+
+    swLog('Full target URL:', fullTargetUrl);
+
+    // 尝试找到已经打开的匹配窗口
+    for (const client of clients) {
+      if (client.url === fullTargetUrl && 'focus' in client) {
+        await client.focus();
+        return;
+      }
+    }
+
+    // 如果没有打开的窗口，打开新窗口
+    if (self.clients.openWindow) {
+      await self.clients.openWindow(fullTargetUrl);
+    }
+  } catch (error) {
+    swError('Failed to open or focus window', error);
+  }
+}
+
+async function handleShowNotification(payload: any): Promise<void> {
+  try {
+    const { eventType, data, options } = payload;
+
+    swLog('Handling show notification request', { eventType, data, options });
+
+    await self.registration.showNotification(options.title, {
+      body: options.body,
+      icon: options.icon,
+      badge: options.badge,
+      tag: options.tag,
+      requireInteraction: options.requireInteraction,
+      silent: options.silent,
+      data: options.data,
+    });
+
+    swLog('Notification shown successfully', options.title);
+  } catch (error) {
+    swError('Failed to handle show notification', error);
+  }
+}
+
+/**
+ * 处理来自主线程的 WebPush 数据，复用 push 事件的处理逻辑
+ */
+async function handleWebPushData(webpushInfo: WebPushMessageData): Promise<void> {
+  try {
+    swLog('Handling webpush data from main thread', webpushInfo);
+    
+    // 直接使用传入的 webpushInfo 数据，复用 push 事件的处理逻辑
+    // 不进行数据上报，但点击时 eventType 为 3
+    await handleWebPushNotification(webpushInfo, {
+      shouldReport: false,
+      clickEventType: 3
+    });
+    
+    swLog('WebPush notification processed successfully');
+  } catch (error) {
+    swError('Failed to handle webpush data', error);
+    
+    // 降级处理：显示默认通知
+    try {
+      await self.registration.showNotification('WebPush Notification', {
+        body: 'You have a new message',
+        tag: 'fallback',
+      });
+    } catch (fallbackError) {
+      swError('Failed to show fallback notification', fallbackError);
+    }
+  }
+}
+
+async function handleMessageRevoke(messageID: string): Promise<void> {
+  try {
+    const notifications = await self.registration.getNotifications();
+
+    notifications.forEach((notification) => {
+      if (notification.data && notification.data.messageID === messageID) {
+        notification.close();
+      }
+    });
+
+    await sendMessageToClients({
+      type: 'MESSAGE_REVOKED',
+      data: { messageID },
+    });
+  } catch (error) {
+    swError('Failed to handle message revocation', error);
+  }
+}
+
+function handleLogLevelUpdate(logLevel: LogLevel): void {
+  currentLogLevel = logLevel;
+  swLog('Log level updated to:', logLevel);
+}
+
+function generateMessageID(): string {
+  return Date.now().toString(36) + Math.random().toString(36).substring(2);
+}
+
+function generateUniqueTag(): string {
+  return 'push-' + Date.now() + '-' + Math.random().toString(36).substring(2, 7);
+}
+
+/**
+ * 上报 WebPush 事件
+ * @param options 上报选项，包含 id、rptURL、rptExt、eventType 等字段
+ */
+async function reportWebPushEvent(options: ReportOptions): Promise<void> {
+  try {
+    if (!options.rptURL || !options.rptExt) {
+      swWarn('Missing rptURL or rptExt, skipping report');
+      return;
+    }
+
+    const reportData: ReportData = {
+      webpushEvents: [
+        {
+          id: options.id,
+          EventType: options.eventType || 1,
+          EventTime: Math.floor(Date.now() / 1000), // 转换为秒级时间戳
+          rptExt: options.rptExt,
+        },
+      ],
+    };
+
+    swLog('Reporting WebPush event', { rptURL: options.rptURL, reportData });
+
+    const response = await fetch(options.rptURL, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(reportData),
+    });
+
+    if (response.ok) {
+      swLog('WebPush event reported successfully');
+    } else {
+      swWarn(
+        'Failed to report WebPush event',
+        response.status,
+        response.statusText
+      );
+    }
+  } catch (error) {
+    swError('Error reporting WebPush event', error);
+  }
+}
+
+self.addEventListener('error', (event) => {
+  swError('Service Worker error', event.error);
+});
+
+self.addEventListener('unhandledrejection', (event) => {
+  swError('Service Worker unhandled promise rejection', event.reason);
+});
+
+export {};

package/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from './inner';
+export * from './outer';

package/src/types/inner.ts

@@ -0,0 +1,44 @@
+import { NotificationMessage } from "./outer";
+
+export interface NotificationClickData {
+  notification: NotificationMessage;
+  action?: string;
+}
+
+export interface StatisticsData {
+  messageID: string;
+  type: 'reach' | 'click';
+  timestamp: number;
+  SDKAppID: number;
+  registrationID: string;
+}
+
+export interface ServiceWorkerMessage {
+  type: 'MESSAGE_RECEIVED' | 'NOTIFICATION_CLICKED' | 'MESSAGE_REVOKED';
+  data: any;
+}
+
+export interface SubscriptionInfo {
+  subscription: PushSubscription;
+  token: string;
+  auth: string;
+  p256dh: string;
+  endpoint: string;
+}
+
+export interface WebPushCompatibilityInfo {
+  isSupported: boolean;
+  browserInfo: {
+    name: string;
+    version: string;
+    platform: string;
+    majorVersion: number;
+  };
+  features: {
+    serviceWorker: boolean;
+    pushManager: boolean;
+    notification: boolean;
+  };
+  warnings: string[];
+  recommendations: string[];
+}

package/src/types/outer.ts

@@ -0,0 +1,142 @@
+export type LogLevel = 0 | 1 | 2 | 3 | 4;
+
+export enum Placement {
+  CENTER = 0, // 中间
+  TOP_LEFT = 1, // 左上
+  TOP_CENTER = 2, // 上中
+  TOP_RIGHT = 3, // 右上
+  MIDDLE_RIGHT = 4, // 右中
+  BOTTOM_RIGHT = 5, // 右下
+  BOTTOM_CENTER = 6, // 下中
+  BOTTOM_LEFT = 7, // 左下
+  MIDDLE_LEFT = 8, // 左中
+}
+
+export interface WebPushSDK {
+  registerPush(options?: RegisterPushOptions): Promise<any>;
+  unRegisterPush(): Promise<any>;
+  addPushListener(eventName: EVENT, listener: (data: EventResult) => void): any;
+  removePushListener(
+    eventName: EVENT,
+    listener: (data: EventResult) => void
+  ): any;
+}
+
+export interface RegisterPushOptions {
+  SDKAppID: number;
+  appKey: string;
+  userID: string;
+  serviceWorkerPath?: string;
+  chat?: any;
+  /**
+   * 日志级别：
+   * 0 - 普通级别，日志量较多，接入时建议使用
+   * 1 - release级别，SDK 输出关键信息，生产环境时建议使用（默认）
+   * 2 - 告警级别，SDK 只输出告警和错误级别的日志
+   * 3 - 错误级别，SDK 只输出错误级别的日志
+   * 4 - 无日志级别，SDK 将不打印任何日志
+   */
+  logLevel?: LogLevel;
+}
+
+export enum EVENT {
+  MESSAGE_RECEIVED = 'message_received',
+  MESSAGE_REVOKED = 'message_revoked',
+  NOTIFICATION_CLICKED = 'notification_clicked',
+  CUSTOM_MESSAGE_RECEIVED = 'custom_message_received',
+}
+
+export interface NotificationMessage {
+  messageID: string;
+  title: string;
+  body: string;
+  icon?: string;
+  tag?: string;
+  data?: any;
+  timestamp: number;
+}
+
+export interface StandardMessage {
+  id: string;
+  MsgType: 'standard';
+  MsgContent: {
+    Text: {
+      Title: string;
+      Desc: string;
+    };
+    Image?: {
+      URL: string;
+      LinkURL: string;
+    };
+    Close: 0 | 1;
+    Placement?: Placement;
+    Duration?: number;
+    Button?: Array<{
+      Text: string;
+      Icon?: string;
+      Url: string;
+    }>;
+  };
+  Ext?: string;
+}
+
+export interface HtmlMessage {
+  id: string;
+  MsgType: 'html';
+  MsgContent: {
+    Placement?: Placement;
+    Duration?: number;
+    Html: string; // base64 encoded HTML
+  };
+  Ext?: string;
+}
+
+export interface CustomMessage {
+  id: string;
+  MsgType: 'custom';
+  MsgContent: {
+    Data: string | object;
+  };
+  Ext?: string;
+}
+
+export interface WebPushInfo {
+  Title: string;
+  Desc: string;
+  Icon: string;
+  Image: string;
+  URL: string;
+}
+
+export interface WebPushExt {
+  WebpushReportUrl: string;
+  OnlineClickExt: string;
+  TaskId: string;
+}
+
+export type PushMessage = StandardMessage | HtmlMessage | CustomMessage;
+
+export interface MessageReceivedData {
+  content: string;
+  info: WebPushInfo;
+  extension: WebPushExt;
+}
+
+export interface MessageReceivedResult {
+  message: PushMessage | NotificationMessage;
+}
+
+export interface MessageRevokedResult {
+  messageID: String;
+}
+
+export interface MessageNotificationClickedResult {
+  ext: String;
+}
+
+export interface EventResult {
+  data:
+    | MessageReceivedResult
+    | MessageRevokedResult
+    | MessageNotificationClickedResult;
+}