เหตุใดจึงควรใช้ข้อความ Push
การแจ้งเตือนจะแสดงข้อมูลส่วนเล็กๆ แก่ผู้ใช้ เว็บแอปสามารถใช้การแจ้งเตือนเพื่อบอกให้ผู้ใช้ทราบเกี่ยวกับกิจกรรมสำคัญที่ต้องคำนึงถึงเวลาเป็นสำคัญ หรือการกระทำที่ผู้ใช้ต้องทำ
รูปลักษณ์ของการแจ้งเตือนจะแตกต่างกันไปในแต่ละแพลตฟอร์ม เช่น
แต่เดิมเว็บเบราว์เซอร์ต้องเริ่มการแลกเปลี่ยนข้อมูลระหว่างเซิร์ฟเวอร์และไคลเอ็นต์ด้วยการส่งคำขอ ในทางกลับกัน เทคโนโลยีพุชบนเว็บช่วยให้คุณกำหนดค่าเซิร์ฟเวอร์ให้ส่งการแจ้งเตือนเมื่อมีความเหมาะสมสำหรับแอป บริการพุชจะสร้าง URL ที่ไม่ซ้ำกันสำหรับ Service Worker แต่ละรายที่สมัคร การส่งข้อความไปยัง URL ของโปรแกรมทำงานของบริการจะเพิ่มเหตุการณ์ใน 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 และเทคโนโลยีพุช
โปรแกรมทำงานของบริการทำงานอยู่เบื้องหลังและแสดงการแจ้งเตือนได้แม้แอปของคุณจะไม่ได้ปรากฏบนหน้าจอก็ตาม
เทคโนโลยีพุชช่วยให้คุณกำหนดค่าเซิร์ฟเวอร์ให้ส่งการแจ้งเตือนเมื่อเหมาะสมกับแอปของคุณ บริการพุชจะสร้าง URL ที่ไม่ซ้ำกันสำหรับ Service Worker แต่ละรายที่สมัคร การส่งข้อความไปยัง URL ของโปรแกรมทำงานของบริการจะเพิ่มเหตุการณ์ใน Service Worker นั้นให้แสดงการแจ้งเตือน
ในตัวอย่างต่อไปนี้ ไคลเอ็นต์จะลงทะเบียน Service Worker และสมัครรับข้อความ Push จากนั้นเซิร์ฟเวอร์จะส่งการแจ้งเตือนไปยังปลายทางการสมัครใช้บริการ
ไคลเอ็นต์และ Service Worker ใช้ JavaScript แบบวานิลลาโดยไม่มีไลบรารีเพิ่มเติม เซิร์ฟเวอร์สร้างขึ้นด้วยแพ็กเกจ express
npm ใน Node.js และใช้แพ็กเกจ web-push
npm เพื่อส่งการแจ้งเตือน ในการส่งข้อมูลไปยังเซิร์ฟเวอร์ ไคลเอ็นต์จะเรียก POST URL ที่เซิร์ฟเวอร์เปิดเผยไว้
ส่วนที่ 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 */ });
});บริการพุชอย่าง Firebase Cloud Messaging จะทำงานในรูปแบบการสมัครใช้บริการ เมื่อโปรแกรมทำงานของบริการสมัครรับบริการพุชโดยการเรียกใช้
PushManager.subscribe()
บริการพุชจะสร้าง URL เฉพาะสำหรับโปรแกรมทำงานของบริการนั้น โดย 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);การแจ้งเตือนที่ส่งไปยังเหตุการณ์ Fire Push ของปลายทางการสมัครใช้บริการที่มี 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
เราได้สร้างชุด Codelab เพื่อแนะนำคุณเกี่ยวกับแต่ละขั้นตอนของกระบวนการ