เหตุผลที่ควรใช้ข้อความ Push
การแจ้งเตือนจะแสดงข้อมูลเป็นกลุ่มเล็กๆ แก่ผู้ใช้ เว็บแอปสามารถใช้การแจ้งเตือนเพื่อแจ้งให้ผู้ใช้ทราบเกี่ยวกับเหตุการณ์สำคัญที่มีเวลาจำกัด หรือการดำเนินการที่ผู้ใช้ต้องทำ
รูปลักษณ์ของการแจ้งเตือนจะแตกต่างกันไปตามแพลตฟอร์ม เช่น
เดิมทีเว็บเบราว์เซอร์ต้องเป็นผู้เริ่มการแลกเปลี่ยนข้อมูลระหว่างเซิร์ฟเวอร์กับไคลเอ็นต์ด้วยการส่งคำขอ ในทางกลับกัน เทคโนโลยี Web Push ให้คุณกําหนดค่าเซิร์ฟเวอร์ให้ส่งการแจ้งเตือนเมื่อเหมาะสมสําหรับแอป บริการ Push จะสร้าง URL ที่ไม่ซ้ำกันสําหรับ Service Worker ที่สมัครใช้บริการแต่ละรายการ การส่งข้อความไปยัง URL ของ Service Worker จะทำให้เกิดเหตุการณ์ใน Service Worker นั้น ซึ่งจะทริกเกอร์ให้แสดงการแจ้งเตือน
ข้อความ Push ช่วยให้ผู้ใช้ได้รับประโยชน์สูงสุดจากแอปของคุณด้วยการแจ้งให้ผู้ใช้เปิดแอปอีกครั้งและใช้แอปตามข้อมูลล่าสุด
การสร้างและส่งการแจ้งเตือน
สร้างการแจ้งเตือนโดยใช้ Notifications API ออบเจ็กต์ Notification
มีสตริง title
และออบเจ็กต์ options
เช่น
let title = 'Hi!';
let options = {
body: 'Very Important Message',
/* other options can go here */
};
let notification = new Notification(title, options);
title
จะแสดงเป็นตัวหนาเมื่อการแจ้งเตือนทำงานอยู่ ส่วน body
จะมีข้อความเพิ่มเติม
ขอสิทธิ์ส่งการแจ้งเตือน
หากต้องการแสดงการแจ้งเตือน แอปของคุณต้องขอสิทธิ์จากผู้ใช้ก่อน โดยทำดังนี้
Notification.requestPermission();
ข้อความ Push ทํางานอย่างไร
ความสามารถที่แท้จริงของการแจ้งเตือนมาจากการทำงานร่วมกันของ Service Worker และเทคโนโลยี Push ดังนี้
Service Worker สามารถทํางานในเบื้องหลังและแสดงการแจ้งเตือนได้แม้ว่าแอปจะไม่แสดงบนหน้าจอ
เทคโนโลยี Push ช่วยให้คุณกำหนดค่าเซิร์ฟเวอร์ให้ส่งการแจ้งเตือนได้เมื่อเหมาะสมกับแอป บริการ Push จะสร้าง URL ที่ไม่ซ้ำกันสำหรับ Service Worker แต่ละรายการที่สมัครใช้บริการ การส่งข้อความไปยัง URL ของ Service Worker จะทำให้เกิดเหตุการณ์ใน Service Worker นั้น ซึ่งจะทริกเกอร์ให้แสดงการแจ้งเตือน
ในตัวอย่างเวิร์กโฟลว์ต่อไปนี้ ไคลเอ็นต์จะลงทะเบียน Service Worker และสมัครรับ Push Notification จากนั้นเซิร์ฟเวอร์จะส่งการแจ้งเตือนไปยังปลายทางการสมัครใช้บริการ
ไคลเอ็นต์และ Service Worker ใช้ JavaScript เวอร์ชันมาตรฐานที่ไม่มีไลบรารีเพิ่มเติม เซิร์ฟเวอร์สร้างขึ้นด้วยแพ็กเกจ npm express
ใน Node.js และใช้แพ็กเกจ npm web-push
เพื่อส่งการแจ้งเตือน หากต้องการส่งข้อมูลไปยังเซิร์ฟเวอร์ ไคลเอ็นต์จะเรียกใช้ URL POST ที่เซิร์ฟเวอร์แสดง
ส่วนที่ 1: ลงทะเบียน Service Worker และสมัครรับ Push
แอปไคลเอ็นต์ลงทะเบียน Service Worker กับ
ServiceWorkerContainer.register()
Service Worker ที่ลงทะเบียนจะยังคงทำงานในเบื้องหลังต่อไปเมื่อไม่มีการใช้งานไคลเอ็นต์รหัสไคลเอ็นต์:
navigator.serviceWorker.register('sw.js');
ไคลเอ็นต์ขอสิทธิ์จากผู้ใช้เพื่อส่งการแจ้งเตือน
รหัสไคลเอ็นต์:
Notification.requestPermission();
หากต้องการเปิดใช้ข้อความ Push บริการเวิร์กเกอร์จะใช้
PushManager.subscribe()
เพื่อสร้างการสมัครรับข้อความ Push ในการเรียกPushManager.subscribe()
บริการเวิร์กเกอร์จะระบุคีย์ API ของแอปเป็นตัวระบุรหัสไคลเอ็นต์:
navigator.serviceWorker.register('sw.js').then(sw => {
sw.pushManager.subscribe({ /* API key */ });
});บริการ Push เช่น Firebase Cloud Messaging ทำงานในรูปแบบการสมัครใช้บริการ เมื่อ Service Worker สมัครใช้บริการ Push โดยเรียกใช้
PushManager.subscribe()
บริการ Push จะสร้าง URL ที่ไม่ซ้ำกันสำหรับ Service Worker นั้น URL นี้เรียกว่าปลายทางการสมัครใช้บริการไคลเอ็นต์จะส่งปลายทางการสมัครใช้บริการไปยังเซิร์ฟเวอร์แอป
รหัสไคลเอ็นต์:
navigator.serviceWorker.register('sw.js').then(sw => {
sw.pushManager.subscribe({ /* API key */ }).then(subscription => {
sendToServer(subscription, '/new-subscription', 'POST');
});
});รหัสเซิร์ฟเวอร์:
app.post('/new-subscription', (request, response) => {
// extract subscription from request
// send 'OK' response
});
ส่วนที่ 2: ส่งการแจ้งเตือน
เว็บเซิร์ฟเวอร์จะส่งการแจ้งเตือนไปยังปลายทางการสมัครใช้บริการ
รหัสเซิร์ฟเวอร์:
const webpush = require('web-push');
let options = { /* config info for cloud messaging and API key */ };
let subscription = { /* subscription created in Part 1*/ };
let payload = { /* notification */ };
webpush.sendNotification(subscription, payload, options);การแจ้งเตือนที่ส่งไปยังปลายทางการสมัครใช้บริการจะเรียกเหตุการณ์ Push ที่มี Service Worker เป็นเป้าหมาย Service Worker จะได้รับข้อความและแสดงต่อผู้ใช้เป็นการแจ้งเตือน
โค้ด Service Worker
self.addEventListener('push', (event) => {
let title = { /* get notification title from event data */ }
let options = { /* get notification options from event data */ }
showNotification(title, options);
})ผู้ใช้โต้ตอบกับการแจ้งเตือน ซึ่งทําให้เว็บแอปทํางานอยู่ หากยังไม่ได้ทําเช่นนั้น
ขั้นตอนถัดไป
ขั้นตอนถัดไปคือการใช้ข้อความ Push
เราได้สร้างชุดโค้ดแล็บเพื่อช่วยแนะนำคุณตลอดแต่ละขั้นตอนของกระบวนการ