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

Matt Gaunt

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

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

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

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

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

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

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

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

ซึ่งทั้งหมดนี้ทําใน JavaScript ด้วย Push API

การรองรับเบราว์เซอร์

• 42
• 17
• 44
• 16

แหล่งที่มา

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

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

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

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

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

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

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

บริการ Push คืออะไรและใครเป็นผู้ดำเนินการ

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

เบราว์เซอร์แต่ละรายการสามารถใช้บริการ Push ใดก็ได้ที่ต้องการ ซึ่งเป็นสิ่งที่นักพัฒนาแอปไม่สามารถควบคุมได้ ซึ่งไม่มีปัญหาเนื่องจากบริการ Push ทุกบริการคาดหวังการเรียก API เดียวกัน ซึ่งหมายความว่าคุณไม่จําเป็นต้องสนใจว่าบริการ Push เป็นของใคร เพียงแค่ต้องตรวจสอบว่าการเรียก 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/] บริการ Push จะเป็น "random-push-service.com" และปลายทางแต่ละรายการจะระบุผู้ใช้แต่ละรายโดยระบุด้วย "some-kind-of-unique-id-1234" เมื่อเริ่มใช้งาน Push คุณจะเห็นรูปแบบนี้

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

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

เราบอกไปแล้วว่าบริการ Push บนเว็บทุกบริการต้องการการเรียก API เดียวกัน API ดังกล่าวคือ Web Push Protocol ซึ่งเป็นมาตรฐาน IETF ที่กําหนดวิธีเรียก API ไปยังบริการ Push

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ทั้งหมดนี้คือขั้นตอนการรับส่งข้อความ Push

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

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

Code labs

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