web-push-notification.js

// web-push-notification.js

const WebPushNotification = {
  /**
   * เริ่มต้นระบบแจ้งเตือน
   */
  async init() {
    try {
      // ตรวจสอบการรองรับ service worker
      if (!('serviceWorker' in navigator)) {
        throw new Error('เบราว์เซอร์ไม่รองรับ Service Worker');
      }

      // ลงทะเบียน service worker
      const registration = await navigator.serviceWorker.register('service-worker.js');
      console.log('Service Worker ลงทะเบียนสำเร็จ');

      // ขอสิทธิ์การแจ้งเตือน
      const permission = await Notification.requestPermission();
      if (permission !== 'granted') {
        throw new Error('ไม่ได้รับอนุญาตให้แจ้งเตือน');
      }

      return true;
    } catch (error) {
      console.error('การเริ่มต้นระบบแจ้งเตือนล้มเหลว:', error);
      return false;
    }
  },

  /**
   * ส่งการแจ้งเตือน
   */
  async send(title, options = {}) {
    try {
      const registration = await navigator.serviceWorker.ready;
      
      const defaultOptions = {
        body: '',
        icon: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%234CAF50" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/%3E%3C/svg%3E',
        badge: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Ccircle fill="%234CAF50" cx="12" cy="12" r="10"/%3E%3C/svg%3E',
        vibrate: [200, 100, 200],
        tag: 'web-push',
        data: { url: options.url || '/' },
        actions: [
          { action: 'open', title: 'เปิดดู' },
          { action: 'close', title: 'ปิด' }
        ],
        requireInteraction: true
      };

      const notificationOptions = { ...defaultOptions, ...options };
      await registration.showNotification(title, notificationOptions);
      
      return true;
    } catch (error) {
      console.error('การส่งการแจ้งเตือนล้มเหลว:', error);
      return false;
    }
  },

  /**
   * ส่งการแจ้งเตือนแบบสำเร็จ
   */
  async success(message, options = {}) {
    return this.send('สำเร็จ!', {
      body: message,
      icon: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%234CAF50" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/%3E%3C/svg%3E',
      ...options
    });
  },

  /**
   * ส่งการแจ้งเตือนแบบข้อผิดพลาด
   */
  async error(message, options = {}) {
    return this.send('ข้อผิดพลาด!', {
      body: message,
      icon: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%23F44336" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/%3E%3C/svg%3E',
      requireInteraction: true,
      ...options
    });
  },

  /**
   * ส่งการแจ้งเตือนแบบคำเตือน
   */
  async warning(message, options = {}) {
    return this.send('คำเตือน!', {
      body: message,
      icon: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%23FFC107" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/%3E%3C/svg%3E',
      ...options
    });
  },

  /**
   * ส่งการแจ้งเตือนแบบข้อมูล
   */
  async info(message, options = {}) {
    return this.send('ข้อมูล', {
      body: message,
      icon: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%232196F3" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/%3E%3C/svg%3E',
      ...options
    });
  }
};