نحوه عملکرد داخلی اعلان‌های Push وب

شما اعلان‌هایی برای پیام‌های جدید، به‌روزرسانی‌های سفارش یا یادآوری‌های پرداخت مشاهده می‌کنید.

ساده به نظر می‌رسد. بک‌اند شما پیامی را ارسال می‌کند و کاربر آن را دریافت می‌کند.

در واقعیت، این فرآیند شامل بخش‌های متحرک زیادی است. بک‌اند شما هرگز مستقیماً با مرورگر صحبت نمی‌کند؛ در عوض، از یک Push Service استفاده می‌کند.

گوگل کروم از Firebase Cloud Messaging استفاده می‌کند. فایرفاکس از Mozilla Push Service استفاده می‌کند.

گردش کار به این صورت است:

Backend → Push Service → Browser → Service Worker → User

در اینجا نحوه ساخت این سیستم با استفاده از React و Golang آورده شده است.

اجزا

  1. Frontend (React): اجازه را درخواست کرده و یک Service Worker را ثبت می‌کند.
  2. Service Worker: یک اسکریپت پس‌زمینه که در مرورگر اجرا می‌شود. این اسکریپت حتی زمانی که وب‌سایت شما بسته است، رویدادها را مدیریت می‌کند.
  3. Backend (Golang): اشتراک‌ها (subscriptions) را ذخیره کرده و پیام‌های رمزنگاری‌شده را ارسال می‌کند.
  4. Push Service: واسطه‌ای که پیام را به مرورگر تحویل می‌دهد.

جریان اشتراک (Subscription Flow)

برای ارسال پیام، به یک اشتراک نیاز دارید.

  • کاربر اجازه را صادر می‌کند.
  • مرورگر یک شیء اشتراک (subscription object) شامل یک endpoint و کلیدهای امنیتی تولید می‌کند.
  • اپلیکیشن React شما این شیء را به بک‌اند Golang خود ارسال می‌کند.
  • بک‌اند شما آن را در یک پایگاه داده ذخیره می‌کند.

شما باید از کلیدهای VAPID برای شناسایی سرور خود استفاده کنید. از یک کلید عمومی (public key) برای فرانت‌اند و یک کلید خصوصی (private key) برای بک‌اند استفاده کنید. هرگز کلید خصوصی خود را به اشتراک نگذارید.

پیاده‌سازی

در React، شما یک Service Worker را برای گوش دادن به رویدادهای push ثبت می‌کنید. این ورکر در پس‌زمینه اجرا می‌شود، داده‌ها را دریافت می‌کند و اعلان را به کاربر نشان می‌دهد.

در Golang، شما از یک کتابخانه برای مدیریت رمزنگاری و احراز هویت VAPID استفاده می‌کنید. سرور شما اشتراک را از پایگاه داده می‌خواند، محتوا (payload) را رمزنگاری می‌کند و آن را به سرویس push مرورگر ارسال می‌کند.

مقیاس‌پذیری برای محیط عملیاتی (Production)

یک تنظیمات ساده برای پروژه‌های کوچک مناسب است، اما یک سیستم بزرگ به موارد بیشتری نیاز دارد.

  • مدیریت چندین دستگاه: یک کاربر ممکن است یک گوشی و یک لپ‌تاپ داشته باشد. اشتراک‌های متعدد را برای هر کاربر ذخیره کنید.
  • پاکسازی داده‌ها: اشتراک‌ها منقضی می‌شوند. اگر با خطای 404 یا 410 مواجه شدید، آن اشتراک را از پایگاه داده خود حذف کنید.
  • استفاده از صف‌ها (Queues): برای میلیون‌ها کاربر، از Kafka یا ابزارهای مشابه استفاده کنید. این کار به سیستم شما اجازه می‌دهد اعلان‌ها را به صورت ناهمگام (asynchronously) پردازش کند.
  • پیاده‌سازی تلاش مجدد (retries): از روش exponential backoff برای مدیریت شکست‌های شبکه استفاده کنید.

WebSockets برای چت‌های زنده زمانی که کاربر فعال است مناسب هستند، اما Web Push برای دسترسی به کاربران زمانی که تب مرورگر بسته است، بهتر است.

منبع: https://dev.to/chandu_bobbili_06/how-web-push-notifications-work-internally-implementing-with-react-golang-6m