คู่มือการผสานรวม

คำอธิบายการสนับสนุนสำหรับผู้ใช้ต่างประเทศในแต่ละช่องทาง

ประเภทช่องทาง ผู้ใช้ในภูมิภาคอื่น ผู้ใช้ในจีนแผ่นดินใหญ่ หมายเหตุ
EngageLab สนับสนุน สนับสนุน รองรับโดย SDK ตามค่าเริ่มต้น
W3C สนับสนุน สนับสนุน /

การทดสอบอย่างรวดเร็ว

https://webpush-demo.engagelab.com/

การเตรียมการก่อนการผสานรวม

  1. เตรียมชื่อโดเมนสำหรับบริการเว็บ HTTPS ที่สามารถเข้าถึงได้ซึ่งจะใช้สำหรับการทดสอบและการดีบัก Web push ไม่รองรับการดีบักในเครื่องหรือการทำงานภายใต้โปรโตคอลที่ไม่ใช่ HTTPS
  2. เข้าชม https://www.engagelab.com/console/web-push ตั้งค่าโดเมนเว็บไซต์ในการตั้งค่าผสานรวม -> web และกรอกชื่อโดเมนของบริการเว็บ HTTPS ที่เตรียมไว้
    !https://res.theengagelab.com/docs/yuque/0/2022/png/21462352/1669691177405-6d90eef1-0f71-43a6-bfaf-56f84bf26056.png

เคล็ดลับ

บทความนี้เป็นเอกสารคู่มือมาตรฐานสำหรับการผสานรวม MTpush Web SDK

คำอธิบาย

Web SDK ให้เฟรมเวิร์กการพัฒนา push สำหรับแอปพลิเคชันเว็บโดยใช้การแจ้งเตือนของเคอร์เนลเบราว์เซอร์และ websocket และให้อินเทอร์เฟซ API ที่เรียบง่ายเพื่อให้แอปพลิเคชันของบุคคลที่สามสามารถผสานรวมฟังก์ชัน push ได้อย่างรวดเร็ว การแจ้งเตือนของเคอร์เนลเบราว์เซอร์รองรับเบราว์เซอร์หลักเช่น Edge, Chrome, Safari, Firefox, Opera และ websocket รองรับเบราว์เซอร์หลักส่วนใหญ่

บริการ EngageLab WebPush รองรับการแจ้งเตือนแบบพุชของ PWA คุณจำเป็นต้องใช้ Web SDK ที่จัดเตรียมโดย EngageLab WebPush เพื่อผสานรวมฟังก์ชัน Web Push เข้ากับแอปพลิเคชัน PWA ของคุณ และปฏิบัติตามตัวอย่างโค้ดที่ให้ไว้ในเอกสารเพื่อทำการลงทะเบียน Service Worker และเริ่มต้นฟังก์ชัน Web Push เมื่อการผสานรวมเสร็จสมบูรณ์ คุณสามารถใช้ EngageLab WebPush API เพื่อส่งการแจ้งเตือนไปยังผู้ใช้แอปพลิเคชัน PWA ของคุณได้
ดูรายละเอียดในเอกสาร

สถานการณ์หลัก:

การแจ้งเตือนและข้อความที่กำหนดเอง

เนื้อหาของไฟล์บีบอัดที่ผสานรวม

  • example
    • นี่คือหน้าเว็บที่สาธิตการใช้งานพื้นฐานของ SDK MTpush สามารถใช้เป็นตัวอย่างได้

การรับข้อมูลแอปพลิเคชัน

สร้างแอปพลิเคชันในคอนโซล หลังจากสร้างแอปพลิเคชันแล้ว จะมีการสร้าง AppKey โดยอัตโนมัติเพื่อระบุแอปพลิเคชัน สำหรับข้อมูลเพิ่มเติม โปรดดูที่ /th_TH/docs/web-push/console/basic-settings

การผสานรวม SDK

เข้าชม https://www.engagelab.com/console และดาวน์โหลด SDK กำหนดค่าไฟล์ js ของ SDK ดังนี้ในหน้าเว็บ:

<script type="text/javascript" src="./webPushSdk.min.2.1.2.js"></script>
              
              <script type="text/javascript" src="./webPushSdk.min.2.1.2.js"></script>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

หลังจากผสานรวมไฟล์ js ของ SDK แล้ว สามารถใช้ออบเจ็กต์ MTpushInterface บน Window ได้

เคล็ดลับ

แพ็คเกจรวมไฟล์ sw.xxx.js ไฟล์นี้เป็นไฟล์ service worker และใช้สำหรับรับข้อความ SDK จะโหลดไฟล์นี้จากไดเรกทอรีรูทโดยค่าเริ่มต้น ขอบเขตสูงสุดของ service worker คือตำแหน่งของ worker (กล่าวคือ หากสคริปต์ sw.js อยู่ใน /js/sw.js จะสามารถควบคุม URL ภายใต้ /js/ ได้โดยค่าเริ่มต้น) ดังนั้นควรใช้การกำหนดค่าเริ่มต้นและวางไว้ในไดเรกทอรีรูทของเว็บไซต์ หากมีสถานการณ์พิเศษและเก็บไว้ใน CDN ของบุคคลที่สาม โปรดใช้ส่วนหัว Service-Worker-Allowed บนเซิร์ฟเวอร์เพื่อระบุขอบเขตสูงสุดของ worker
              
              แพ็คเกจรวมไฟล์ sw.xxx.js ไฟล์นี้เป็นไฟล์ service worker และใช้สำหรับรับข้อความ
SDK จะโหลดไฟล์นี้จากไดเรกทอรีรูทโดยค่าเริ่มต้น
ขอบเขตสูงสุดของ service worker คือตำแหน่งของ worker (กล่าวคือ หากสคริปต์ sw.js อยู่ใน /js/sw.js จะสามารถควบคุม URL ภายใต้ /js/ ได้โดยค่าเริ่มต้น)
ดังนั้นควรใช้การกำหนดค่าเริ่มต้นและวางไว้ในไดเรกทอรีรูทของเว็บไซต์
หากมีสถานการณ์พิเศษและเก็บไว้ใน CDN ของบุคคลที่สาม โปรดใช้ส่วนหัว Service-Worker-Allowed บนเซิร์ฟเวอร์เพื่อระบุขอบเขตสูงสุดของ worker

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

การเริ่มต้น SDK

สร้าง user_str

แนะนำให้ใช้ลายนิ้วมือเบราว์เซอร์เพื่อสร้าง user_str ที่ไม่ซ้ำกันเพื่อป้องกันการลงทะเบียนผู้ใช้ที่ไม่ถูกต้อง:

// ละเว้น: รหัสการเก็บรวบรวมลายนิ้วมือ Canvas, WebGL และปลั๊กอิน (ไม่เปลี่ยนแปลง) const visitorId = getFingerprint(); console.log('user_str', visitorId);
              
              // ละเว้น: รหัสการเก็บรวบรวมลายนิ้วมือ Canvas, WebGL และปลั๊กอิน (ไม่เปลี่ยนแปลง)
const visitorId = getFingerprint();
console.log('user_str', visitorId);

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

ตัวอย่างโค้ด

// Register event listeners before initialization. // Callback when the Aurora channel disconnects. MTpushInterface.mtPush.onDisconnect(function () { console.log("onDisconnect"); }); // Receive push messages (Web Push and browser vendor channels). MTpushInterface.onMsgReceive((msgData) => { // msgData structure: { data: { xxx }, type: 0 }; type 0 is the Aurora channel, and type 1 is the system channel. console.log("Received push message:", msgData); }); function initWebPush() { const appkey = "your_appkey"; const userStr = visitorId; if (!(appkey && userStr)) { console.log("appkey and user_str cannot be empty"); return; } // Push initialization. MTpushInterface.init({ appkey: appkey, user_str: userStr, fail(data) { console.log("Online push setup failed", data); }, success(data) { console.log("Online push setup successful", data); }, webPushcallback(code, tip) { console.log("Status code and message", code, tip); }, canGetInfo(data) { // RegId is available here, and initialization config data can also be read from data. console.log("Initialization config", data); console.log("Obtained RegId", MTpushInterface.getRegistrationID()); }, custom: (requestPermission) => { // For custom prompt settings, call requestPermission during an appropriate user action to request notification permission. document.getElementById("subscribe")?.addEventListener("click", () => { if (Notification.permission === "default") { requestPermission(); } else if (Notification.permission === "denied") { console.log("Notification permission is denied and cannot be requested"); } else { console.log("Notification permission has already been granted"); } }); }, }); } initWebPush();
              
                // Register event listeners before initialization.
  // Callback when the Aurora channel disconnects.
  MTpushInterface.mtPush.onDisconnect(function () {
    console.log("onDisconnect");
  });

  // Receive push messages (Web Push and browser vendor channels).
  MTpushInterface.onMsgReceive((msgData) => {
    // msgData structure: { data: { xxx }, type: 0 }; type 0 is the Aurora channel, and type 1 is the system channel.
    console.log("Received push message:", msgData);
  });

  function initWebPush() {
    const appkey = "your_appkey";
    const userStr = visitorId;

    if (!(appkey && userStr)) {
      console.log("appkey and user_str cannot be empty");
      return;
    }

    // Push initialization.
    MTpushInterface.init({
      appkey: appkey,
      user_str: userStr,
      fail(data) {
        console.log("Online push setup failed", data);
      },
      success(data) {
        console.log("Online push setup successful", data);
      },
      webPushcallback(code, tip) {
        console.log("Status code and message", code, tip);
      },
      canGetInfo(data) {
        // RegId is available here, and initialization config data can also be read from data.
        console.log("Initialization config", data);
        console.log("Obtained RegId", MTpushInterface.getRegistrationID());
      },
      custom: (requestPermission) => {
        // For custom prompt settings, call requestPermission during an appropriate user action to request notification permission.
        document.getElementById("subscribe")?.addEventListener("click", () => {
          if (Notification.permission === "default") {
            requestPermission();
          } else if (Notification.permission === "denied") {
            console.log("Notification permission is denied and cannot be requested");
          } else {
            console.log("Notification permission has already been granted");
          }
        });
      },
    });
  }

  initWebPush();

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

API เพิ่มเติม

สำหรับรายละเอียดเกี่ยวกับวิธีการใช้ API อื่นๆ โปรดดูเอกสารอินเทอร์เฟซ: /th_TH/docs/web-push/sdk/web-sdk-api

การเรียกใช้ตัวอย่าง

ตัวอย่างในแพ็คเกจคือการสาธิต API สามารถเรียกใช้ในเบราว์เซอร์ของคุณโดยตรงเพื่อทดสอบ

Icon Solid Transparent White Qiyu
ติดต่อฝ่ายขาย