เหตุใดจึงควรใช้ข้อความ Push
การแจ้งเตือนจะแสดงข้อมูลสั้นๆ ต่อผู้ใช้ เว็บแอปใช้การแจ้งเตือนเพื่อแจ้งให้ผู้ใช้ทราบเกี่ยวกับเหตุการณ์สำคัญที่มีกำหนดเวลา หรือการดำเนินการที่ผู้ใช้ต้องทำ
รูปลักษณ์ของการแจ้งเตือนจะแตกต่างกันไปในแต่ละแพลตฟอร์ม เช่น
![](https://web.dev/static/articles/use-push-notifications-to-engage-users/image/3wEi4F7iuNrg2kL85aMI.png?hl=th)
![](https://web.dev/static/articles/use-push-notifications-to-engage-users/image/Ho6Nf5CcftL4AmLzoHZ8.png?hl=th)
แต่เดิม เว็บเบราว์เซอร์ต้องเริ่มต้นการแลกเปลี่ยนข้อมูลระหว่างเซิร์ฟเวอร์และไคลเอ็นต์ด้วยการส่งคำขอ ในทางกลับกัน เทคโนโลยีข้อความ Push ในเว็บช่วยให้คุณกำหนดค่าเซิร์ฟเวอร์ให้ส่งการแจ้งเตือนเมื่อมีความเหมาะสมสำหรับแอป บริการพุชจะสร้าง URL ที่ไม่ซ้ำกันสำหรับโปรแกรมทำงานของบริการที่สมัครไว้แต่ละคน การส่งข้อความไปยัง 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 เข้ากับเทคโนโลยีพุช:
Service Worker ทำงานในเบื้องหลังและแสดงการแจ้งเตือนได้แม้ว่าแอปจะไม่ปรากฏให้เห็นบนหน้าจอ
เทคโนโลยีพุชช่วยให้คุณกำหนดค่าเซิร์ฟเวอร์ให้ส่งการแจ้งเตือนเมื่อมีความเหมาะสมสำหรับแอป บริการพุชจะสร้าง URL ที่ไม่ซ้ำกันสำหรับโปรแกรมทำงานของบริการที่สมัครใช้บริการแต่ละคน การส่งข้อความไปยัง URL ของ Service Worker จะเป็นการเพิ่มเหตุการณ์บน Service Worker และทำให้โปรแกรมแสดงการแจ้งเตือน
ในโฟลว์ตัวอย่างต่อไปนี้ ไคลเอ็นต์ลงทะเบียน Service Worker และสมัครข้อความ Push จากนั้นเซิร์ฟเวอร์จะส่งการแจ้งเตือนไปยังปลายทางการสมัครใช้บริการ
โปรแกรมทำงานของไคลเอ็นต์และบริการใช้ JavaScript แบบวานิลลาโดยไม่มีไลบรารีเพิ่มเติม เซิร์ฟเวอร์สร้างขึ้นด้วยแพ็กเกจ express
npm ใน Node.js และใช้web-push
แพ็กเกจ npm เพื่อส่งการแจ้งเตือน ในการส่งข้อมูลไปยังเซิร์ฟเวอร์ ไคลเอ็นต์จะเรียกใช้ URL POST ที่เซิร์ฟเวอร์เปิดเผย
ส่วนที่ 1: ลงทะเบียน Service Worker และสมัครใช้ Push
แอปไคลเอ็นต์จะลงทะเบียน Service Worker ด้วย
ServiceWorkerContainer.register()
Service Worker ที่ลงทะเบียนแล้วจะยังคงทำงานในเบื้องหลังเมื่อไคลเอ็นต์ไม่มีการใช้งานรหัสไคลเอ็นต์:
navigator.serviceWorker.register('sw.js');
ไคลเอ็นต์ขอสิทธิ์จากผู้ใช้เพื่อส่งการแจ้งเตือน
รหัสไคลเอ็นต์:
Notification.requestPermission();
หากต้องการเปิดใช้ข้อความ Push โปรแกรมทำงานของบริการจะใช้
PushManager.subscribe()
เพื่อสร้างการสมัครใช้บริการแบบพุช ในการเรียกใช้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);
การแจ้งเตือนที่ส่งไปยังปลายทางการสมัครใช้บริการจะเริ่มเหตุการณ์พุชที่มี 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
เราได้สร้าง Codelab จำนวนหนึ่งขึ้นมาเพื่อแนะนำคุณผ่านแต่ละขั้นตอนของกระบวนการ