Web Push Bildirimleri Dahili Olarak Nasıl Çalışır

Yeni mesajlar, sipariş güncellemeleri veya ödeme hatırlatıcıları için bildirimler görürsünüz.

Basit görünür. Backend'iniz bir mesaj gönderir ve kullanıcı bunu alır.

Gerçekte süreç birçok hareketli parçayı içerir. Backend'iniz tarayıcıyla asla doğrudan konuşmaz. Bunun yerine bir Push Service kullanır.

Google Chrome, Firebase Cloud Messaging kullanır. Firefox, Mozilla Push Service kullanır.

İş akışı şu şekilde işler:

Backend → Push Service → Tarayıcı → Service Worker → Kullanıcı

İşte bu sistemi React ve Golang kullanarak nasıl inşa edeceğiniz.

Bileşenler

  1. Frontend (React): İzin ister ve bir Service Worker kaydeder.
  2. Service Worker: Tarayıcıda yaşayan bir arka plan betiğidir. Web siteniz kapalı olsa bile olayları yönetir.
  3. Backend (Golang): Abonelikleri saklar ve şifrelenmiş mesajlar gönderir.
  4. Push Service: Mesajı tarayıcıya ileten aracıdır.

Abonelik Akışı

Bir mesaj göndermek için bir aboneliğe ihtiyacınız vardır.

  • Kullanıcı izin verir.
  • Tarayıcı, bir uç nokta (endpoint) ve güvenlik anahtarları içeren bir abonelik nesnesi oluşturur.
  • React uygulamanız bu nesneyi Golang backend'inize gönderir.
  • Backend'iniz bunu bir veritabanına kaydeder.

Sunucunuzu tanımlamak için VAPID anahtarlarını kullanmalısınız. Frontend için bir genel (public) anahtar, backend için ise bir özel (private) anahtar kullanın. Özel anahtarınızı asla paylaşmayın.

Uygulama

React'te, push olaylarını dinlemek için bir Service Worker kaydedersiniz. Bu worker arka planda çalışır. Veriyi alır ve bildirimi kullanıcıya gösterir.

Golang'de, şifreleme ve VAPID kimlik doğrulamasını yönetmek için bir kütüphane kullanırsınız. Sunucunuz aboneliği veritabanınızdan okur, payload'u şifreler ve tarayıcı push servisine gönderir.

Üretim İçin Ölçeklendirme

Basit bir kurulum küçük projeler için işe yarar. Büyük bir sistem daha fazlasına ihtiyaç duyar.

  • Birden fazla cihazı yönetin: Bir kullanıcının bir telefonu ve bir dizüstü bilgisayarı olabilir. Kullanıcı başına birden fazla abonelik saklayın.
  • Verileri temizleyin: Aboneliklerin süresi dolar. Eğer 404 veya 410 hatası alırsanız, o aboneliği veritabanınızdan silin.
  • Kuyruklar kullanın: Milyonlarca kullanıcı için Kafka veya benzeri bir araç kullanın. Bu, sisteminizin bildirimleri asenkron olarak işlemesini sağlar.
  • Yeniden denemeleri uygulayın: Ağ hatalarını yönetmek için exponential backoff yöntemini kullanın.

WebSockets, kullanıcı aktif olduğunda canlı sohbetler için iyidir. Web Push ise sekme kapalıyken kullanıcılara ulaşmak için daha iyidir.

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