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

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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

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

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

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

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

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

ขั้นตอนสำคัญระดับสูงสำหรับการใช้ข้อความ Push มีดังนี้

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

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

ขอสิทธิ์ในการส่งข้อความ Push

ก่อนอื่นเว็บไซต์ของคุณต้องได้รับสิทธิ์จากผู้ใช้ในการส่งข้อความ Push ซึ่งควรทริกเกอร์โดยท่าทางผู้ใช้ เช่น การคลิกปุ่มใช่ ข้างข้อความแจ้งว่า Do you want to receive push notifications? หลังจากยืนยันแล้ว ให้เรียก Notification.requestPermission() ระบบปฏิบัติการหรือเบราว์เซอร์ในอุปกรณ์ของผู้ใช้อาจแสดง UI บางอย่างเพื่อยืนยันอย่างเป็นทางการว่าผู้ใช้ต้องการเลือกรับข้อความ Push UI นี้จะแตกต่างกันไปในแต่ละแพลตฟอร์ม

สมัครรับข้อความ Push ของไคลเอ็นต์

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

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

1 ขอสิทธิ์ในการส่งข้อความพุช 2. Get PushSubscription 3. ส่ง PushSubscription ไปยังเซิร์ฟเวอร์

ส่งข้อความ Push

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

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

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

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

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

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

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

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

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

ลงชื่อคำขอโปรโตคอล Web Push

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

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

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

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

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

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

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

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

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

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

1. ข้อความจะปรากฏในอุปกรณ์ 2. เบราว์เซอร์เรียกใช้ Service Worker 3. ส่งเหตุการณ์พุช

สิ่งที่ควรทำต่อไป

Code Lab