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

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

ประเภทช่องทาง ผู้ใช้ในภูมิภาคอื่น ผู้ใช้ในจีนแผ่นดินใหญ่ หมายเหตุ
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 รองรับเบราว์เซอร์หลักส่วนใหญ่

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

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

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

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

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

สร้างแอปพลิเคชันในคอนโซล หลังจากสร้างแอปพลิเคชันแล้ว จะมีการสร้าง AppKey โดยอัตโนมัติเพื่อระบุแอปพลิเคชัน สำหรับข้อมูลเพิ่มเติม โปรดดูที่ /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);

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

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

// ลงทะเบียนตัวตรวจสอบเหตุการณ์ก่อนเริ่มต้น // คอลแบ็กเมื่อช่องทาง Aurora ตัดการเชื่อมต่อ MTpushInterface.mtPush.onDisconnect(function () { console.log("onDisconnect"); }); // รับข้อความ push (Web Push, ช่องทางของผู้ผลิตเบราว์เซอร์) MTpushInterface.onMsgReceive((msgData) => { // โครงสร้าง msgData: {data:{xxx},type:0} type:0 คือช่องทาง Aurora, 1 คือช่องทางระบบ console.log("ได้รับข้อความ push:", msgData); }); // การเริ่มต้น push MTpushInterface.init({ appkey: "", // จำเป็น, ดูข้อมูลแอปด้านบน user_str: visitorId, // จำเป็น, ตัวระบุผู้ใช้ fail(err) { console.log("การตั้งค่า push ออนไลน์ล้มเหลว", err); }, success(data) { console.log("การตั้งค่า push ออนไลน์สำเร็จ", data); }, webPushcallback(code, tip) { console.log("รหัสสถานะและข้อความของผู้ใช้", code, tip); }, swUrl: '', // ค่าเริ่มต้น: "/sw.min." + sdkEnv.version + ".js" การกำหนดค่านี้คือเส้นทางไฟล์ worker ของเซิร์ฟเวอร์ ซึ่งต้องอยู่ภายใต้โดเมนปัจจุบันและกำหนดขอบเขตของ worker canGetInfo(data) { // ณ จุดนี้สามารถเรียกดูข้อมูลการกำหนดค่าการแจ้งเตือนได้ หลังจากคอลแบ็กนี้สามารถรับ RegId ได้ console.log(data); // ข้อมูลการกำหนดค่าที่เกี่ยวข้อง console.log("ได้รับ RegId", MTpushInterface.getRegistrationID()); }, custom: (fuc) => { // เมื่อใช้การตั้งค่าการแจ้งเตือนแบบกำหนดเอง ให้เรียกใช้ fuc() ด้วยตนเองเพื่อขอสิทธิ์การแจ้งเตือน ฟังก์ชันการขอสิทธิ์จะพร้อมใช้งานผ่าน 'custom' เท่านั้น // fuc() เรียกใช้การขอสิทธิ์การแจ้งเตือน }, });
              
                // ลงทะเบียนตัวตรวจสอบเหตุการณ์ก่อนเริ่มต้น
  // คอลแบ็กเมื่อช่องทาง Aurora ตัดการเชื่อมต่อ
  MTpushInterface.mtPush.onDisconnect(function () {
    console.log("onDisconnect");
  });
  // รับข้อความ push (Web Push, ช่องทางของผู้ผลิตเบราว์เซอร์)
  MTpushInterface.onMsgReceive((msgData) => {
    // โครงสร้าง msgData: {data:{xxx},type:0} type:0 คือช่องทาง Aurora, 1 คือช่องทางระบบ
    console.log("ได้รับข้อความ push:", msgData);
  });
  // การเริ่มต้น push
  MTpushInterface.init({
    appkey: "", // จำเป็น, ดูข้อมูลแอปด้านบน
    user_str: visitorId, // จำเป็น, ตัวระบุผู้ใช้
    fail(err) {
      console.log("การตั้งค่า push ออนไลน์ล้มเหลว", err);
    },
    success(data) {
      console.log("การตั้งค่า push ออนไลน์สำเร็จ", data);
    },
    webPushcallback(code, tip) {
      console.log("รหัสสถานะและข้อความของผู้ใช้", code, tip);
    },
    swUrl: '', // ค่าเริ่มต้น: "/sw.min." + sdkEnv.version + ".js" การกำหนดค่านี้คือเส้นทางไฟล์ worker ของเซิร์ฟเวอร์ ซึ่งต้องอยู่ภายใต้โดเมนปัจจุบันและกำหนดขอบเขตของ worker
    canGetInfo(data) {
      // ณ จุดนี้สามารถเรียกดูข้อมูลการกำหนดค่าการแจ้งเตือนได้ หลังจากคอลแบ็กนี้สามารถรับ RegId ได้
      console.log(data); // ข้อมูลการกำหนดค่าที่เกี่ยวข้อง
      console.log("ได้รับ RegId", MTpushInterface.getRegistrationID());
    },
    custom: (fuc) => {
      // เมื่อใช้การตั้งค่าการแจ้งเตือนแบบกำหนดเอง ให้เรียกใช้ fuc() ด้วยตนเองเพื่อขอสิทธิ์การแจ้งเตือน ฟังก์ชันการขอสิทธิ์จะพร้อมใช้งานผ่าน 'custom' เท่านั้น
      // fuc() เรียกใช้การขอสิทธิ์การแจ้งเตือน
    },
  });

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

API เพิ่มเติม

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

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

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

icon
ติดต่อฝ่ายขาย