วิธีการทำงานของพุช

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

ขั้นตอนสำคัญ 3 ขั้นตอนในการนำพุชไปใช้ ได้แก่

  1. การเพิ่มตรรกะฝั่งไคลเอ็นต์ในการสมัครรับข้อมูลของผู้ใช้ที่จะพุช (เช่น JavaScript และ UI ในเว็บแอปของคุณซึ่งจะลงทะเบียนผู้ใช้เพื่อพุชข้อความ)
  2. การเรียก API จากระบบแบ็กเอนด์ / แอปพลิเคชันของคุณที่เรียกข้อความพุชไปยังอุปกรณ์ของผู้ใช้
  3. ไฟล์ JavaScript ของโปรแกรมทำงานของบริการที่จะได้รับ "เหตุการณ์พุช" เมื่อมีการพุชเข้ามาในอุปกรณ์ คุณจะสามารถแสดงการแจ้งเตือนได้ใน JavaScript นี้

ลองมาดูรายละเอียดของแต่ละขั้นตอนเหล่านี้กัน

ขั้นตอนที่ 1: ฝั่งไคลเอ็นต์

ขั้นตอนแรกคือ "ติดตาม" ผู้ใช้เพื่อพุชข้อความ

การสมัครใช้บริการของผู้ใช้จำเป็นต้องมี 2 สิ่งต่อไปนี้ อย่างแรก การรับสิทธิ์จากผู้ใช้ในการส่งข้อความพุชของพวกเขา อย่างที่ 2 รับ PushSubscription จากเบราว์เซอร์

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

ซึ่งทำใน JavaScript ด้วย Push API

การสนับสนุนเบราว์เซอร์

  • 42
  • 17
  • 44
  • 16

แหล่งที่มา

ก่อนสมัครใช้บริการผู้ใช้ คุณต้องสร้างชุด "คีย์เซิร์ฟเวอร์แอปพลิเคชัน" ซึ่งเราจะอธิบายในภายหลัง

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

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

โปรดตรวจสอบว่าคุณส่ง Push Subscription ไปยังแบ็กเอนด์

ขั้นตอนที่ 2: ส่งข้อความพุช

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

คำถามบางข้อที่คุณอาจถามตัวเองมีดังนี้

  • ใครและบริการพุชคืออะไร
  • API มีลักษณะอย่างไร เป็น JSON, XML หรืออย่างอื่นไหม
  • API ทำอะไรได้บ้าง

ใครและบริการพุชคืออะไร

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

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

คุณต้องดูค่า endpoint ใน PushSubscription เพื่อรับ URL ที่เหมาะสมเพื่อทริกเกอร์ข้อความพุช (ซึ่งก็คือ URL ของบริการพุช)

ตัวอย่างค่าที่คุณจะได้รับจาก PushSubscription มีดังนี้

{
  "endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/",
  "keys": {
    "p256dh": "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM=",
    "auth": "tBHItJI5svbpez7KI4CCXg=="
  }
}

ปลายทางในกรณีนี้คือ [https://random-push-service.com/some-kind-of-unique-id-1234/v2/] บริการพุชจะเป็น "random-push-service.com" และปลายทางแต่ละจุดจะไม่ซ้ำกันสำหรับผู้ใช้ โดยมี "some-kind-of-unique-id-1234" เมื่อคุณเริ่มใช้พุช คุณจะเห็นรูปแบบนี้

เราจะกล่าวถึงคีย์ในการสมัครใช้บริการในภายหลัง

API มีลักษณะอย่างไร

เราบอกว่าบริการพุชจากเว็บทุกรายการคาดหวังการเรียก API แบบเดียวกัน API ดังกล่าวคือโปรโตคอลพุชจากเว็บ ซึ่งเป็นมาตรฐาน IETF ที่กำหนดวิธีที่คุณเรียก API ไปยังบริการพุช

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

API ทำอะไรได้บ้าง

โดย API ดังกล่าวจะระบุวิธีส่งข้อความไปยังผู้ใช้พร้อม / ไม่มีข้อมูล และแนะนำวิธีส่งข้อความ

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

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

วิธีการมีรายละเอียดต่างๆ เช่น

  • Time to Live ของข้อความพุช ตัวเลือกนี้ระบุระยะเวลาที่ต้องการให้ข้อความอยู่ในคิวก่อนที่จะถูกนำออกและไม่นำส่ง

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

  • ตั้งชื่อ "หัวข้อ" ให้กับข้อความพุช ซึ่งจะแทนที่ข้อความที่รอดำเนินการด้วยข้อความใหม่นี้

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

ขั้นตอนที่ 3: พุชเหตุการณ์ในอุปกรณ์ของผู้ใช้

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

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

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

โปรแกรมทำงานของบริการคือไฟล์ JavaScript "พิเศษ" เบราว์เซอร์จะเรียกใช้ JavaScript นี้ได้โดยไม่ต้องเปิดหน้าเว็บ และยังเรียกใช้ JavaScript นี้ได้เมื่อปิดเบราว์เซอร์ โปรแกรมทำงานของบริการก็มี API อย่าง Push ที่ไม่มีในหน้าเว็บ (กล่าวคือ API ที่ไม่มีอยู่ในสคริปต์โปรแกรมทำงานของบริการ)

ซึ่งจะอยู่ในเหตุการณ์ "push" ของ Service Worker ซึ่งคุณสามารถทำงานในเบื้องหลังได้ คุณสามารถโทร Analytics แคชหน้าแบบออฟไลน์ และแสดงการแจ้งเตือน

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

และนั่นคือขั้นตอนทั้งหมดสำหรับการรับส่งข้อความพุช

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

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