Detaylı tanım
PWA = web teknolojileri (HTML/CSS/JS) + app deneyimi. Özellikleri: offline çalışma (Service Worker), home screen install, push notifications, app store gerekmez. E-ticaret PWA: hızlı load, mobil-öncelikli, app store komisyonu yok. Shopify default PWA destekli.
PWA (Progressive Web App) nasıl çalışır?
Bir sitenin PWA sayılması üç şarta bağlıdır: HTTPS üzerinden sunulması, geçerli bir web app manifest dosyası ve kayıtlı bir service worker. Manifest; uygulama adı, kısa ad, başlangıç adresi, görüntüleme modu, tema rengi ile 192 ve 512 piksel ikonları taşır ve ana ekrandaki kimliği belirler. Service worker ise sayfa ile ağ arasında duran, sayfadan bağımsız yaşayan bir aracıdır; kurulum, etkinleşme ve istek yakalama adımlarından oluşan kendi yaşam döngüsü vardır. Kurulum davetinin çıkması tarayıcıya göre değişir ve bir ölçüt setine bağlıdır; dolayısıyla dosyaları eklemek tek başına kullanıcıya kurulum önerisi gösterileceği anlamına gelmez.
Asıl mühendislik kararı önbellek stratejisidir. Değişmeyen varlıklar için önce önbellek, fiyat ve stok gibi taze olması gereken veriler için önce ağ, kategori listesi gibi biraz eski kalabilecek içerikler için önbelleği gösterip arkada yenileme kalıbı kullanılır. Yanlış eşleşme somut hasar üretir: kampanya fiyatını önbellekten gösteren bir sayfa, müşteriye ödeme adımında farklı bir tutar çıkarır. İkinci tuzak sürüm yönetimidir; yeni service worker eski sekmeler kapanana kadar bekler ve güncelleme akışı ile kullanıcıya yenileme bildirimi kurulmazsa ziyaretçi günlerce eski sürümde kalır. Bu yüzden dosya adlarında sürüm damgası ve önbellek temizleme mantığı baştan planlanır.
Platform farkları kapsamı belirler. iOS tarafında kurulum Safari üzerinden ana ekrana ekleme ile yapılır, bildirim gönderimi ancak uygulama ana ekrana eklendikten sonra mümkün olur; arka plan senkronizasyonu ile Bluetooth ve NFC gibi donanım erişimleri sınırlıdır. Mağaza gerekmemesi güncellemeyi kolaylaştırır ama mağaza vitrini, mağaza içi arama ve mağaza ödeme akışı da devre dışı kalır; tüketiciye dönük işlerde bu bir görünürlük kaybıdır. Buna karşılık depo sayımı, kalite kontrol ve servis formu gibi kurumsal saha uygulamalarında PWA iyi çalışır: cihaz bağımsızdır, kurulum yönetimi gerektirmez ve bağlantı koptuğunda kayıtları kuyruğa alıp bağlantı gelince gönderebilir.
Hangi terimlerle karıştırılıyor?
| Karıştırılan terim | Aradaki fark |
|---|---|
| Native mobil uygulama | Native uygulama mağaza üzerinden dağıtılır ve donanım ile bildirim yeteneklerinin tamamına erişir. PWA mağaza onayı ve indirme adımı olmadan çalışır, buna karşılık platform yetenekleri sınırlıdır. |
| Hibrit uygulama (React Native, Capacitor) | Hibrit yaklaşım tek kod tabanından mağazaya paketlenen bir uygulama üretir. PWA ise paketlenmez; adresten açılır ve güncelleme sunucuya yüklendiği anda tüm kullanıcılarda geçerli olur. |
| Duyarlı (responsive) web sitesi | Duyarlı site yalnızca ekran boyutuna göre yerleşimi değiştirir. PWA bunun üzerine kurulabilirlik, çevrimdışı çalışma ve service worker ile önbellek yönetimi ekler; ikisi birbirinin alternatifi değildir. |
| Service worker | Service worker PWA'nın bir bileşeni, tek başına ise bir tarayıcı teknolojisidir. Yalnızca önbellek için de kullanılabilir; PWA manifest, kurulabilirlik ve uygulama deneyimini kapsayan daha geniş bir tanımdır. |
Sık yapılan hatalar
Manifest eklemeyi PWA saymak
Manifest dosyası yalnızca uygulamanın adını, ikonunu ve açılış davranışını tanımlar. Önbellek stratejisi kurgulanmış bir service worker olmadan çevrimdışı çalışma, hızlı tekrar açılış ve kurulum davranışı ortaya çıkmaz. Tema ayarındaki bir kutuyu işaretlemek bu mühendislik işinin yerini tutmaz.
Her şeyi önbelleğe almak
Fiyat, stok, sepet ve kullanıcıya özel sayfalar önbellekten sunulduğunda müşteri eski bilgiyi görür ve ödeme adımında tutarsızlık çıkar. Önbellek kaynak türüne göre ayrı stratejilerle kurgulanmalı; kişisel ve işleme dönük veriler her zaman ağdan taze alınmalıdır.
Güncelleme akışını kurmamak
Yeni sürüm yayınlandığında eski service worker bekleme durumunda kalır ve kullanıcı tüm sekmeleri kapatmadığı sürece eski kodu görmeye devam eder. Güncelleme algılandığında kullanıcıya yenile uyarısı gösteren bir akış kurulmazsa yapılan hata düzeltmeleri sahaya inmez ve destek ekibi olmayan bir hatayı aramak zorunda kalır.
iOS'u native ile eşdeğer varsaymak
Bildirim, arka plan işlemleri ve donanım erişimi iOS tarafında daha kısıtlıdır; kurulum akışı da kullanıcıya tarayıcı menüsünden anlatılmayı gerektirir. Proje kapsamı belirlenirken hedef kitlenin cihaz dağılımı ve gereken yetenek listesi baştan çıkarılmalı, sonra karar verilmelidir.
PWA (Progressive Web App) ne zaman kritik hâle gelir?
Bağlantının zayıf veya kesintili olduğu kullanım senaryolarında belirleyici olur: depo ve üretim sahası, araç içi satış, fuar alanı, kırsalda yapılan servis ziyaretleri. Ayrıca kullanıcının uygulama indirmeye ikna edilmesinin zor olduğu, seyrek ama tekrarlı kullanılan işlerde makul bir orta yoldur. Kurumsal tarafta cihaz çeşitliliği yüksekse ve her güncellemeyi mağaza onayına bırakmak istenmiyorsa PWA hem dağıtım hem bakım maliyetini belirgin biçimde azaltır.
Örnekler
- E-ticaret PWA ile mobil dönüşüm %30 artabilir.