React PWA Install Prompt: Chrome, Edge ve iPhone için Doğru Yol

React PWA'da kurulum istemi iki farklı yoldan gidiyor. Chrome, Edge ve Samsung Internet'te beforeinstallprompt olayı ateşleniyor; sen bunu yakala, preventDefault çağır, olayı kaydet ve kendi Install butonundan prompt() metodunu çalıştır. iPhone ve iPad'de hiçbir tarayıcı bu olayı göndermediği için başka bir yol izlemen gerekiyor: kullanıcıya Share menüsünü açıp "Add to Home Screen" seçeneğini göstermek.

Wingo UI'ın rehberi bu iki yolu Next.js'te nasıl yapacağını detaylı anlatıyor. Önemli nokta şu: beforeinstallprompt'u root layout'ta render ettiğin bir client component'te yakalamalısın, yoksa listener çok geç mount olur ve olayı kaçırırsın.

Bir diğer yaygın hata da ilk sayfa yüklemesinde hemen kurulum bannerı göstermek. Bunu yapma. Kullanıcı uygulamaya değer gördükten sonra sor, hiçbir zaman yüklü uygulamanın içinde, in-app browser'da veya sign-up akışı sırasında isteme çıkma. "Şimdi değil" seçeneğini de ekle ve birkaç hafta boyunca onu hatırla.

Chrome tarafında preventDefault ile olayı engelle, sonra kendi UI'ında göster. iPhone tarafında ise Share ikonunun konumunu ve adımları açıkça belirt. İki yolu da test etmek için Chrome DevTools'da emülasyon yap, sonra gerçek cihazlarda kontrol et. Kurulum promptu doğru yapıldığında kullanıcılar uygulamayı homescreen'e eklemekten çekinmez.