← Tüm projeler Vaka çalışması · React Native

Mobil push

Platformun mobil istemcileri için push'un React Native tarafı: token kaydı ve yenileme, Android 13 izni, ön plan bildirimleri ve uygulama açık, arka planda ya da kapalıyken de çalışan deep link yönlendirme.

  • 3uygulama durumu yönlendiriliyor
  • RN 0.79React 19, TypeScript
  • FCM+ Notifee
  • 1401'de otomatik tekrar
Deneyin

Uydurma bir uygulamaya push gönderin

Bir uygulama durumu ve deep link seçin, Gönder'e basın, sonra bildirime dokunun. 401 tekrarını görmek için bir hata tatbikatı açın.

push simülatörü · sentetik veriEtkileşimli demo
Etkileşimli simülatör için JavaScript gerekiyor. Bir kampanya formu, gönderim hattı ve bildirimi alıp bağlantılı ekranı açan bir telefon gösteriyor.
İstemci davranışının simülasyonu. Tarayıcınızdan hiçbir mesaj çıkmaz.
Sorun

Mobil uygulaması olan markalar yalnızca uygulamayı değil doğru ekranı açan kampanyalar göndermek istiyordu.

Bir dokunuşun üç farklı durumda ürüne, kategoriye ya da sepete gitmesi gerekiyor ve her durum farklı bir API ile ele alınıyor. Tokenlar değişiyor, oturumlar düşüyor ve Android 13, kimse sormazsa bildirimleri sessizce düşüren bir çalışma anı izni getirdi.

Rolüm

React Native modüllerini ve entegrasyonun test edildiği referans uygulamayı ben geliştirdim. Mesajları kuyruğa alıp gönderen backend, RabbitMQ ve FCM worker'ı olan mevcut bir Java/Spring servisi; onunla entegre oldum ve teslimat sorunlarında kuyruk bağlantılarını izledim.

  • Profil endpointi üzerinden FCM token kaydı ve yenilenen tokenları yakalayan dinleyici
  • 401'de bir kez otomatik yeniden giriş ve tekrar deneyen JWT oturumu
  • Android 13+ izin kontrolü ve bildirim kanalı
  • Payload normalleştirme; ön plan, arka plan ve soğuk başlangıç için dokunma yönlendirme
  • Token ya da topic ile gönderim için debug paneli ve scriptler
Mimari

Kampanyadan ekrana

  1. PanelPazarlamacı kampanyayı oluşturur.
  2. Push backendMevcut Spring servisi RabbitMQ'ya kuyruğa alır.
  3. FCM workerMevcut worker Firebase Cloud Messaging ile gönderir.
  4. CihazPayload'u normalleştir, bildirimi göster, dokunuşu ele al.
  5. YönlendirmeAna sayfa, Kategori, Ürün ya da Sepet'i aç.

Mor ton: benim yazdığım kısımlar.

Mühendislik kararları

Zor olan neydi, ne yaptım

Her uygulama durumu için bir dokunma yolu

Ön plandaki mesajlar onMessage ile gelip Notifee ile gösteriliyor. Arka plandaki dokunuşlar onNotificationOpenedApp, soğuk başlangıçlar getInitialNotification üzerinden geliyor. Üçü de tek bir yönlendiriciye bağlı; bir link her yerde aynı davranıyor.

Tek payload şekli

Kampanyalar alanları farklı yerlerde getiriyor. Bir normalleştirici, herhangi bir şey render edilmeden önce bunları başlık, metin, görsel, rota ve veriye eşliyor; ekranlar ham mesaj ayrıştırmıyor.

Kullanıcıya yansımayan oturum düşmesi

401 gelince istemci bir kez yeniden giriş yapıp çağrıyı tekrarlıyor. Tekrar da başarısızsa döngüye girmeden duruyor.

Yazmadığım bir sistemde hata ayıklamak

Teslimat bozuk göründüğünde mesajların nerede durduğunu bulmak için mevcut backend'deki kuyruk bağlantılarını izledim ve bu incelemeyi istemci düzeltmesinden ayrı tuttum.

Çözmeye değer bir problemin mi var?Birlikte çözelim

Konuşmaya başla

Full-stack ve uygulamalı AI rollerine açığım, uzaktan veya hibrit.

Rolü, ekibi ve problemi anlat.