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

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

ขั้นตอนสำคัญ 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

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

คีย์เซิร์ฟเวอร์แอปพลิเคชันหรือที่เรียกว่าคีย์ 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=="
  }
}

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

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

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

ฉันได้กล่าวไปแล้วว่าบริการ Web 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 แล้ว บริการ 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

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

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

Code Lab

• สร้างไคลเอ็นต์การแจ้งเตือน Push
• สร้างเซิร์ฟเวอร์การแจ้งเตือน Push