คู่มือการผสานรวม
คำอธิบายการสนับสนุนสำหรับผู้ใช้ต่างประเทศในแต่ละช่องทาง
ประเภทช่องทาง | ผู้ใช้ในภูมิภาคอื่น | ผู้ใช้ในจีนแผ่นดินใหญ่ | หมายเหตุ |
---|---|---|---|
EngageLab | สนับสนุน | สนับสนุน | รองรับโดย SDK ตามค่าเริ่มต้น |
W3C | สนับสนุน | สนับสนุน | / |
การทดสอบอย่างรวดเร็ว
https://webpush-demo.engagelab.com/
การเตรียมการก่อนการผสานรวม
- เตรียมชื่อโดเมนสำหรับบริการเว็บ HTTPS ที่สามารถเข้าถึงได้ซึ่งจะใช้สำหรับการทดสอบและการดีบัก Web push ไม่รองรับการดีบักในเครื่องหรือการทำงานภายใต้โปรโตคอลที่ไม่ใช่ HTTPS
- เข้าชม 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>
หลังจากผสานรวมไฟล์ 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
การเริ่มต้น SDK
สร้าง user_str
แนะนำให้ใช้ลายนิ้วมือเบราว์เซอร์เพื่อสร้าง user_str
ที่ไม่ซ้ำกันเพื่อป้องกันการลงทะเบียนผู้ใช้ที่ไม่ถูกต้อง:
// ละเว้น: รหัสการเก็บรวบรวมลายนิ้วมือ 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() เรียกใช้การขอสิทธิ์การแจ้งเตือน
},
});
API เพิ่มเติม
สำหรับรายละเอียดเกี่ยวกับวิธีการใช้ API อื่นๆ โปรดดูเอกสารอินเทอร์เฟซ: /docs/web-push/sdk/web-sdk-api
การเรียกใช้ตัวอย่าง
ตัวอย่างในแพ็คเกจคือการสาธิต API สามารถเรียกใช้ในเบราว์เซอร์ของคุณโดยตรงเพื่อทดสอบ