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

Matt Gaunt

ก่อนที่จะเข้าสู่ API เรามาดูการผลักดันจากระดับสูงกัน ตั้งแต่ต้นจนจบ จากนั้นเมื่อเรา ทีละขั้นตอนหรือแต่ละหัวข้อหรือ API ในภายหลัง คุณก็จะมีแนวคิดว่า เป็นอย่างมาก

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

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

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

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

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

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

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

ซึ่งทั้งหมดนี้จะดำเนินการใน JavaScript ด้วย Push API

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

• 42 ปี
• 17 ปี
• 44 ปี
• 16 ปี

แหล่งที่มา

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

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

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

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

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

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

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

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

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

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

หากต้องการ URL ที่เหมาะสมเพื่อทริกเกอร์ข้อความพุช (นั่นคือ URL สำหรับบริการพุช) คุณต้อง เพียงแค่ดูค่า 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 นั้นคือ โปรโตคอลพุชบนเว็บ ซึ่งเป็นมาตรฐาน IETF ที่กำหนดวิธีที่คุณเรียก API ไปยังบริการพุช

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

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

API เป็นวิธีส่งข้อความไปยังผู้ใช้โดยมี / ไม่มีข้อมูล และ แสดงวิธีส่งข้อความ

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

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

คำแนะนำจะมีรายละเอียดต่างๆ เช่น

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

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

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

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

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

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

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

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

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

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

สถานที่ที่จะไปต่อ

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

Code Lab

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