การสร้างความผูกพันแบบเรียลไทม์: Web Push Notifications ใน Rails 8

นักพัฒนาอิสระ (Solo developers) มักจะพบกับอุปสรรคเมื่อต้องสร้างฟีเจอร์สำหรับมือถือ เมื่อก่อนคุณจำเป็นต้องมีแอปแบบ Native เพื่อส่งการแจ้งเตือนแบบ Push หากไม่มี คุณก็ต้องพึ่งพาอีเมลหรือ SMS ที่มีราคาแพง

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

และนี่คือวิธีการตั้งค่าใน Rails 8

ขั้นตอนการทำงาน (The Workflow)

  • การสมัครรับข้อมูล (Subscription): ผู้ใช้คลิก "อนุญาต" (allow) ในเบราว์เซอร์ เบราว์เซอร์จะให้ subscription object มา
  • การจัดเก็บ (Storage): คุณบันทึก object นี้ลงในฐานข้อมูลโดยเชื่อมโยงกับผู้ใช้
  • การส่ง Push (The Push): เซิร์ฟเวอร์ Rails ของคุณจะส่งข้อความที่มีการลงลายเซ็น (signed message) ไปยังบริการ push ของเบราว์เซอร์
  • การส่งมอบ (Delivery): Service worker บนอุปกรณ์จะแสดงการแจ้งเตือนขึ้นมา

ขั้นตอนการตั้งค่า (Setup Steps)

  1. ความปลอดภัย (Security) คุณต้องมี VAPID keys เพื่อระบุตัวตนของเซิร์ฟเวอร์ของคุณ สิ่งนี้จะช่วยป้องกันไม่ให้แฮกเกอร์ส่งการแจ้งเตือนปลอมได้ เพิ่ม gem web-push ลงใน Gemfile ของคุณ รัน web-push generate-vapid-keys ใน terminal ของคุณ บันทึกคีย์เหล่านี้ไว้ในไฟล์ credentials

  2. ฐานข้อมูล (Database) ผู้ใช้มักจะมีหลายอุปกรณ์ คุณควรสร้าง model เพื่อจัดเก็บ subscriptions รัน: rails g model WebPushSubscription user:references endpoint:string p256dh_key:string auth_key:string รัน: rails db:migrate

  3. Service Worker สร้าง public/service-worker.js ไฟล์นี้จะทำงานแม้ว่าเว็บไซต์ของคุณจะถูกปิดอยู่ก็ตาม โดยมันจะคอยฟังเหตุการณ์ push และแสดงการแจ้งเตือน

  4. ส่วนหน้าบ้าน (Frontend) ลงทะเบียน worker ใน application.js ของคุณ ใช้ Stimulus controller เพื่อขออนุญาต และส่งข้อมูล subscription ไปยัง Rails controller ผ่าน POST request

  5. งานเบื้องหลัง (Background Jobs) อย่าส่งการแจ้งเตือนในวงจรการร้องขอหลัก (main request cycle) ให้ใช้ background job เพื่อหลีกเลี่ยงการทำให้แอปของคุณทำงานช้าลง สร้าง SendWebPushJob วนลูปผ่าน subscriptions ของผู้ใช้ ใช้ gem web-push เพื่อส่ง payload ลบ subscriptions หากข้อมูลนั้นไม่ถูกต้องอีกต่อไป

คุณสามารถสร้างแอปที่ให้ความรู้สึกเหมือนประสบการณ์บนมือถือแบบ Native ได้ โดยใช้เพียง Rails และ Javascript เพียงเล็กน้อยเท่านั้น

แหล่งที่มา: https://dev.to/zilton7/real-time-engagement-web-push-notifications-in-rails-8-5gdp