Web push SDK 3.0

การผสานรวม

รับ Pushwoosh Web Push SDK และแตกไฟล์ คุณควรมีไฟล์ต่อไปนี้:

pushwoosh-service-worker.js

วางไฟล์ทั้งหมดนี้ไว้ที่ไดเรกทอรีราก (root) ระดับบนสุดของเว็บไซต์ของคุณ

เริ่มต้นการทำงานของ SDK:

รวม SDK จาก CDN ของเราแบบ อะซิงโครนัส

<script type="text/javascript" src="//cdn.pushwoosh.com/webpush/v3/pushwoosh-web-notifications.js" async></script>

เริ่มต้นการทำงานของ Web Push SDK และตรวจสอบให้แน่ใจว่าได้จัดคิวการเริ่มต้นจนกว่า SDK จะโหลดเสร็จสมบูรณ์

<script type="text/javascript">
var Pushwoosh = Pushwoosh || [];
Pushwoosh.push(['init', {
    logLevel: 'info', // ค่าที่เป็นไปได้: error, info, debug
    applicationCode: 'XXXXX-XXXXX', // application code ของคุณจาก Pushwoosh Control Panel
    apiToken: 'XXXXXXX', //  Device API Token
    safariWebsitePushID: 'web.com.example.domain', //  สตริง reverse-domain ที่ไม่ซ้ำกัน ซึ่งได้รับจาก Apple Developer Portal ของคุณ จำเป็นเฉพาะเมื่อคุณส่ง push notifications ไปยังเบราว์เซอร์ Safari
    defaultNotificationTitle: 'Pushwoosh', // ตั้งค่าชื่อเริ่มต้นสำหรับ push notifications
    defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png', // URL ไปยังรูปภาพการแจ้งเตือนที่กำหนดเอง
    autoSubscribe: false, // หรือ true หากเป็น true จะแจ้งให้ผู้ใช้สมัครรับ push เมื่อ SDK เริ่มต้นทำงาน
    subscribeWidget: {
      enable: true
    },
    userId: 'user_id', // ไม่บังคับ, ตั้งค่า User ID ที่กำหนดเอง
    tags: {
        'Name': 'John Smith'     // ไม่บังคับ, ตั้งค่า Tags ที่กำหนดเอง
    }
}]);
</script>

Web popups

เพิ่ม webPopups ไปยังอ็อบเจกต์ init ของคุณเพื่อเปิดใช้งาน แคมเปญ Web popup บนไซต์ของคุณ

webPopups: {
  enable: true,
  autoShow: true, // ไม่บังคับ, ตั้งค่าเป็น false เพื่อโหลดป๊อปอัปโดยไม่แสดงโดยอัตโนมัติ — ดูเมธอด WebPopups ด้านล่าง
  colorScheme: 'auto', // ไม่บังคับ, 'auto' (ค่าเริ่มต้น) | 'light' | 'dark'
},

แคมเปญ Web popup จะแสดงโอเวอร์เลย์ที่คุณกำหนดค่าใน Control Panel เช่น โปรโมชั่น ประกาศ หรือแบบฟอร์มเก็บข้อมูลลูกค้าเป้าหมาย ซึ่งแตกต่างจาก ป๊อปอัปการสมัครรับข้อมูลที่กำหนดเอง (subscribePopup) ซึ่งจัดการเฉพาะการเลือกรับ web push เท่านั้น แคมเปญ Web popup สามารถแสดงเนื้อหาใดๆ ที่คุณกำหนดค่าได้ สำหรับการตั้งค่าใน Control Panel โปรดดู ทำความเข้าใจเกี่ยวกับ Web popups

colorScheme จะเลือกชุดสีที่ป๊อปอัปซึ่งกำหนดค่า โหมดมืด จะแสดงผลด้วย:

'auto' (ค่าเริ่มต้น): เป็นไปตามชุดสีระดับ OS ของผู้เข้าชม (prefers-color-scheme)
'light' หรือ 'dark': แสดงชุดสีนั้นเสมอ โดยไม่คำนึงถึงการตั้งค่า OS ของผู้เข้าชม

ป๊อปอัปที่ไม่ได้กำหนดค่าโหมดมืดในตัวแก้ไขจะแสดงผลเป็นแบบสว่างเสมอ — colorScheme ไม่มีผลต่อมัน

สำหรับการควบคุมแบบโปรแกรม โปรดดู เมธอด WebPopups และ อีเวนต์ Web popup

ปุ่มสมัครรับ Push

เพื่อกระตุ้นให้ผู้ใช้ของคุณสมัครรับ push notifications เราขอแนะนำให้ใช้ ปุ่มสมัครรับ push บนเว็บไซต์ของคุณ เพื่อเพิ่มประสบการณ์ผู้ใช้และรับผู้ติดตามมากขึ้น!

การกำหนดค่า

เพื่อให้การใช้งาน push notifications บนเว็บไซต์ของคุณเสร็จสมบูรณ์ คุณต้องกำหนดค่าแพลตฟอร์มเว็บใน Pushwoosh Control Panel ของคุณตามคำแนะนำทีละขั้นตอนของเรา:

การลงทะเบียน service worker ในขอบเขตที่แตกต่างกัน

บางครั้งคุณไม่สามารถวางไฟล์ service worker ในไดเรกทอรีรากของเว็บไซต์ได้ แต่ต้องวางในไดเรกทอรีย่อย

ในกรณีนี้ ให้แก้ไขการกำหนดค่า (ขั้นตอนที่ 4.3) โดยเพิ่มพารามิเตอร์

serviceWorkerUrl: “/push-notifications/pushwoosh-service-worker.js”

โดยที่ /push-notifications/pushwoosh-service-worker.js คือพาธไปยังไฟล์ pushwoosh-service-worker.js

ตัวจัดการอีเวนต์

ใน Pushwoosh Web SDK 3.0 คุณสามารถสมัครรับอีเวนต์บางอย่างเพื่อติดตามหรือยกเลิกการสมัครรับอีเวนต์หากไม่ต้องการติดตามอีกต่อไป

ในการติดตามการโหลดของ Web SDK 3.0 ให้เรียกใช้อีเวนต์ onLoad ดังนี้:

// อีเวนต์ Load
Pushwoosh.push(['onLoad', (api) => {
  console.log('Pushwoosh โหลดแล้ว!');
}]);

ในการติดตามการเริ่มต้น Web SDK ที่ถูกต้อง ให้เรียกใช้อีเวนต์ onReady:

// อีเวนต์ Ready
Pushwoosh.push((api) => {
  console.log('Pushwoosh พร้อมแล้ว!');
});

ในการสมัครรับหรือยกเลิกการสมัครรับอีเวนต์ใดๆ ของ SDK ให้ใช้ตัวจัดการหลังจากที่ SDK โหลดแล้ว:

Pushwoosh.push(['onLoad', (api) => {
  function onEventNameHandler() {
    console.log('ทริกเกอร์อีเวนต์: event-name!');
  }

  // ในการสมัครรับอีเวนต์:
  Pushwoosh.addEventHandler('event-name', onEventNameHandler)

  // ในการยกเลิกการสมัครรับอีเวนต์:
  Pushwoosh.removeEventHandler('event-name', onEventNameHandler)
}]);

อีเวนต์ของ SDK

ทำงานหลังจากผู้ใช้ตกลงที่จะรับ push notifications

Pushwoosh.push(['onLoad', (api) => {
  Pushwoosh.addEventHandler('subscribe', (payload) => {
    console.log('ทริกเกอร์อีเวนต์: subscribe');
  });
}]);

อีเวนต์ Unsubscribe

ทำงานหลังจากอุปกรณ์ถูกยกเลิกการลงทะเบียนจากการแจ้งเตือน

Pushwoosh.push(['onLoad', (api) => {
  Pushwoosh.addEventHandler('unsubscribe', (payload) => {
    console.log('ทริกเกอร์อีเวนต์: unsubscribe');
  });
}]);

อีเวนต์ของวิดเจ็ตการสมัครรับข้อมูล

ติดตามการแสดงผลของวิดเจ็ต Subscription Prompt

Pushwoosh.push(['onLoad', (api) => {
  // ทำงานเมื่อแสดงวิดเจ็ต Subscription Prompt
  Pushwoosh.addEventHandler('show-subscription-widget', (payload) => {
    console.log('ทริกเกอร์อีเวนต์: show-subscription-widget');
  });

  // ทำงานเมื่อซ่อนวิดเจ็ต Subscription Prompt
  Pushwoosh.addEventHandler('hide-subscription-widget', (payload) => {
    console.log('ทริกเกอร์อีเวนต์: hide-subscription-widget');
  });
}]);

อีเวนต์ของไดอะล็อกขออนุญาตการแจ้งเตือน

ติดตามการแสดงผลของไดอะล็อกการสมัครรับข้อมูลแบบเนทีฟ

Pushwoosh.push(['onLoad', function (api) {
  // ทำงานเมื่อแสดงไดอะล็อกขออนุญาต
  Pushwoosh.addEventHandler('show-notification-permission-dialog', (payload) => {
    console.log('ทริกเกอร์อีเวนต์: show-notification-permission-dialog');
  });

  // ทำงานเมื่อซ่อนไดอะล็อกขออนุญาตด้วยหนึ่งในสามสถานะที่เป็นไปได้:
  // 1. default - ไดอะล็อกถูกปิด
  // 2. granted - ได้รับอนุญาตแล้ว
  // 3. denied - การอนุญาตถูกปฏิเสธ
  Pushwoosh.addEventHandler('hide-notification-permission-dialog', (payload) => {
    console.log('ทริกเกอร์อีเวนต์: hide-notification-permission-dialog', payload.permission);
  });
}]);

อีเวนต์การอนุญาต

ตรวจสอบสถานะการอนุญาต push notifications เมื่อเริ่มต้น SDK; ติดตามการอัปเดตสถานะนี้เมื่อใดก็ตามที่เกิดขึ้น

Pushwoosh.push(['onLoad', (api) => {
  // ทำงานระหว่างการเริ่มต้น SDK หาก 'autoSubscribe: false' และ/หรือหากผู้ใช้ไม่สนใจข้อความแจ้งเตือน push
  Pushwoosh.addEventHandler('permission-default', (payload) => {
    console.log('ทริกเกอร์อีเวนต์: permission-default');
  });

  // ทำงานระหว่างการเริ่มต้น SDK หากการแจ้งเตือนถูกบล็อก หรือเมื่อผู้ใช้บล็อก push notifications
  Pushwoosh.addEventHandler('permission-denied', (payload) => {
    console.log('ทริกเกอร์อีเวนต์: permission-denied');
  });

  // ทำงานระหว่างการเริ่มต้น SDK หากการแจ้งเตือนได้รับอนุญาต หรือเมื่อผู้ใช้เปิดใช้งาน push notifications
  Pushwoosh.addEventHandler('permission-granted', (payload) => {
    console.log('ทริกเกอร์อีเวนต์: permission-granted');
  });
}]);

อีเวนต์ Receive push

ติดตามการส่ง push ไปยังอุปกรณ์

Pushwoosh.push(['onLoad', (api) => {
  // ทำงานเมื่อ push notification แสดงขึ้น
  Pushwoosh.addEventHandler('receive-push', (payload) => {
    console.log('ทริกเกอร์อีเวนต์: receive-push', payload.notification);
  });
}]);

อีเวนต์การแจ้งเตือน

ติดตามว่า push notification ถูกเปิดหรือปิดโดยผู้ใช้

Pushwoosh.push(['onLoad', (api) => {
  // ทำงานเมื่อผู้ใช้คลิกที่การแจ้งเตือน
  Pushwoosh.addEventHandler('open-notification', (payload) => {
    console.log('ทริกเกอร์อีเวนต์: open-notification', payload.notification);
  });

  // ทำงานเมื่อผู้ใช้ปิด push notification
  Pushwoosh.addEventHandler('hide-notification', (payload) => {
    console.log('ทริกเกอร์อีเวนต์: hide-notification', payload.notification);
  });
}]);

อีเวนต์ของ Inbox

ติดตามการแจ้งเตือนที่ส่งไปยัง Inbox

Pushwoosh.push(['onLoad', (api) => {
  // ทำงานโดย ServiceWorker หลังจากได้รับข้อความ Inbox และบันทึกลงใน indexedDB
  Pushwoosh.addEventHandler('receive-inbox-message', (payload) => {
    console.log('ทริกเกอร์อีเวนต์: receive-inbox-message', payload.message);
  });

  // ทำงานหลังจาก Inbox ได้รับการอัปเดตโดยอัตโนมัติขณะที่กำลังโหลดหน้า
  Pushwoosh.addEventHandler('update-inbox-messages', (payload) => {
    console.log('ทริกเกอร์อีเวนต์: receive-inbox-message', payload.messages);
  });
}]);

อีเวนต์ป๊อปอัปการสมัครรับข้อมูลที่กำหนดเอง

สำหรับรายละเอียดเกี่ยวกับการจัดการอีเวนต์ป๊อปอัปการสมัครรับข้อมูลที่กำหนดเอง โปรดดูที่ คู่มืออีเวนต์ป๊อปอัปการสมัครรับข้อมูลที่กำหนดเอง

Pushwoosh.push(['onLoad', (api) => {
  // ทำงานเมื่อ web popups โหลดเสร็จและไปป์ไลน์การแสดงผลอัตโนมัติทำงานสำหรับหน้าปัจจุบัน
  Pushwoosh.addEventHandler('web-popups-ready', () => {
    console.log('ทริกเกอร์อีเวนต์: web-popups-ready');
  });

  // ทำงานเมื่อ web popup แสดงขึ้น ไม่ว่าจะโดยอัตโนมัติหรือผ่าน webPopups.show()
  Pushwoosh.addEventHandler('show-web-popup', (payload) => {
    console.log('ทริกเกอร์อีเวนต์: show-web-popup', payload.code, payload.trigger); // trigger: 'auto' | 'api'
  });

  // ทำงานเมื่อ web popup ถูกซ่อน
  Pushwoosh.addEventHandler('hide-web-popup', (payload) => {
    console.log('ทริกเกอร์อีเวนต์: hide-web-popup', payload.code, payload.reason); // reason: 'user' | 'api' | 'preempted'
  });
}]);

API

หลังจากที่ Web Push SDK เริ่มต้นทำงานแล้ว คุณสามารถเรียกใช้ Pushwoosh API ต่อไปนี้ได้ เมธอดทั้งหมดจะคืนค่าอ็อบเจกต์ Promise

Pushwoosh.push((api) => {
  // ตั้งค่า tags สำหรับผู้ใช้
  api.setTags({
    'Tag Name 1': 'value1',
    'Tag Name 2': 'value2'
  });

  // รับ tags สำหรับผู้ใช้จากเซิร์ฟเวอร์
  api.getTags();

  // ลงทะเบียน User ID
  api.registerUser('user123');

    // ลงทะเบียนอีเมลผู้ใช้
  api.registerEmail('user@example.com');

  // ลงทะเบียนหมายเลข SMS
  api.registerSmsNumber('+15551234567');

  // ลงทะเบียนหมายเลข WhatsApp
  api.registerWhatsappNumber('+1234567890');

  // โพสต์ Event
  api.postEvent('myEventName', {attributeName: 'attributeValue'});

  //ยกเลิกการลงทะเบียนจากการแจ้งเตือน
  api.unregisterDevice();

  // ตั้งค่าภาษาของอุปกรณ์ (จะเขียนทับค่าใน Tag "Language")
  api.setLanguage('es');

  // หรือลงทะเบียนผู้ใช้หลายรายการพร้อมอุปกรณ์และช่องทาง
  api.multiRegisterDevice({
    user_id: 'user123',
    email: 'user@example.com',
    sms_phone_number: '+1234567890',
    tags: {
      'UserType': { operation: TTagOperationSet, value: 'Premium' },
      'Interests': { operation: TTagOperationAppend, values: ['sports', 'technology'] }
    }
  });
});

multiRegisterDevice

เมธอดการลงทะเบียนที่ปรับปรุงใหม่ซึ่งช่วยให้สามารถลงทะเบียนโปรไฟล์ผู้ใช้กับอุปกรณ์และช่องทางการส่งข้อความหลายรายการได้ในการเรียก API เพียงครั้งเดียว เมธอดนี้มีประโยชน์อย่างยิ่งสำหรับแอปพลิเคชันข้ามแพลตฟอร์มหรือเมื่อใช้กลยุทธ์การส่งข้อความหลายช่องทาง

Pushwoosh.push((api) => {
  api.multiRegisterDevice({
    user_id: 'user123',              // ไม่บังคับ: ตัวระบุผู้ใช้
    email: 'user@example.com',       // ไม่บังคับ: อีเมลสำหรับการส่งข้อความทางอีเมล
    sms_phone_number: '+1234567890', // ไม่บังคับ: หมายเลขโทรศัพท์ SMS (รูปแบบ E.164)
    whatsapp_phone_number: '+1234567890', // ไม่บังคับ: หมายเลข WhatsApp (รูปแบบ E.164)
    kakao_phone_number: '+1234567890',    // ไม่บังคับ: หมายเลข KakaoTalk (รูปแบบ E.164)
    language: 'en',                  // ไม่บังคับ: รหัสภาษา (ISO 639-1)
    timezone: 'America/New_York',    // ไม่บังคับ: ตัวระบุเขตเวลา
    city: 'New York',               // ไม่บังคับ: เมืองสำหรับการกำหนดเป้าหมาย
    country: 'US',                  // ไม่บังคับ: ประเทศสำหรับการกำหนดเป้าหมาย
    state: 'NY',                    // ไม่บังคับ: รัฐสำหรับการกำหนดเป้าหมาย
    tags: {                         // ไม่บังคับ: ค่า Tag พร้อมการดำเนินการ
      'UserType': {
        operation: TTagOperationSet,     // ตั้งค่า Tag (0)
        value: 'Premium'
      },
      'Interests': {
        operation: TTagOperationAppend,  // เพิ่มค่าใน Tag (1)
        values: ['sports', 'technology']
      },
      'LoginCount': {
        operation: TTagOperationIncrement, // เพิ่มค่า Tag (3)
        value: '1'
      }
    },
    push_devices: [                 // ไม่บังคับ: อาร์เรย์ของอุปกรณ์ push
      {
        hwid: 'web-device-456',
        platform: TPlatformChrome, // แพลตฟอร์ม Chrome (11)
        push_token: 'fcm-token-here',
        app_version: '2.1.0',
        platformData: {
          public_key: 'web-push-public-key',
          auth_token: 'web-push-auth-token',
          browser: 'chrome'
        }
      }
    ]
  })
  .then((response) => {
    console.log('การลงทะเบียนหลายรายการสำเร็จ:', response);
  })
  .catch((error) => {
    console.error('การลงทะเบียนหลายรายการล้มเหลว:', error);
  });
});

ประเภทแพลตฟอร์ม:

TPlatformSafari (10): แพลตฟอร์ม Safari
TPlatformChrome (11): แพลตฟอร์ม Chrome
TPlatformFirefox (12): แพลตฟอร์ม Firefox

ประเภทการดำเนินการของ Tag:

TTagOperationSet (0): ตั้งค่า Tag (แทนที่ค่าที่มีอยู่)
TTagOperationAppend (1): เพิ่มค่าใน Tag (เพิ่มในรายการ)
TTagOperationRemove (2): ลบค่า Tag (ลบออกจากรายการ)
TTagOperationIncrement (3): เพิ่มค่า Tag (เพิ่มค่าตัวเลข)

ประโยชน์:

การเรียก API เพียงครั้งเดียว: ลงทะเบียนอุปกรณ์และช่องทางหลายรายการพร้อมกัน
การดำเนินการแบบอะตอม: การลงทะเบียนทั้งหมดจะสำเร็จหรือล้มเหลวพร้อมกัน
เน้นผู้ใช้เป็นศูนย์กลาง: เชื่อมโยงอุปกรณ์ทั้งหมดกับโปรไฟล์ผู้ใช้เดียว
การแท็กขั้นสูง: รองรับการดำเนินการแท็กที่ซับซ้อน
ข้ามแพลตฟอร์ม: จัดการหลายแพลตฟอร์มพร้อมกัน

ตัวอย่างการส่ง Tags ไปยัง Pushwoosh:

Pushwoosh.push((api) => {
  var myCustomTags = {
    'Tag 1': 123,
    'Tag 2': 'some string'
  };
  api.setTags(myCustomTags)
    .then((res) => {
      var skipped = res && res.skipped || [];
      if (!skipped.length) {
        console.log('สำเร็จ');
      }
      else {
        console.warn('ข้าม tags:', skipped);
      }
    })
    .catch((err) => {
      console.error('เกิดข้อผิดพลาด setTags:', err);
    });
});

เพิ่มค่า Tag

ในการเพิ่มค่าของ Number Tag ให้ใช้พารามิเตอร์ operation ที่มีค่า ‘increment’ ดังนี้:

Pushwoosh.push((api) => {
  api.setTags({
    'Tag 1': {
      operation: 'increment',
      value: 1
    }
  })
});

เพิ่มค่า Tag

ในการเพิ่มค่าใหม่ไปยัง List Tag ที่มีอยู่ ให้ใช้พารามิเตอร์ operation ที่มีค่า ‘append’ ดังนี้:

Pushwoosh.push((api) => {
  api.setTags({
    'Tag 3': {
      operation: 'append',
      value: ['Value3']
    }
  })
});

ลบค่า Tag

ในการลบค่าออกจาก List Tag ให้ใช้พารามิเตอร์ operation ที่มีค่า ‘remove’ ดังนี้:

Pushwoosh.push((api) =>{
  api.setTags({
    'Tag 3': {
      operation: 'remove',
      value: ['Value2']
    }
  })
});

เมธอดสาธารณะ

Pushwoosh.subscribe()

เมธอดนี้ใช้เพื่อขออนุญาตจากผู้ใช้สำหรับ push notifications หากผู้ใช้สมัครรับข้อมูลแล้ว เมธอดจะหยุดทำงาน

หากผู้ใช้ยังไม่ได้สมัครรับ push:

ขออนุญาตสำหรับ push notifications

หากผู้ใช้อนุญาตการแจ้งเตือน อีเวนต์ onSubscribe จะถูกทริกเกอร์

Pushwoosh.subscribe() จะทำงานโดยอัตโนมัติหากตั้งค่า autoSubscribe: true ระหว่างการเริ่มต้น SDK

เรียกใช้เมธอดนี้หากคุณเลือกที่จะแจ้งให้ผู้ใช้สมัครรับ push ด้วยตนเองโดยใช้พารามิเตอร์ autoSubscribe: false ระหว่างการเริ่มต้น:

<button onclick="Pushwoosh.subscribe()">Subscribe</button>
<script>
  Pushwoosh.push(['onSubscribe', (api) => {
    console.log('ผู้ใช้สมัครรับข้อมูลสำเร็จ');
  }]);
</script>

Pushwoosh.unsubscribe()

เมธอด /unregisterDevice จะทำงาน
อีเวนต์ onUnsubscribe จะถูกทริกเกอร์

<button onclick="Pushwoosh.unsubscribe()">Unsubscribe</button>
<script type="text/javascript">
  Pushwoosh.push(['onUnsubscribe', (api) => {
    console.log('ผู้ใช้ยกเลิกการสมัครรับข้อมูลสำเร็จ');
  }]);
</script>

Pushwoosh.isSubscribed()

ตรวจสอบว่าผู้ใช้สมัครรับข้อมูลหรือไม่ และคืนค่าแฟล็ก true/false

Pushwoosh.isSubscribed().then((isSubscribed) => {
  console.log('isSubscribed', isSubscribed);
});

Pushwoosh.getHWID()

คืนค่า Pushwoosh HWID

Pushwoosh.getHWID().then((hwid) => {
  console.log('hwid:', hwid);
});

Pushwoosh.getPushToken()

คืนค่า push token หากมี

Pushwoosh.getPushToken().then((pushToken) => {
  console.log('pushToken:', pushToken);
});

Pushwoosh.getUserId()

คืนค่า User ID หากมี

Pushwoosh.getUserId().then((userId) => {
  console.log('userId:', userId);
});

Pushwoosh.getParams()

คืนค่ารายการพารามิเตอร์ต่อไปนี้:

Pushwoosh.getParams().then((params) => {
  params = params || {};
  var hwid = params.hwid;
  var pushToken = params.pushToken;
  var userId = params.userId;
});

Pushwoosh.isAvailableNotifications()

ตรวจสอบว่าเบราว์เซอร์รองรับ Pushwoosh WebSDK 3.0 หรือไม่ คืนค่า ‘true’ หรือ ‘false’

Pushwoosh.isAvailableNotifications() // true/false

เมธอด InboxMessages

messagesWithNoActionPerformedCount(): Promise<number>

คืนค่าจำนวนข้อความที่เปิดแล้ว

Pushwoosh.pwinbox.messagesWithNoActionPerformedCount()
  .then((count) => {
    console.log(`เปิดข้อความแล้ว ${count} ข้อความ`);
  });

unreadMessagesCount()

คืนค่าจำนวนข้อความที่ยังไม่ได้อ่าน

Pushwoosh.pwinbox.unreadMessagesCount()
  .then((count) => {
    console.log(`ข้อความที่ยังไม่ได้อ่าน ${count} ข้อความ`);
  });

messagesCount(): Promise<number>

คืนค่าจำนวนข้อความทั้งหมด

Pushwoosh.pwinbox.messagesCount()
  .then((count) => {
    console.log(`${count} ข้อความ`);
  });

loadMessages(): Promise<Array>

โหลดรายการข้อความที่ยังไม่ได้ลบ

Pushwoosh.pwinbox.loadMessages()
  .then(() => {
    console.log('โหลดข้อความแล้ว');
  });

readMessagesWithCodes(codes: Array<string>): Promise<void>

ทำเครื่องหมายข้อความว่าอ่านแล้วโดยใช้ Inbox_Ids

Pushwoosh.pwinbox.readMessagesWithCodes(codes)
  .then(() => {
    console.log('อ่านข้อความแล้ว');
  });

performActionForMessageWithCode(code: string): Promise<void>

ดำเนินการที่กำหนดให้กับข้อความและทำเครื่องหมายข้อความว่าอ่านแล้ว

Pushwoosh.pwinbox.performActionForMessageWithCode(code)
  .then(() => {
    console.log('ดำเนินการแล้ว');
  });

deleteMessagesWithCodes(codes: Array<string>): Promise<void>

ทำเครื่องหมายข้อความว่าลบแล้ว

Pushwoosh.pwinbox.deleteMessagesWithCodes([code])
  .then(() => {
    console.log('ลบข้อความแล้ว');
  });

syncMessages(): Promise<void>

ซิงโครไนซ์ข้อความกับเซิร์ฟเวอร์

Pushwoosh.pwinbox.syncMessages()
  .then(() => {
    console.log('ซิงโครไนซ์ข้อความแล้ว');
  });

เมธอด WebPopups

API Web popups แบบโปรแกรมต้องมี webPopups: {enable: true} ในอ็อบเจกต์ init; สามารถใช้งานได้ผ่าน Pushwoosh.moduleRegistry.webPopups เมื่ออีเวนต์ web-popups-ready ทำงานแล้ว

show(code: string): Promise<boolean>

แสดงป๊อปอัปทันที โดยข้ามเงื่อนไขการแสดงผลทั้งหมด (การหน่วงเวลา, กฎของหน้า, ประเภทอุปกรณ์/ผู้เข้าชม, การจำกัดความถี่, ประเภททริกเกอร์) ปิดป๊อปอัปที่มองเห็นอยู่แล้วเพื่อให้มีที่ว่าง คืนค่า false แทนที่จะปฏิเสธเมื่อไม่สามารถแสดงป๊อปอัปได้

Pushwoosh.moduleRegistry.webPopups.show('popup_code')
  .then((shown) => console.log('แสดงป๊อปอัปแล้ว:', shown));

hide(code?: string): boolean

ซ่อนป๊อปอัปที่มองเห็นอยู่ หากมีการส่ง code จะซ่อนเฉพาะเมื่อตรงกับป๊อปอัปที่มองเห็นอยู่ คืนค่า false หากไม่มีอะไรถูกซ่อน

Pushwoosh.moduleRegistry.webPopups.hide();

hideAll(): boolean

ซ่อนป๊อปอัปที่มองเห็นอยู่และยกเลิกทุกอย่างที่ยังค้างอยู่สำหรับการโหลดหน้าปัจจุบัน show() ยังคงทำงานต่อไป

Pushwoosh.moduleRegistry.webPopups.hideAll();

isVisible(code?: string): boolean

ตรวจสอบว่าป๊อปอัปกำลังมองเห็นอยู่หรือไม่ หากไม่มี code จะตรวจสอบว่ามีป๊อปอัปใดๆ มองเห็นอยู่หรือไม่

Pushwoosh.moduleRegistry.webPopups.isVisible('popup_code');

getVisibleCode(): string | null

คืนค่ารหัสของป๊อปอัปที่แสดงบนหน้าจอในปัจจุบัน หรือ null หากไม่มีป๊อปอัปใดๆ มองเห็นอยู่

Pushwoosh.moduleRegistry.webPopups.getVisibleCode();

getAvailableCodes(): Array<string>

คืนค่ารหัสของป๊อปอัปทุกตัวที่เซิร์ฟเวอร์ส่งคืนสำหรับอุปกรณ์นี้

Pushwoosh.moduleRegistry.webPopups.getAvailableCodes();

getState(): object

คืนค่าสแนปชอตของสถานะ Web popup: visible (รหัสบนหน้าจอ หรือ null), queued (รหัสที่รอช่องแสดงผล), waiting (รหัสที่มีตัวจับเวลาหน่วงเวลาที่ทำงานอยู่) และ available (ทุกรหัสที่เซิร์ฟเวอร์ส่งคืน)

Pushwoosh.moduleRegistry.webPopups.getState();

การรองรับ Progressive Web App

ในการผสานรวม Pushwoosh เข้ากับ Progressive Web Application (PWA) ของคุณ ให้ทำตามขั้นตอนที่อธิบายไว้ด้านล่าง

1. คัดลอกพาธไปยังไฟล์ Service Worker ของคุณ:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js') // <- URL ของ service worker ของคุณ
  });
}

จากนั้น ใช้พารามิเตอร์ serviceWorkerUrl ขณะเริ่มต้น WebSDK ดังนี้:

var Pushwoosh = Pushwoosh || [];
Pushwoosh.push(['init', {
  logLevel: 'error',
  applicationCode: 'XXXXX-XXXXX',
  safariWebsitePushID: 'web.com.example.domain',
  defaultNotificationTitle: 'Pushwoosh',
  defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
  serviceWorkerUrl: '/service-worker.js', // <- URL ของ service worker ของคุณ
}]);

WebSDK ไม่ได้ลงทะเบียน Service Worker ใหม่ทันที; Service Worker จะถูกลงทะเบียนเมื่อจำเป็น:

เมื่ออุปกรณ์ได้รับ push token (ในการลงทะเบียนอุปกรณ์หรือการสมัครรับข้อมูลใหม่)
เมื่อ push token ถูกลบ (ในการลบอุปกรณ์ออกจากฐานผู้ใช้)

ซึ่งจะช่วยให้หน้าเว็บของคุณโหลดเร็วขึ้นโดยลดจำนวนคำขอไปยังเซิร์ฟเวอร์

เบราว์เซอร์ไม่อนุญาตให้ลงทะเบียน Service Worker สองตัวที่แตกต่างกันในเวลาเดียวกัน (อ่านเพิ่มเติม: https://github.com/w3c/ServiceWorker/issues/921) ดังนั้นเพื่อให้ PWA ของคุณทำงานได้อย่างถูกต้อง ควรลงทะเบียน Service Worker ร่วมกันสำหรับโค้ดเบสของคุณและโค้ดเบสของ Pushwoosh

2. เพิ่มสตริงต่อไปนี้ไปยัง Service Worker ของคุณ (ที่จุดเริ่มต้นหรือจุดสิ้นสุด ไม่สำคัญ):

importScripts('https://cdn.pushwoosh.com/webpush/v3/pushwoosh-service-worker.js' + self.location.search);

ดังนั้นคุณจึงเปิดใช้งานการรับและประมวลผล push notifications ที่ส่งผ่านบริการของ Pushwoosh สำหรับ Service Worker ของคุณ

การติดตั้งจาก Google Tag Manager

ใช้โค้ดต่อไปนี้ใน Google Tag Manager ของคุณเพื่อเริ่มต้น Pushwoosh SDK สร้าง Custom HTML Tag และวางโค้ดด้านล่าง ตรวจสอบให้แน่ใจว่าได้เปลี่ยน Pushwoosh Application Code, Safari Website ID และ URL รูปภาพการแจ้งเตือนเริ่มต้นของคุณ
นอกจากนี้ให้ตั้งค่าลำดับความสำคัญของ Tag Firing ให้สูง (เช่น 100) และทริกเกอร์บน All Pages ดูภาพหน้าจอด้านล่างคัดลอก

<script type="text/javascript" src="//cdn.pushwoosh.com/webpush/v3/pushwoosh-web-notifications.js" async></script>
<script type="text/javascript">
  var Pushwoosh = Pushwoosh || [];
  Pushwoosh.push(['init', {
    logLevel: 'error',
    applicationCode: 'XXXXX-XXXXX',
    safariWebsitePushID: 'web.com.example.domain',
    defaultNotificationTitle: 'Pushwoosh',
    defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
    autoSubscribe: true,
    subscribeWidget: {
      enable: false
    },
    userId: 'user_id'
  }]);
</script>

Web push SDK 3.0

การผสานรวม

รับ Pushwoosh Web Push SDK และแตกไฟล์ คุณควรมีไฟล์ต่อไปนี้:

วางไฟล์ทั้งหมดนี้ไว้ที่ไดเรกทอรีราก (root) ระดับบนสุดของเว็บไซต์ของคุณ

เริ่มต้นการทำงานของ SDK:

Web popups

ปุ่มสมัครรับ Push

การกำหนดค่า

การลงทะเบียน service worker ในขอบเขตที่แตกต่างกัน

ตัวจัดการอีเวนต์

อีเวนต์ของ SDK

อีเวนต์ Subscribe

อีเวนต์ Unsubscribe

อีเวนต์ของวิดเจ็ตการสมัครรับข้อมูล

อีเวนต์ของไดอะล็อกขออนุญาตการแจ้งเตือน

อีเวนต์การอนุญาต

อีเวนต์ Receive push

อีเวนต์การแจ้งเตือน

อีเวนต์ของ Inbox

อีเวนต์ป๊อปอัปการสมัครรับข้อมูลที่กำหนดเอง

อีเวนต์ Web popup

API

multiRegisterDevice

เพิ่มค่า Tag

เพิ่มค่า Tag

ลบค่า Tag

เมธอดสาธารณะ

เมธอด InboxMessages

เมธอด WebPopups

การรองรับ Progressive Web App

การติดตั้งจาก Google Tag Manager