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










