Native Uygulama ile Progressive Web App Arasında Seçim Yapmak

İkisi de "uygulama", ama farklı yerlerde yaşıyor

Native uygulama, belirli bir işletim sistemi için o platformun kendi dili ve geliştirme araçlarıyla yazılan uygulamadır: Android için Kotlin ya da Java, iOS için Swift ya da Objective-C. Uygulama mağazası üzerinden dağıtılır, cihaza kurulur ve işletim sisteminin sunduğu arayüz bileşenlerini ve donanım arayüzlerini doğrudan kullanır.

Progressive Web App (PWA) ise web teknolojileriyle, yani HTML, CSS ve JavaScript ile geliştirilen, ancak kullanıcıya platforma özgü bir uygulama deneyimi sunan web uygulamasıdır. MDN'nin tanımıyla PWA, bir web sitesi gibi tek kod tabanından birden çok platformda çalışabilir; bir platform uygulaması gibi de cihaza kurulabilir, çevrimdışı ve arka planda çalışabilir, cihazla ve diğer uygulamalarla bütünleşebilir.

Asıl fark şuradadır: native uygulama işletim sisteminin içinde, PWA ise tarayıcı motorunun üzerinde yaşar. Hız, cihaz erişimi, dağıtım ve güncelleme farklarının hepsi bu temel ayrımdan doğar.

PWA'yı uygulamaya dönüştüren parçalar

Bir web sitesini PWA yapan şey birkaç web platformu teknolojisinin birlikte kullanılmasıdır:

• Web uygulaması manifesti: Uygulamanın adı, simgeleri, başlangıç adresi, görüntülenme biçimi ve tema rengi gibi bilgileri tarif eden dosyadır. Kurulduğunda uygulamanın işletim sisteminde nasıl görüneceğini bu dosya belirler.
• Service worker: Tarayıcı ile ağ arasında çalışan bir betiktir. İstekleri yakalayıp önbellekten yanıt verebilir, böylece bağlantı kesildiğinde uygulama açılmaya devam eder. Arka plan senkronizasyonu ve anlık bildirim gibi yetenekler de service worker üzerinden çalışır.
• Güvenli bağlantı: Service worker gibi yetenekler güvenli bağlam (HTTPS) gerektirir.

Native uygulamada bu katmanlara gerek yoktur; çevrimdışı çalışma, bildirim ve arka plan işleri işletim sisteminin kendi arayüzleriyle yapılır. PWA'da ise bu yetenekler tarayıcının sunduğu ölçüde vardır.

Karar ölçütleri tek tek

• Dağıtım: Native uygulama uygulama mağazası incelemesinden geçer ve mağazadan indirilir. / PWA bir adres üzerinden açılır, kullanıcı isterse cihaza kurar.
• Güncelleme: Native uygulamada yeni sürüm mağaza onayına ve kullanıcının güncellemesine bağlıdır. / PWA'da sunucuya yüklenen yeni sürüm bir sonraki ziyarette devreye girer.
• Cihaz erişimi: Native uygulama işletim sisteminin sunduğu tüm arayüzlere erişebilir. / PWA yalnız tarayıcının açtığı web arayüzlerine erişir ve destek tarayıcıdan tarayıcıya değişir.
• Performans: Native uygulama platformun arayüz bileşenlerini ve derlenmiş kodu kullanır, yoğun animasyon ve grafik işlerinde rahattır. / PWA tarayıcı motoruna bağlıdır; içerik ve form ağırlıklı uygulamalarda fark sınırlı kalabilir, ağır grafik işlerinde hissedilir.
• Keşfedilebilirlik: Native uygulama mağaza aramasıyla bulunur. / PWA arama motorlarında web sayfası olarak dizinlenebilir ve bağlantıyla paylaşılır.
• Ekip ve maliyet: Native yaklaşımda her platform için ayrı kod tabanı ve uzmanlık gerekir. / PWA tek web kod tabanıyla masaüstü ve mobilde çalışır.
• Kurulum sürtünmesi: Native uygulamada indirme ve yer açma adımı vardır. / PWA ilk kullanımda kurulum gerektirmez.

Native uygulama hangi durumda doğru seçim?

Uygulamanın değeri cihazın derinliklerine erişmekten geliyorsa native yaklaşım öne çıkar. Bluetooth cihazlarla sürekli haberleşme, arka planda uzun süre konum izleme, kamera ve sensör verisinin düşük gecikmeyle işlenmesi, işletim sisteminin widget, sağlık verisi ya da ödeme cüzdanı gibi özel bileşenleriyle bütünleşme bu tür ihtiyaçlardır.

Bunun yanında şu durumlar da native yönünde ağırlık yapar: • Kullanıcıların uygulamayı mağazada aradığı bir kategori (oyun, bankacılık, sağlık) hedefleniyorsa. • Akıcılığın ürünün kendisi olduğu yoğun animasyonlu arayüzler tasarlanıyorsa. • Kurum güvenlik politikası mobil cihaz yönetimi üzerinden dağıtılan uygulama şartı koyuyorsa.

Tek kod tabanı isteyip yine de native bileşen kullanmak isteyen ekipler React Native gibi çapraz platform çatılarına bakar. React Native belgelerine göre bu çatı, çalışma anında bileşenler için karşılık gelen Android ve iOS görünümlerini oluşturur; yani sonuç bir web görünümü değil, platform bileşenleridir.

PWA hangi durumda doğru seçim?

PWA, kullanıcıya bağlantıyla ulaşmanın ve hızlı güncellemenin cihaz erişiminden daha değerli olduğu senaryolarda güçlüdür. Örneğin bir saha ekibinin sipariş girdiği iç uygulama, bir e-ticaret sitesinin mobil deneyimi, kurum içi formlar, rezervasyon ve randevu akışları ya da seyrek açılan ama kurulum isteğiyle kullanıcı kaybetmek istenmeyen hizmetler bu gruba girer.

PWA'yı öne çıkaran işaretler: • Kullanıcılar ürüne daha çok arama motoru ya da paylaşılan bağlantıyla geliyor. • Masaüstü ve mobil için aynı ürün isteniyor, ekipte web uzmanlığı güçlü. • Sürüm yayınlarının mağaza incelemesini beklemeden hızla çıkması gerekiyor. • Uygulama zayıf bağlantılı ortamlarda da açılmalı ve son veriyi göstermeli.

Karar vermeden önce hedef cihazlarda kullanılacak web arayüzlerinin, özellikle anlık bildirim ve arka plan senkronizasyonunun desteklenip desteklenmediğini MDN uyumluluk tablolarından kontrol etmek gerekir; tarayıcı ve işletim sistemi desteği zamanla değişir.

Birlikte kullanım ve kademeli geçiş

Seçim her zaman ya biri ya öteki değildir. Sık görülen bir düzen, ürüne PWA ile başlayıp ürün-pazar uyumu ve kullanım verisi netleşince cihaz erişimi gerektiren özellikler için native ya da çapraz platform bir uygulama eklemektir. Bu sırada PWA, mağaza dışından gelen ve uygulamayı kurmak istemeyen kullanıcılar için açık kalır.

Tersi de mümkündür: native uygulaması olan bir şirket, kampanya sayfaları ya da yeni kullanıcı kazanımı için hafif bir PWA sunar. Capacitor gibi araçlar ise web kod tabanını native bir kabuğa koyarak aynı uygulamanın hem mağazaya hem mobil web'e dağıtılmasına imkân tanır; Capacitor kendi belgelerinde mağazalara ve mobil web'e tek uygulamayla yayın yapmayı hedeflediğini belirtir.

Hangi yol seçilirse seçilsin, arka uç servislerini ve iş kurallarını istemciden bağımsız bir API katmanında tutmak geçişi kolaylaştırır.

Seçim yaparken sık düşülen hatalar

• "PWA ucuz, her zaman yeter" varsayımı: Cihaz erişimi gerektiren bir özellik yol haritasının ortasında çıktığında yeniden yazım maliyeti doğar. Kritik özellik listesini en baştan çıkarın.
• "Mağazada değilsek yokuz" varsayımı: Ürünün kullanıcıları arama motorundan geliyorsa native uygulama yalnız ek bir kanal olur, ana kanal değil.
• Çevrimdışı senaryoyu sonradan düşünmek: PWA'da önbellek stratejisi ve veri senkronizasyonu tasarım kararıdır; sona bırakılırsa eski veri gösteren uygulamalar ortaya çıkar.
• Performansı tahminle değerlendirmek: Hedef kitlenin kullandığı orta ve alt seviye cihazlarda prototip ölçümü yapmadan karar vermek yanıltıcı olur.

Mindset programlarında iki yaklaşım

Progressive Web App (PWA) Geliştirme eğitimi service worker yaşam döngüsü, önbellek stratejileri, çevrimdışı veri ve senkronizasyon, kurulabilirlik ve anlık bildirimler üzerine kuruludur. Web uygulamasını mağazaya gitmeden uygulama deneyimine taşımak isteyen ön yüz geliştiricileri ve web ekipleri için uygundur.

Native bileşenlerle çalışmak isteyen ekipler için React Native ile Cross-Platform Mobil eğitimi, native modüller ve platform köprüsünden EAS Build ile mağaza yayınına uzanan akışı işler. Karar aşamasındaki ürün yöneticileri ve teknik liderler için Mobil Uygulama Geliştirme Stratejisi eğitimindeki "Native mi, Cross-Platform mi, Hibrit mi?" modülü, bu sayfadaki ölçütleri kendi ürününüze uygulamak için bir çerçeve sağlar.