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

Matt Gaunt

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

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

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

มาดูรายละเอียดเพิ่มเติมเกี่ยวกับสิ่งที่ต้องทำในแต่ละขั้นตอนกัน

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

ขั้นตอนแรกคือการ "สมัครรับ" ข้อความ Push ของผู้ใช้

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

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

ทั้งหมดนี้ทำใน JavaScript ด้วย Push API

Browser Support

• 42
• 17
• 44
• 16

Source

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

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

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

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

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

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

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

ใครเป็นผู้ให้บริการพุชและบริการพุชคืออะไร

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

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

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

ด้านล่างนี้คือตัวอย่างค่าที่คุณจะได้รับจาก 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 ดังกล่าวคือ Web Push Protocol ซึ่งเป็นมาตรฐาน IETF ที่กำหนดวิธีเรียก API ไปยังบริการพุช

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

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

API มีวิธีส่งข้อความถึงผู้ใช้โดยมี/ไม่มีข้อมูล และให้วิธีการวิธีส่งข้อความ

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

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

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

• ระยะเวลาที่ข้อความ Push จะยังคงอยู่ ซึ่งจะกำหนดระยะเวลาที่ควรจัดคิวข้อความก่อนที่จะนำออกและไม่นำส่ง

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

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

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

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

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

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

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

คุณสามารถทำงานในเบื้องหลังได้ภายในเหตุการณ์ "พุช" ของ Service Worker คุณสามารถเรียกใช้การวิเคราะห์ แคชหน้าเว็บแบบออฟไลน์ และแสดงการแจ้งเตือนได้

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

ขั้นตอนต่อไป

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

Code Labs

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