กลไกการทำงานภายในของ Web Push Notifications
คุณเห็นการแจ้งเตือนสำหรับข้อความใหม่, การอัปเดตคำสั่งซื้อ หรือการแจ้งเตือนการชำระเงิน
มันดูเหมือนง่าย แค่ Backend ของคุณส่งข้อความไปแล้วผู้ใช้ก็ได้รับมัน
ในความเป็นจริง กระบวนการนี้ประกอบด้วยส่วนประกอบหลายอย่างที่ทำงานร่วมกัน Backend ของคุณไม่ได้สื่อสารกับเบราว์เซอร์โดยตรง แต่จะใช้ Push Service แทน
Google Chrome ใช้ Firebase Cloud Messaging ส่วน Firefox ใช้ Mozilla Push Service
ขั้นตอนการทำงานเป็นดังนี้:
Backend → Push Service → Browser → Service Worker → User
นี่คือวิธีการสร้างระบบนี้โดยใช้ React และ Golang
ส่วนประกอบต่างๆ
- Frontend (React): ขออนุญาต (permission) และลงทะเบียน Service Worker
- Service Worker: สคริปต์ที่ทำงานเบื้องหลัง (background script) ซึ่งอยู่ในเบราว์เซอร์ ทำหน้าที่จัดการเหตุการณ์ต่างๆ แม้ว่าเว็บไซต์ของคุณจะถูกปิดไปแล้วก็ตาม
- Backend (Golang): จัดเก็บข้อมูลการสมัครรับข้อมูล (subscriptions) และส่งข้อความที่เข้ารหัสแล้ว
- Push Service: ตัวกลางที่ทำหน้าที่ส่งข้อความไปยังเบราว์เซอร์
ขั้นตอนการสมัครรับข้อมูล (Subscription Flow)
ในการส่งข้อความ คุณจำเป็นต้องมีการสมัครรับข้อมูล (subscription)
- ผู้ใช้ให้การอนุญาต
- เบราว์เซอร์จะสร้าง subscription object ที่ประกอบด้วย endpoint และคีย์ความปลอดภัย (security keys)
- แอป React ของคุณจะส่ง object นี้ไปยัง Golang backend
- Backend ของคุณจะบันทึกข้อมูลนี้ลงในฐานข้อมูล
คุณต้องใช้ VAPID keys เพื่อระบุตัวตนของเซิร์ฟเวอร์ของคุณ โดยใช้ public key สำหรับ frontend และ private key สำหรับ backend ห้ามแชร์ private key ของคุณโดยเด็ดขาด
การนำไปใช้งาน (Implementation)
ใน React คุณต้องลงทะเบียน Service Worker เพื่อคอยรับเหตุการณ์ push (push events) โดย worker นี้จะทำงานอยู่เบื้องหลัง ทำหน้าที่รับข้อมูลและแสดงการแจ้งเตือนให้ผู้ใช้เห็น
ใน Golang คุณจะใช้ library เพื่อจัดการเรื่องการเข้ารหัส (encryption) และการยืนยันตัวตนด้วย VAPID เซิร์ฟเวอร์ของคุณจะอ่านข้อมูล subscription จากฐานข้อมูล เข้ารหัส payload และส่งไปยัง browser push service
การขยายระบบเพื่อใช้งานจริง (Scaling for Production)
การตั้งค่าแบบง่ายๆ อาจใช้ได้กับโปรเจกต์ขนาดเล็ก แต่ระบบขนาดใหญ่ต้องการสิ่งที่มากกว่านั้น
- จัดการอุปกรณ์ที่หลากหลาย: ผู้ใช้หนึ่งคนอาจมีทั้งโทรศัพท์และแล็ปท็อป ดังนั้นควรจัดเก็บหลาย subscriptions ต่อผู้ใช้หนึ่งคน
- ทำความสะอาดข้อมูล: Subscriptions มีวันหมดอายุ หากคุณได้รับ error 404 หรือ 410 ให้ลบ subscription นั้นออกจากฐานข้อมูลของคุณ
- ใช้คิว (Queues): สำหรับผู้ใช้จำนวนหลายล้านคน ให้ใช้ Kafka หรือเครื่องมือที่คล้ายกัน เพื่อช่วยให้ระบบของคุณสามารถประมวลผลการแจ้งเตือนแบบ asynchronous ได้
- ใช้ระบบลองใหม่ (retries): ใช้เทคนิค exponential backoff เพื่อจัดการกับความล้มเหลวของเครือข่าย
WebSockets เหมาะสำหรับการแชทสดเมื่อผู้ใช้กำลังใช้งานอยู่ แต่ Web Push จะดีกว่าในการเข้าถึงผู้ใช้เมื่อแท็บเบราว์เซอร์ถูกปิดไปแล้ว