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

ภาพรวมของข้อความ Push, เหตุผลที่คุณควรใช้ และวิธีการทำงานของข้อความ Push

Kayce Basques

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

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

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

ตัวอย่างการแจ้งเตือนใน macOS และ Android
ตัวอย่างการแจ้งเตือนใน 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 Notification UI นี้จะแตกต่างกันไปตามแพลตฟอร์ม

สมัครรับข้อความ Push สำหรับลูกค้า

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

สมมติว่าการสมัครใช้บริการสําเร็จ เบราว์เซอร์จะแสดงออบเจ็กต์ PushSubscription คุณจะต้องจัดเก็บข้อมูลนี้ในระยะยาว โดยปกติแล้วการดำเนินการนี้จะทำได้โดยการส่งข้อมูลไปยังเซิร์ฟเวอร์ที่คุณควบคุม แล้วให้เซิร์ฟเวอร์จัดเก็บข้อมูลดังกล่าวไว้ในฐานข้อมูล

ขอสิทธิ์ส่งข้อความ Push รับ PushSubscription ส่ง PushSubscription ไปยังเซิร์ฟเวอร์

ส่งข้อความ Push

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

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

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

เซิร์ฟเวอร์จะส่งคําขอโปรโตคอล Web Push ไปยังบริการ Push และบริการ Push จะส่งข้อความไปยังอุปกรณ์ของผู้ใช้

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

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

อย่างไรก็ตาม คุณต้องตรวจสอบว่าคุณส่งคําขอโปรโตคอล Web Push ไปยังบริการ Push ที่ถูกต้อง ข้อมูล PushSubscription ที่เบราว์เซอร์แสดงให้คุณเห็นในระหว่างกระบวนการสมัครใช้บริการจะให้ข้อมูลนี้ ออบเจ็กต์ PushSubscription จะมีลักษณะดังนี้

{
  "endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
  "expirationTime": null,
  "keys": {
    "p256dh": "BGyyVt9FFV…",
    "auth": "R9sidzkcdf…"
  }
}

โดเมนของ endpoint คือบริการ Push เส้นทางของ endpoint คือข้อมูลตัวระบุไคลเอ็นต์ที่ช่วยให้บริการ Push ระบุได้อย่างชัดเจนว่าควรส่งข้อความไปยังไคลเอ็นต์ใด

keys ใช้สำหรับการเข้ารหัส ซึ่งจะอธิบายในลำดับถัดไป

เข้ารหัสข้อความ Push

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

ลงนามในคำขอโปรโตคอล Push บนเว็บ

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

เวิร์กโฟลว์นี้จะมีคีย์ส่วนตัวและคีย์สาธารณะเฉพาะสำหรับแอปพลิเคชันของคุณ กระบวนการตรวจสอบสิทธิ์จะทำงานโดยคร่าวๆ ดังนี้

  • คุณสร้างคีย์ส่วนตัวและคีย์สาธารณะเป็นงานแบบครั้งเดียว ชุดค่าผสมของคีย์ส่วนตัวและคีย์สาธารณะเรียกว่าคีย์เซิร์ฟเวอร์แอปพลิเคชัน คุณอาจเห็นคีย์เหล่านี้เรียกว่าคีย์ VAPID ด้วย VAPID คือข้อกำหนดที่กําหนดกระบวนการตรวจสอบสิทธิ์นี้
  • การสมัครไคลเอ็นต์ให้ส่งข้อความ Push จากโค้ด JavaScript เป็นการแจ้งคีย์สาธารณะ เมื่อบริการ Push สร้าง endpoint สําหรับอุปกรณ์ ระบบจะเชื่อมโยงคีย์สาธารณะที่ระบุไว้กับ endpoint
  • เมื่อส่งคําขอโปรโตคอล Web Push คุณจะลงนามข้อมูล JSON บางอย่างด้วยคีย์ส่วนตัว
  • เมื่อบริการพุชได้รับคำขอโปรโตคอล Web Push ของคุณ บริการจะใช้คีย์สาธารณะที่จัดเก็บไว้เพื่อตรวจสอบสิทธิ์ข้อมูลที่ลงนาม หากลายเซ็นถูกต้อง บริการ Push จะทราบว่าคำขอมาจากเซิร์ฟเวอร์ที่มีคีย์ส่วนตัวที่ตรงกัน

ปรับแต่งการนำส่งข้อความ Push

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

  • Time to Live (TTL) ของข้อความ ซึ่งระบุระยะเวลาที่บริการพุชควรพยายามส่งข้อความ
  • ความเร่งด่วนของข้อความ ซึ่งมีประโยชน์ในกรณีที่บริการ Push กำลังรักษาอายุการใช้งานแบตเตอรี่ของลูกค้าโดยส่งเฉพาะข้อความที่มีลำดับความสำคัญสูง
  • หัวข้อของข้อความ ซึ่งจะแทนที่ข้อความที่รอดำเนินการของหัวข้อเดียวกันด้วยข้อความล่าสุด

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

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

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

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

ข้อความมาถึงในอุปกรณ์ เบราว์เซอร์ปลุก Service Worker ระบบส่งเหตุการณ์ Push

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

Codelabs