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

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

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

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

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

ข้อความ Push และการแจ้งเตือนเป็นเทคโนโลยี 2 อย่างที่แตกต่างกันแต่ใช้ร่วมกันได้ Push คือเทคโนโลยีการส่งข้อความจากเซิร์ฟเวอร์ไปยังผู้ใช้ แม้ว่าผู้ใช้จะไม่ได้ใช้เว็บไซต์อยู่ก็ตาม การแจ้งเตือนเป็นเทคโนโลยีสำหรับแสดงข้อมูลที่พุชในอุปกรณ์ของผู้ใช้ คุณใช้การแจ้งเตือนได้โดยไม่ต้องใช้ข้อความ 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 คำขอบริการเว็บที่คุณส่งไปยังบริการ Push เรียกว่าคำขอโปรโตคอล Web Push คำขอโปรโตคอล Push บนเว็บควรมีข้อมูลต่อไปนี้

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

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

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

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

เบราว์เซอร์แต่ละรายการจะใช้บริการ Push ใดก็ได้ที่ต้องการ คุณในฐานะนักพัฒนาเว็บไซต์ไม่มีสิทธิ์ควบคุมข้อมูลดังกล่าว ปัญหานี้ไม่ใช่ปัญหาเนื่องจากคําขอโปรโตคอล Web 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 ใด และบริการ Push อาจไม่ปลอดภัยหรือมีช่องโหว่ในทฤษฎี เซิร์ฟเวอร์ของคุณต้องใช้keysที่ระบุไว้ใน PushSubscription เพื่อเข้ารหัสคำขอโปรโตคอล Web Push

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

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

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

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

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

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

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

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

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

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

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

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

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

Code labs