ภาพรวมของข้อความ Push คืออะไร เหตุใดคุณจึงควรใช้ข้อความประเภทนี้ และวิธีการทำงานของข้อความ Push
ข้อความ Push คืออะไร
ข้อความพุชช่วยให้คุณสามารถนำเสนอข้อมูลเพื่อดึงดูดความสนใจของผู้ใช้ได้ แม้ว่าผู้ใช้จะไม่ได้ใช้เว็บไซต์ของคุณก็ตาม ซึ่งเรียกว่าข้อความ push เพราะคุณสามารถ "พุช" ข้อมูลถึงผู้ใช้ได้แม้ว่าผู้ใช้จะไม่ได้ใช้งาน เปรียบเทียบเทคโนโลยีการพุชกับเทคโนโลยีแบบพุลเพื่อทำความเข้าใจแนวคิดนี้ให้ดียิ่งขึ้น
การแจ้งเตือนจะแสดงข้อมูลสั้นๆ ต่อผู้ใช้ เว็บไซต์สามารถใช้การแจ้งเตือนเพื่อแจ้งให้ผู้ใช้ทราบเกี่ยวกับเหตุการณ์สำคัญที่มีกำหนดเวลา หรือการดำเนินการที่ผู้ใช้ต้องทำ รูปลักษณ์ของการแจ้งเตือนจะแตกต่างกันไปในแต่ละแพลตฟอร์ม ดังนี้
![ตัวอย่างการแจ้งเตือนใน macOS และ Android](https://web.dev/static/articles/push-notifications-overview/image/examples-notifications-940d01bcab836.png?authuser=6&hl=th)
ข้อความ Push และการแจ้งเตือนเป็นเทคโนโลยี 2 อย่างที่แยกจากกันแต่ส่งเสริมกันและกัน พุชเป็นเทคโนโลยีในการส่งข้อความจากเซิร์ฟเวอร์ของคุณถึงผู้ใช้ แม้ว่าผู้ใช้จะไม่ได้ใช้งานเว็บไซต์ของคุณอยู่ก็ตาม การแจ้งเตือนเป็นเทคโนโลยีในการแสดง ข้อมูลที่พุชบนอุปกรณ์ของผู้ใช้ คุณสามารถใช้การแจ้งเตือน โดยไม่ต้องส่งข้อความพุช วันหนึ่งคุณอาจสามารถใช้ข้อความ Push โดยไม่มีการแจ้งเตือนที่แสดงต่อผู้ใช้ (ข้อความ Push) ได้ แต่เบราว์เซอร์ยังไม่รองรับในปัจจุบัน ในทางปฏิบัติแล้วมักใช้ด้วยกัน ผู้ใช้ที่ไม่เกี่ยวข้องกับด้านเทคนิคอาจไม่เข้าใจความแตกต่างระหว่างข้อความ Push กับการแจ้งเตือน ในคอลเล็กชันนี้ เมื่อเราพูดว่าข้อความ Push เราหมายถึงชุดค่าผสมของข้อความ Push ตามด้วยการแสดงเป็นการแจ้งเตือน เมื่อเราพูดว่าข้อความ Push เราหมายถึงเทคโนโลยีพุชในตัวเอง และเมื่อเราพูดว่าการแจ้งเตือน เราหมายถึงเทคโนโลยีการแจ้งเตือนอยู่แล้ว
เหตุใดจึงควรใช้ข้อความ Push
- สำหรับผู้ใช้ ข้อความ Push เป็นวิธีหนึ่งในการรับข้อมูลที่ทันเวลา มีความเกี่ยวข้อง และแม่นยำ
- สำหรับคุณ (เจ้าของเว็บไซต์) ข้อความ Push เป็นวิธีเพิ่มการมีส่วนร่วมของผู้ใช้
ข้อความ Push ทำงานอย่างไร
ขั้นตอนสำคัญในการใช้ข้อความ Push ในภาพรวมมีดังนี้
- การเพิ่มตรรกะของไคลเอ็นต์เพื่อขอสิทธิ์ส่งข้อความ Push จากผู้ใช้ จากนั้นจึงส่งข้อมูลตัวระบุไคลเอ็นต์ไปยังเซิร์ฟเวอร์เพื่อจัดเก็บไว้ในฐานข้อมูล
- การเพิ่มตรรกะของเซิร์ฟเวอร์เพื่อพุชข้อความไปยังอุปกรณ์ไคลเอ็นต์
- เพิ่มตรรกะของไคลเอ็นต์เพื่อรับข้อความที่พุชไปยังอุปกรณ์และแสดงเป็นการแจ้งเตือน
ส่วนที่เหลือของหน้านี้จะอธิบายขั้นตอนเหล่านี้โดยละเอียด
รับสิทธิ์ส่งข้อความ Push
ก่อนอื่น เว็บไซต์ของคุณต้องได้รับอนุญาตจากผู้ใช้จึงจะส่งข้อความ Push ได้
ซึ่งควรทริกเกอร์ด้วยท่าทางสัมผัสของผู้ใช้ เช่น การคลิกปุ่มใช่ ถัดจากข้อความแจ้ง Do you want to receive push notifications?
หลังจากยืนยันแล้ว ให้โทรหา Notification.requestPermission()
ระบบปฏิบัติการหรือเบราว์เซอร์ในอุปกรณ์ของผู้ใช้อาจแสดง UI บางอย่างเพื่อยืนยันอย่างเป็นทางการว่าผู้ใช้ต้องการเลือกรับข้อความ Push UI นี้จะแตกต่างกันไปในแต่ละแพลตฟอร์ม
สมัครรับข้อความ Push จากลูกค้า
หลังจากได้รับสิทธิ์ เว็บไซต์ของคุณจะต้องเริ่มกระบวนการสมัครรับข้อมูลให้ผู้ใช้ส่งข้อความ Push ซึ่งทำผ่าน JavaScript โดยใช้ Push API คุณจะต้องระบุคีย์การตรวจสอบสิทธิ์สาธารณะในกระบวนการสมัครใช้บริการ ซึ่งคุณจะดูข้อมูลเพิ่มเติมเกี่ยวกับได้ในภายหลัง หลังจากเริ่มต้นกระบวนการสมัครใช้บริการ เบราว์เซอร์จะส่งคำขอเครือข่ายไปยังบริการเว็บที่เรียกว่าบริการพุช ซึ่งคุณจะดูข้อมูลเพิ่มเติมเกี่ยวกับได้ในภายหลัง
สมมติว่าการสมัครใช้บริการสำเร็จ เบราว์เซอร์จะแสดงผลออบเจ็กต์ PushSubscription
คุณจะต้องจัดเก็บข้อมูลนี้ในระยะยาว
ซึ่งโดยปกติจะทำโดยการส่งข้อมูลไปยังเซิร์ฟเวอร์ที่คุณควบคุม
แล้วให้เซิร์ฟเวอร์จัดเก็บข้อมูลนั้นในฐานข้อมูล
ส่งข้อความพุช
เซิร์ฟเวอร์ของคุณไม่ได้ส่งข้อความพุชไปยังไคลเอ็นต์โดยตรง และบริการพุชก็จะดำเนินการเอง บริการพุชคือบริการเว็บที่ควบคุมโดยผู้ให้บริการเบราว์เซอร์ของผู้ใช้ เมื่อต้องการส่งข้อความ Push ไปยังไคลเอ็นต์ คุณต้องส่งคำขอบริการเว็บไปยังบริการพุช คำขอบริการเว็บที่คุณส่งไปยังบริการพุชจะเรียกว่าคำขอโปรโตคอลพุชจากเว็บ คำขอ Web Push Protocol ควรมีข้อมูลดังต่อไปนี้
- ข้อมูลที่ต้องระบุในข้อความ
- ผู้รับข้อความที่จะส่งข้อความถึง
- คำแนะนำเกี่ยวกับวิธีที่บริการพุชควรส่งข้อความ ตัวอย่างเช่น คุณสามารถระบุว่าบริการพุชควรหยุดพยายามส่งข้อความหลังจากผ่านไป 10 นาที
โดยปกติคุณจะส่งคำขอโปรโตคอลพุชจากเว็บผ่านเซิร์ฟเวอร์ที่คุณควบคุม แน่นอน เซิร์ฟเวอร์ของคุณไม่จำเป็นต้องสร้างคำขอบริการเว็บดิบเอง เรามีไลบรารีที่สามารถจัดการเรื่องนี้ให้คุณได้ เช่น web-push-libs แต่กลไกพื้นฐานคือ คำขอบริการเว็บผ่าน HTTP
บริการพุชจะได้รับคำขอ ตรวจสอบสิทธิ์ และกำหนดเส้นทางข้อความพุชไปยังไคลเอ็นต์ที่เหมาะสม หากเบราว์เซอร์ของไคลเอ็นต์ออฟไลน์อยู่ บริการพุชจะจัดคิวข้อความพุชจนกว่าเบราว์เซอร์จะออนไลน์
แต่ละเบราว์เซอร์ใช้บริการพุชใดก็ได้ที่ต้องการ ในฐานะนักพัฒนาเว็บไซต์ ไม่สามารถควบคุมส่วนนั้นได้ นี่ไม่ใช่ปัญหาเนื่องจากคำขอโปรโตคอลพุชจากเว็บเป็นแบบมาตรฐาน อีกนัยหนึ่งคือ คุณไม่ต้องสนใจบริการพุชที่ผู้ให้บริการเบราว์เซอร์ใช้อยู่ คุณเพียงต้องตรวจสอบว่าคำขอโปรโตคอลพุชจากเว็บเป็นไปตามข้อกำหนดเท่านั้น นอกจากนี้ ข้อกำหนดยังระบุว่าคำขอต้องมีส่วนหัวบางอย่างและต้องส่งข้อมูลเป็นสตรีมของไบต์
อย่างไรก็ตาม ต้องตรวจสอบว่ากำลังส่งคำขอโปรโตคอลพุชจากเว็บไปยังบริการพุชที่ถูกต้อง ข้อมูล PushSubscription
ที่เบราว์เซอร์ส่งกลับมาให้คุณในระหว่างขั้นตอนการสมัครใช้บริการจะให้ข้อมูลนี้ ออบเจ็กต์ PushSubscription
มีลักษณะดังนี้
{
"endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
"expirationTime": null,
"keys": {
"p256dh": "BGyyVt9FFV…",
"auth": "R9sidzkcdf…"
}
}
โดยพื้นฐานแล้ว โดเมนของ endpoint
คือบริการพุช เส้นทางของ endpoint
เป็นข้อมูลตัวระบุไคลเอ็นต์ที่ช่วยให้บริการพุชระบุไคลเอ็นต์ที่จะพุชข้อความไปยังไคลเอ็นต์ได้อย่างแน่ชัด
keys
จะใช้สำหรับการเข้ารหัส ซึ่งจะอธิบายต่อไป
เข้ารหัสข้อความพุช
ข้อมูลที่คุณส่งไปยังบริการพุชต้องได้รับการเข้ารหัส เพื่อป้องกันไม่ให้บริการพุชสามารถดูข้อมูลที่คุณส่งไปยังไคลเอ็นต์ได้
โปรดจำไว้ว่าผู้ให้บริการเบราว์เซอร์จะเป็นผู้กำหนดว่าจะใช้บริการพุชใด และบริการพุชนั้นในทางทฤษฎีแล้วอาจไม่ปลอดภัยหรือไม่ปลอดภัย เซิร์ฟเวอร์ของต้องใช้ keys
ที่ระบุไว้ใน PushSubscription
เพื่อเข้ารหัสคำขอ Web Push Protocol
ลงนามในคำขอ Web Push Protocol
บริการพุชมีวิธีการป้องกันไม่ให้ผู้อื่นส่งข้อความถึงผู้ใช้ของคุณ ในทางเทคนิคแล้วคุณไม่ต้องทำอย่างนี้ แต่การติดตั้งที่ง่ายที่สุดใน Chrome จำเป็นต้องมี แต่ไม่บังคับใน Firefox เบราว์เซอร์อื่นๆ อาจกำหนดให้ใช้ได้ ในอนาคต
เวิร์กโฟลว์นี้เกี่ยวข้องกับคีย์ส่วนตัวและคีย์สาธารณะที่ไม่ซ้ำกันสำหรับแอปพลิเคชันของคุณ ขั้นตอนการตรวจสอบสิทธิ์จะทำงานโดยประมาณดังนี้
- คุณสร้างคีย์ส่วนตัวและคีย์สาธารณะเป็นงานที่ต้องทำเพียงครั้งเดียว ชุดค่าผสมของคีย์ส่วนตัวและคีย์สาธารณะเรียกว่าคีย์เซิร์ฟเวอร์แอปพลิเคชัน นอกจากนี้ คุณอาจเห็นคีย์ VAPID ด้วย VAPID คือข้อกำหนดที่กำหนดกระบวนการตรวจสอบสิทธิ์นี้
- เมื่อคุณสมัครใช้บริการไคลเอ็นต์เพื่อส่งข้อความ Push จากโค้ด JavaScript คุณจะต้องให้คีย์สาธารณะ เมื่อบริการพุชสร้าง
endpoint
สำหรับอุปกรณ์ บริการจะเชื่อมโยงคีย์สาธารณะที่ระบุกับendpoint
- เมื่อส่งคำขอโปรโตคอลพุชจากเว็บ จะเป็นการลงนามข้อมูล JSON ด้วยคีย์ส่วนตัว
- เมื่อบริการพุชได้รับคำขอโปรโตคอลพุชจากเว็บ บริการจะใช้คีย์สาธารณะที่จัดเก็บไว้เพื่อตรวจสอบสิทธิ์ข้อมูลที่ลงนาม หากลายเซ็นถูกต้อง บริการพุชจะรู้ว่าคำขอมาจากเซิร์ฟเวอร์ที่มีคีย์ส่วนตัวที่ตรงกัน
ปรับแต่งการส่งข้อความพุช
ข้อกำหนดคำขอโปรโตคอลพุชจากเว็บจะกำหนดพารามิเตอร์ที่ให้คุณปรับแต่งวิธีที่บริการพุชพยายามส่งข้อความพุชไปยังไคลเอ็นต์ ตัวอย่างเช่น คุณปรับแต่งสิ่งต่อไปนี้ได้
- Time to Live (TTL) ของข้อความ ซึ่งจะกำหนดระยะเวลาที่บริการพุชควรพยายามส่งข้อความ
- ความเร่งด่วนของข้อความซึ่งมีประโยชน์ในกรณีที่บริการพุชคงอายุการใช้งานแบตเตอรี่ของลูกค้าโดยการแสดงเฉพาะข้อความที่มีลำดับความสำคัญสูง
- หัวข้อของข้อความ ซึ่งจะแทนที่ข้อความที่รอดำเนินการในหัวข้อเดียวกันด้วยข้อความล่าสุด
รับและแสดงข้อความที่พุชเป็นการแจ้งเตือน
เมื่อคุณส่งคำขอโปรโตคอลพุชจากเว็บไปยังบริการพุชแล้ว บริการพุชจะเก็บคำขอของคุณไว้ในคิวจนกว่าจะเกิดเหตุการณ์ใดเหตุการณ์หนึ่งต่อไปนี้
- ไคลเอ็นต์จะออนไลน์และบริการพุชส่งข้อความพุช
- ข้อความหมดอายุ
เมื่อเบราว์เซอร์ของไคลเอ็นต์ได้รับข้อความที่พุชเข้ามา ระบบจะถอดรหัสข้อมูลข้อความพุชและส่งเหตุการณ์ push
ไปยังผู้ปฏิบัติงานบริการของคุณ โดยทั่วไปแล้ว โปรแกรมทำงานของบริการคือโค้ด JavaScript ที่ทำงานอยู่เบื้องหลังได้แม้ว่าเว็บไซต์ไม่ได้เปิดอยู่หรือเบราว์เซอร์ปิดอยู่ ในโปรแกรมจัดการเหตุการณ์ push
ของ Service Worker คุณจะเรียกใช้ ServiceWorkerRegistration.showNotification()
เพื่อแสดงข้อมูลเป็นการแจ้งเตือน
ขั้นตอนถัดไป
- ภาพรวมข้อความ Push ในเว็บ
- วิธีการทำงานของ Push
- การสมัครใช้บริการ
- UX ของสิทธิ์
- การส่งข้อความด้วยไลบรารีพุชจากเว็บ
- โปรโตคอลพุชจากเว็บ
- การจัดการเหตุการณ์พุช
- การแสดงการแจ้งเตือน
- ลักษณะการทำงานของการแจ้งเตือน
- รูปแบบการแจ้งเตือนทั่วไป
- คำถามที่พบบ่อยเกี่ยวกับข้อความ Push
- ปัญหาที่พบได้ทั่วไปและการรายงานข้อบกพร่อง