ภาพรวมข้อความ Push

ภาพรวมเกี่ยวกับความหมายของข้อความ Push เหตุผลที่ควรใช้ และวิธีการทํางาน

Kayce Basques

Matt Gaunt

ข้อความ Push คืออะไร

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

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

วันที่

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

เหตุใดจึงควรใช้ข้อความ Push

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

ข้อความ Push ทำงานอย่างไร

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

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

ส่วนที่เหลือของหน้านี้จะอธิบายขั้นตอนเหล่านี้อย่างละเอียด

รับสิทธิ์ส่งข้อความ Push

ก่อนอื่น เว็บไซต์ของคุณต้องได้รับสิทธิ์จากผู้ใช้เพื่อส่งข้อความ Push ควรใช้ท่าทางสัมผัสของผู้ใช้ เช่น การคลิกปุ่มใช่ ข้างพรอมต์ Do you want to receive push notifications? หลังจากการยืนยันแล้ว โทรหา Notification.requestPermission() ระบบปฏิบัติการหรือ บนอุปกรณ์ของผู้ใช้ อาจมี UI บางอย่างเพื่อยืนยันอย่างเป็นทางการว่า ผู้ใช้ต้องการเลือกรับข้อความ Push UI นี้จะแตกต่างกันไปตามแพลตฟอร์ม

สมัครรับข้อความ Push ให้ลูกค้า

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

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

ส่งข้อความพุช

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

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

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

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

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

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

{
  "endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
  "expirationTime": null,
  "keys": {
    "p256dh": "BGyyVt9FFV…",
    "auth": "R9sidzkcdf…"
  }
}

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

ระบบจะใช้ keys สำหรับการเข้ารหัส ซึ่งจะอธิบายต่อไป

เข้ารหัสข้อความพุช

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

เซ็นชื่อคำขอโปรโตคอลข้อความพุชจากเว็บ

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

เวิร์กโฟลว์นี้จะมีคีย์ส่วนตัวและคีย์สาธารณะเฉพาะสำหรับ แอปพลิเคชัน กระบวนการตรวจสอบสิทธิ์มีขั้นตอนคร่าวๆ ดังนี้

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

ปรับแต่งการส่งข้อความพุช

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

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

รับและแสดงข้อความพุชเป็นการแจ้งเตือน

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

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

เมื่อเบราว์เซอร์ไคลเอ็นต์ได้รับข้อความที่พุช เบราว์เซอร์จะถอดรหัสข้อความพุช ข้อมูลแล้วส่งเหตุการณ์ push ไปยังบริการของคุณ ผู้ปฏิบัติงาน Service Worker คือ พูดง่ายๆ ก็คือ เป็นโค้ด JavaScript ที่สามารถทำงานในพื้นหลัง แม้แต่ในกรณีที่เว็บไซต์ของคุณ ไม่ได้เปิดอยู่หรือเบราว์เซอร์ปิดอยู่ ในเหตุการณ์ push ของโปรแกรมทำงานของบริการ เครื่องจัดการที่คุณเรียกใช้ ServiceWorkerRegistration.showNotification() เพื่อแสดงข้อมูล เป็นการแจ้งเตือน

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

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

Code Lab

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