ภาพรวมข้อความ Push

ภาพรวมของข้อความ Push คืออะไร เหตุใดคุณจึงควรใช้ข้อความประเภทนี้ และวิธีการทำงานของข้อความ Push

Kayce Basques

Matt Gaunt

ข้อความ Push คืออะไร

ข้อความพุชช่วยให้คุณสามารถนำเสนอข้อมูลเพื่อดึงดูดความสนใจของผู้ใช้ได้ แม้ว่าผู้ใช้จะไม่ได้ใช้เว็บไซต์ของคุณก็ตาม ซึ่งเรียกว่าข้อความ push เพราะคุณสามารถ "พุช" ข้อมูลถึงผู้ใช้ได้แม้ว่าผู้ใช้จะไม่ได้ใช้งาน เปรียบเทียบเทคโนโลยีการพุชกับเทคโนโลยีแบบพุลเพื่อทำความเข้าใจแนวคิดนี้ให้ดียิ่งขึ้น

การแจ้งเตือนจะแสดงข้อมูลสั้นๆ ต่อผู้ใช้ เว็บไซต์สามารถใช้การแจ้งเตือนเพื่อแจ้งให้ผู้ใช้ทราบเกี่ยวกับเหตุการณ์สำคัญที่มีกำหนดเวลา หรือการดำเนินการที่ผู้ใช้ต้องทำ รูปลักษณ์ของการแจ้งเตือนจะแตกต่างกันไปในแต่ละแพลตฟอร์ม ดังนี้

ตัวอย่างการแจ้งเตือนใน macOS และ Android

ข้อความ Push และการแจ้งเตือนเป็นเทคโนโลยี 2 อย่างที่แยกจากกันแต่ส่งเสริมกันและกัน พุชเป็นเทคโนโลยีในการส่งข้อความจากเซิร์ฟเวอร์ของคุณถึงผู้ใช้ แม้ว่าผู้ใช้จะไม่ได้ใช้งานเว็บไซต์ของคุณอยู่ก็ตาม การแจ้งเตือนเป็นเทคโนโลยีในการแสดง ข้อมูลที่พุชบนอุปกรณ์ของผู้ใช้ คุณสามารถใช้การแจ้งเตือน โดยไม่ต้องส่งข้อความพุช วันหนึ่งคุณอาจสามารถใช้ข้อความ Push โดยไม่มีการแจ้งเตือนที่แสดงต่อผู้ใช้ (ข้อความ Push) ได้ แต่เบราว์เซอร์ยังไม่รองรับในปัจจุบัน ในทางปฏิบัติแล้วมักใช้ด้วยกัน ผู้ใช้ที่ไม่เกี่ยวข้องกับด้านเทคนิคอาจไม่เข้าใจความแตกต่างระหว่างข้อความ Push กับการแจ้งเตือน ในคอลเล็กชันนี้ เมื่อเราพูดว่าข้อความ Push เราหมายถึงชุดค่าผสมของข้อความ Push ตามด้วยการแสดงเป็นการแจ้งเตือน เมื่อเราพูดว่าข้อความ Push เราหมายถึงเทคโนโลยีพุชในตัวเอง และเมื่อเราพูดว่าการแจ้งเตือน เราหมายถึงเทคโนโลยีการแจ้งเตือนอยู่แล้ว

เหตุใดจึงควรใช้ข้อความ Push

• สำหรับผู้ใช้ ข้อความ Push เป็นวิธีหนึ่งในการรับข้อมูลที่ทันเวลา มีความเกี่ยวข้อง และแม่นยำ
• สำหรับคุณ (เจ้าของเว็บไซต์) ข้อความ Push เป็นวิธีเพิ่มการมีส่วนร่วมของผู้ใช้

คำเตือน: หากคุณพยายามใช้ข้อความ Push ในเนื้อหาที่ผู้ใช้ไม่สามารถตามทัน มีความเกี่ยวข้อง และแม่นยำ ก็อาจทำให้ผู้ใช้รู้สึกรำคาญและลดการมีส่วนร่วมโดยรวมได้

ข้อความ Push ทำงานอย่างไร

ขั้นตอนสำคัญในการใช้ข้อความ Push ในภาพรวมมีดังนี้

1. การเพิ่มตรรกะของไคลเอ็นต์เพื่อขอสิทธิ์ส่งข้อความ Push จากผู้ใช้ จากนั้นจึงส่งข้อมูลตัวระบุไคลเอ็นต์ไปยังเซิร์ฟเวอร์เพื่อจัดเก็บไว้ในฐานข้อมูล
2. การเพิ่มตรรกะของเซิร์ฟเวอร์เพื่อพุชข้อความไปยังอุปกรณ์ไคลเอ็นต์
3. เพิ่มตรรกะของไคลเอ็นต์เพื่อรับข้อความที่พุชไปยังอุปกรณ์และแสดงเป็นการแจ้งเตือน

ส่วนที่เหลือของหน้านี้จะอธิบายขั้นตอนเหล่านี้โดยละเอียด

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

รับและแสดงข้อความที่พุชเป็นการแจ้งเตือน

เมื่อคุณส่งคำขอโปรโตคอลพุชจากเว็บไปยังบริการพุชแล้ว บริการพุชจะเก็บคำขอของคุณไว้ในคิวจนกว่าจะเกิดเหตุการณ์ใดเหตุการณ์หนึ่งต่อไปนี้

1. ไคลเอ็นต์จะออนไลน์และบริการพุชส่งข้อความพุช
2. ข้อความหมดอายุ

เมื่อเบราว์เซอร์ของไคลเอ็นต์ได้รับข้อความที่พุชเข้ามา ระบบจะถอดรหัสข้อมูลข้อความพุชและส่งเหตุการณ์ push ไปยังผู้ปฏิบัติงานบริการของคุณ โดยทั่วไปแล้ว โปรแกรมทำงานของบริการคือโค้ด JavaScript ที่ทำงานอยู่เบื้องหลังได้แม้ว่าเว็บไซต์ไม่ได้เปิดอยู่หรือเบราว์เซอร์ปิดอยู่ ในโปรแกรมจัดการเหตุการณ์ push ของ Service Worker คุณจะเรียกใช้ ServiceWorkerRegistration.showNotification() เพื่อแสดงข้อมูลเป็นการแจ้งเตือน

ขั้นตอนถัดไป

• ภาพรวมข้อความ Push ในเว็บ
• วิธีการทำงานของ Push
• การสมัครใช้บริการ
• UX ของสิทธิ์
• การส่งข้อความด้วยไลบรารีพุชจากเว็บ
• โปรโตคอลพุชจากเว็บ
• การจัดการเหตุการณ์พุช
• การแสดงการแจ้งเตือน
• ลักษณะการทำงานของการแจ้งเตือน
• รูปแบบการแจ้งเตือนทั่วไป
• คำถามที่พบบ่อยเกี่ยวกับข้อความ Push
• ปัญหาที่พบได้ทั่วไปและการรายงานข้อบกพร่อง

ห้องทดลองการเขียนโค้ด

• สร้างไคลเอ็นต์ข้อความ Push
• สร้างเซิร์ฟเวอร์ข้อความ Push