Web push SDK 3.0

การผสานรวม

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

pushwoosh-service-worker.js

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

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

รวม SDK จาก CDN ของเราแบบ asynchronously

<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', // possible values: error, info, debug
    applicationCode: 'XXXXX-XXXXX', // you application code from Pushwoosh Control Panel
    apiToken: 'XXXXXXX', //  Device API Token
    safariWebsitePushID: 'web.com.example.domain', //  unique reverse-domain string, obtained in you Apple Developer Portal. Only needed if you send push notifications to Safari browser
    defaultNotificationTitle: 'Pushwoosh', // sets a default title for push notifications
    defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png', // URL to custom custom notification image
    autoSubscribe: false, // or true. If true, prompts a user to subscribe for pushes upon SDK initialization
    subscribeWidget: {
      enable: true
    },
    userId: 'user_id', // optional, set custom user ID
    tags: {
        'Name': 'John Smith'     // optional, set custom Tags
    }
}]);
</script>

ป๊อปอัปเว็บ (Web popups)

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

webPopups: {
  enable: true,
  autoShow: true, // optional, set to false to load popups without displaying them automatically — see WebPopups methods below
},

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

สำหรับการควบคุมผ่านโปรแกรม โปรดดูที่ เมธอด WebPopups และ เหตุการณ์ป๊อปอัปเว็บ

ปุ่มสมัครรับการแจ้งเตือนแบบพุช

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

การกำหนดค่า

เพื่อให้การใช้งานการแจ้งเตือนแบบพุชในเว็บไซต์ของคุณเสร็จสมบูรณ์ คุณต้องกำหนดค่าแพลตฟอร์มเว็บใน 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

ตัวจัดการเหตุการณ์ (Event handlers)

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

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

// Load Event
Pushwoosh.push(['onLoad', (api) => {
  console.log('Pushwoosh load!');
}]);

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

// Ready Event
Pushwoosh.push((api) => {
  console.log('Pushwoosh ready!');
});

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

Pushwoosh.push(['onLoad', (api) => {
  function onEventNameHandler() {
    console.log('Triggered event: event-name!');
  }

  // To subscribe to an event:
  Pushwoosh.addEventHandler('event-name', onEventNameHandler)

  // To unsubscribe from an event:
  Pushwoosh.removeEventHandler('event-name', onEventNameHandler)
}]);

เหตุการณ์ SDK

ทำงานหลังจากที่ผู้ใช้ตกลงที่จะรับการแจ้งเตือนแบบพุช

Pushwoosh.push(['onLoad', (api) => {
  Pushwoosh.addEventHandler('subscribe', (payload) => {
    console.log('Triggered event: subscribe');
  });
}]);

เหตุการณ์ Unsubscribe

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

Pushwoosh.push(['onLoad', (api) => {
  Pushwoosh.addEventHandler('unsubscribe', (payload) => {
    console.log('Triggered event: unsubscribe');
  });
}]);

เหตุการณ์วิดเจ็ตการสมัครสมาชิก

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

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

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

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

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

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

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

เหตุการณ์การอนุญาต (Permission)

ตรวจสอบสถานะการอนุญาตการแจ้งเตือนแบบพุชเมื่อเริ่มต้น SDK; ติดตามการอัปเดตสถานะนี้ทุกครั้งที่เกิดขึ้น

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

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

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

เหตุการณ์ Receive push

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

Pushwoosh.push(['onLoad', (api) => {
  // ทำงานเมื่อมีการแสดงการแจ้งเตือนแบบพุช
  Pushwoosh.addEventHandler('receive-push', (payload) => {
    console.log('Triggered event: receive-push', payload.notification);
  });
}]);

เหตุการณ์การแจ้งเตือน

ติดตามว่าการแจ้งเตือนแบบพุชถูกเปิดหรือปิดโดยผู้ใช้

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

  // ทำงานเมื่อผู้ใช้ปิดการแจ้งเตือนแบบพุช
  Pushwoosh.addEventHandler('hide-notification', (payload) => {
    console.log('Triggered event: hide-notification', payload.notification);
  });
}]);

เหตุการณ์ Inbox

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

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

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

เหตุการณ์ป๊อปอัปการสมัครสมาชิกแบบกำหนดเอง

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

เหตุการณ์ป๊อปอัปเว็บ

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

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

  // ทำงานเมื่อป๊อปอัปเว็บถูกซ่อน
  Pushwoosh.addEventHandler('hide-web-popup', (payload) => {
    console.log('Triggered event: hide-web-popup', payload.code, payload.reason); // reason: 'user' | 'api' | 'preempted'
  });
}]);

API

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

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

  // รับแท็กสำหรับผู้ใช้จากเซิร์ฟเวอร์
  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();

  // ตั้งค่าภาษาของอุปกรณ์ (จะเขียนทับค่าในแท็ก "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 เพียงครั้งเดียว เมธอดนี้มีประโยชน์อย่างยิ่งสำหรับแอปพลิเคชันข้ามแพลตฟอร์มหรือเมื่อใช้กลยุทธ์การส่งข้อความแบบหลายช่องทาง (omnichannel)

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: {                         // ไม่บังคับ: ค่าแท็กพร้อมการดำเนินการ
      'UserType': {
        operation: TTagOperationSet,     // ตั้งค่าแท็ก (0)
        value: 'Premium'
      },
      'Interests': {
        operation: TTagOperationAppend,  // เพิ่มค่าในแท็ก (1)
        values: ['sports', 'technology']
      },
      'LoginCount': {
        operation: TTagOperationIncrement, // เพิ่มค่าแท็ก (3)
        value: '1'
      }
    },
    push_devices: [                 // ไม่บังคับ: อาร์เรย์ของอุปกรณ์พุช
      {
        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('Multi-registration successful:', response);
  })
  .catch((error) => {
    console.error('Multi-registration failed:', error);
  });
});

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

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

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

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

ประโยชน์:

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

ตัวอย่างการส่งแท็กไปยัง 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('success');
      }
      else {
        console.warn('skipped tags:', skipped);
      }
    })
    .catch((err) => {
      console.error('setTags error:', err);
    });
});

เพิ่มค่าแท็ก

เพื่อเพิ่มค่าของแท็กตัวเลข ให้ใช้พารามิเตอร์ operation พร้อมกับค่า ‘increment’ ดังนี้:

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

เพิ่มค่าแท็ก

เพื่อเพิ่มค่าใหม่ลงในแท็กรายการที่มีอยู่ ให้ใช้พารามิเตอร์ operation พร้อมกับค่า ‘append’ ดังนี้:

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

ลบค่าแท็ก

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

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

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

Pushwoosh.subscribe()

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

หากผู้ใช้ยังไม่ได้สมัครรับการแจ้งเตือนแบบพุช:

1. จะมีการขออนุญาตสำหรับการแจ้งเตือนแบบพุช

2. หากผู้ใช้อนุญาตการแจ้งเตือน เหตุการณ์ onSubscribe จะถูกเรียกใช้

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

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

<button onclick="Pushwoosh.subscribe()">Subscribe</button>
<script>
  Pushwoosh.push(['onSubscribe', (api) => {
    console.log('User successfully subscribed');
  }]);
</script>

Pushwoosh.unsubscribe()

เมธอด /unregisterDevice จะทำงาน
เหตุการณ์ onUnsubscribe จะถูกเรียกใช้

<button onclick="Pushwoosh.unsubscribe()">Unsubscribe</button>
<script type="text/javascript">
  Pushwoosh.push(['onUnsubscribe', (api) => {
    console.log('User successfully unsubscribed');
  }]);
</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} messages opened`);
  });

unreadMessagesCount()

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

Pushwoosh.pwinbox.unreadMessagesCount()
  .then((count) => {
    console.log(`${count} messages unread`);
  });

messagesCount(): Promise<number>

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

Pushwoosh.pwinbox.messagesCount()
  .then((count) => {
    console.log(`${count} messages`);
  });

loadMessages(): Promise<Array>

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

Pushwoosh.pwinbox.loadMessages()
  .then(() => {
    console.log('Messages have been loaded');
  });

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

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

Pushwoosh.pwinbox.readMessagesWithCodes(codes)
  .then(() => {
    console.log('Messages have been read');
  });

performActionForMessageWithCode(code: string): Promise<void>

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

Pushwoosh.pwinbox.performActionForMessageWithCode(code)
  .then(() => {
    console.log('Action has been performed');
  });

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

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

Pushwoosh.pwinbox.deleteMessagesWithCodes([code])
  .then(() => {
    console.log('Messages have been deleted');
  });

syncMessages(): Promise<void>

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

Pushwoosh.pwinbox.syncMessages()
  .then(() => {
    console.log('Messages have been synchronized');
  });

เมธอด 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('Popup shown:', 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

คืนค่าสแนปชอตของสถานะป๊อปอัปเว็บ: 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') // <- your service worker url
  });
}

จากนั้น ใช้พารามิเตอร์ 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', // <- your service worker url
}]);

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);

ดังนั้นคุณจึงเปิดใช้งานการรับและประมวลผลการแจ้งเตือนแบบพุชที่ส่งผ่านบริการของ 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)

ปุ่มสมัครรับการแจ้งเตือนแบบพุช

การกำหนดค่า

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

ตัวจัดการเหตุการณ์ (Event handlers)

เหตุการณ์ SDK

เหตุการณ์ Subscribe

เหตุการณ์ Unsubscribe

เหตุการณ์วิดเจ็ตการสมัครสมาชิก

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

เหตุการณ์การอนุญาต (Permission)

เหตุการณ์ Receive push

เหตุการณ์การแจ้งเตือน

เหตุการณ์ Inbox

เหตุการณ์ป๊อปอัปการสมัครสมาชิกแบบกำหนดเอง

เหตุการณ์ป๊อปอัปเว็บ

API

multiRegisterDevice

เพิ่มค่าแท็ก

เพิ่มค่าแท็ก

ลบค่าแท็ก

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

เมธอด InboxMessages

เมธอด WebPopups

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

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