PWA Nedir? Mobil Uygulama mı Web mi?

01Progressive Web App Ne Demek?

Progressive web app, sıradan bir web sitesine uygulama yetenekleri ekleyen bir yaklaşımdır. Kullanıcı siteyi tarayıcıda açar, beğenirse tek dokunuşla ana ekranına ekler. Sonraki açılışlarda adres çubuğu olmadan, kendi simgesi ve açılış ekranıyla bir uygulama gibi başlar.

Adındaki “progressive” sözcüğü önemlidir. Uygulama, tarayıcının desteklediği kadar yetenek kazanır: eski bir tarayıcıda normal bir site gibi çalışır, modern bir tarayıcıda ise çevrimdışı mod, bildirim ve ana ekran kurulumu devreye girer. Kimse dışarıda kalmaz.

Bu yaklaşımın temelinde web standartları vardır; özel bir platforma ya da çatıya bağlı değildir. React, Vue ya da sade JavaScript ile yazılmış her site, doğru adımlarla PWA'ya dönüştürülebilir.

02Bir Siteyi PWA Yapan Üç Parça

Teknik olarak bir sitenin PWA sayılması için üç temel bileşen gerekir. Üçü de standarttır ve resmî açıklamaları web.dev gibi kaynaklarda bulunur.

{
  "name": "Örnek Mağaza",
  "short_name": "Mağaza",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0b5cff",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

HTTPS

PWA özellikleri yalnızca güvenli bağlantı üzerinden çalışır. SSL sertifikası olmayan bir sitede service worker kaydedilemez.

Web app manifest

Manifest, uygulamanın adını, simgelerini, tema rengini ve nasıl açılacağını tarif eden küçük bir JSON dosyasıdır. Tarayıcı ana ekrana ekleme önerisini bu dosyaya bakarak yapar.

Service worker

Service worker, tarayıcı ile ağ arasında duran bir JavaScript dosyasıdır. Sayfaları ve dosyaları önbelleğe alır, internet kesildiğinde kayıtlı içeriği gösterir, uygun platformlarda bildirimleri yönetir.

03PWA Avantajları

Bu avantajların en büyüğü çoğu zaman maliyet tarafında hissedilir. İki ayrı mobil uygulama, iki ayrı bakım ve iki ayrı mağaza süreci yerine tek bir web projesi yönetilir. Bütçeyi etkileyen asıl etkenler; ekran sayısı, çevrimdışı senaryoların karmaşıklığı ve bağlanılacak sistemlerdir.

• Tek kod tabanı: iOS, Android ve masaüstü için ayrı ayrı geliştirme gerekmez.
• Mağaza bağımsızlığı: güncelleme yayınlamak için onay beklemezsiniz; değişiklik anında herkese ulaşır.
• Kurulum sürtünmesi azdır: kullanıcı mağazaya gitmeden, bağlantıdan doğrudan başlar.
• Arama motorunda görünür: içerik bir web sayfası olduğu için Google tarafından taranabilir.
• Hafiftir: telefonda yerel uygulamalara göre genellikle çok daha az yer kaplar.
• Çevrimdışı çalışabilir: zayıf bağlantıda bile önbellekteki içerik açılır.

04PWA'nın Sınırları

PWA her ihtiyaca yanıt vermez; dürüst bir karşılaştırma için sınırları da bilmek gerekir.

iOS desteği Android'e göre daha kısıtlıdır. Ana ekrana ekleme ve bildirim gibi özellikler zaman içinde gelişti, ancak bazı davranışlar hâlâ farklıdır ve kurulum önerisi otomatik çıkmaz; kullanıcının paylaş menüsünden eklemesi gerekir.

Donanım erişimi de sınırlıdır. Kamera, konum ve titreşim gibi temel özellikler web üzerinden kullanılabilir, ama Bluetooth cihazları, arka planda sürekli konum takibi ya da yoğun grafik isteyen oyunlar gibi ihtiyaçlarda yerel uygulama hâlâ öndedir.

Son olarak mağaza görünürlüğü konusu vardır. Bazı kullanıcılar uygulamayı yalnız mağazada arar. Android'de PWA'lar belirli yöntemlerle Play Store'da listelenebilir; iOS'ta ise bu yol genellikle yerel bir kabuk uygulama gerektirir.

05Mobil Uygulama mı Web Sitesi mi?

Bu soru, aslında üç seçenek arasında bir karardır: mobil uyumlu web sitesi, PWA ve yerel mobil uygulama. Aşağıdaki tablo farklarını özetler.

06PWA Hangi İşletmelere Uygun?

PWA'nın en çok parladığı yer, kullanıcının sık geri döndüğü ama ayrı bir uygulama indirmeye üşendiği senaryolardır. Telefon hafızası dolu, yeni uygulama yüklemek istemeyen kullanıcı için bağlantıdan açılıp ana ekrana eklenen hafif bir deneyim çoğu zaman en kısa yoldur.

• E-ticaret mağazaları: tekrar alışveriş yapan müşteri için hızlı açılan, ana ekranda duran bir mağaza.
• Restoran ve kafe: masadaki QR koddan açılan, uygulama indirmeden kullanılan menü ve sipariş ekranları.
• Rezervasyon ve randevu: otel, klinik ya da kuaför için hızlı tekrar rezervasyon.
• Saha ekipleri: bağlantının zayıf olduğu yerlerde form dolduran teknik servis ya da satış ekibi.
• İçerik siteleri: haber, rehber ve katalog gibi sık okunan içerikler.

07Maliyeti Neler Belirler?

Bir PWA projesinin bütçesi, “uygulama mı site mi” sorusundan çok kapsamın ayrıntılarıyla şekillenir. Basit bir içerik sitesine manifest ve önbellek eklemek ile çevrimdışı sipariş alan bir saha uygulaması kurmak arasında büyük fark vardır.

Bütçeyi en çok etkileyen kalemler şunlardır: ekran ve akış sayısı, çevrimdışı çalışacak işlemlerin karmaşıklığı, bildirim senaryoları, ödeme, stok ya da rezervasyon gibi bağlanılacak sistemler ve tasarımın ne kadar özgün olacağı. Bunlara yayından sonraki bakım ve güncelleme ihtiyacını da eklemek gerekir.

Yerel uygulamayla karşılaştırırken yalnızca ilk geliştirme maliyetine bakmayın. İki platform için ayrı sürüm takibi, mağaza güncellemeleri ve cihaz testleri her yıl tekrar eden kalemlerdir. PWA'da bu kalemlerin önemli bir kısmı tek bir web sürecinde toplanır; asıl tasarruf çoğu zaman burada ortaya çıkar.

08PWA Projesine Başlamadan Önce

PWA'nın kod tarafı çoğunlukla JavaScript ile yazılır; büyük projelerde tip güvenliği için TypeScript tercih edilir. Arayüz ile sunucu arasındaki iş bölümünü merak ediyorsanız frontend ve backend farkı yazımız konuyu sade biçimde anlatıyor. Temelden başlamak isteyenler için JavaScript nedir yazımız iyi bir giriş noktasıdır.

1. Mobil deneyimi düzeltin: hızlı, okunaklı ve dokunmaya uygun bir site temel şarttır.
2. Hız hedefi koyun: Core Web Vitals eşikleri (LCP ≤ 2,5 sn, INP ≤ 200 ms, CLS ≤ 0,1) iyi bir başlangıç ölçütüdür.
3. Çevrimdışı senaryoyu tanımlayın: internet yokken kullanıcı neyi görebilmeli, neyi yapabilmeli?
4. Bildirim stratejisini belirleyin: izin isteğini ilk saniyede değil, değer gösterdikten sonra sorun.
5. Gerçek cihazlarda test edin: özellikle iOS ve Android'de kurulum ve açılış davranışını ayrı ayrı deneyin.