PWA (Progressive Web Apps) Rehberi: Web Uygulamalarını Mobil Gibi Yapma

PWA Nedir?

PWA (Progressive Web Apps), web teknolojileri kullanılarak geliştirilen, native mobil uygulama deneyimi sunan web uygulamalarıdır.

PWA'lar, Service Worker, Web App Manifest ve HTTPS gibi modern web teknolojilerini kullanır. Herhangi bir tarayıcıda çalışır ve app store gerektirmez.

Temel özellikler: Çevrimdışı çalışma, ana ekrana ekleme (Add to Home Screen), push bildirimleri, arka plan senkronizasyonu, tam ekran modu.

Avantajlar: Tek kod tabanı (web + mobil), app store onayı gerekmez, anında güncelleme, düşük geliştirme maliyeti, SEO dostu.

Web App Manifest

manifest.json dosyası, PWA'nın meta verilerini tanımlar: name, short_name, start_url, display, background_color, theme_color, icons.

Örnek manifest: { "name": "Utilgo", "short_name": "Utilgo", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#4a90d9", "icons": [{"src": "/icon-192.png", "sizes": "192x192"}] }.

display: standalone, uygulamanın tarayıcı UI'sı olmadan (adres çubuğu, navigasyon) çalışmasını sağlar. fullscreen ve minimal-ui seçenekleri de mevcuttur.

Icons: En az 192x192 ve 512x512 piksel boyutlarında PNG ikonlar gereklidir. maskable icon desteği ile adaptif ikonlar oluşturulur.

Manifest'i <head> içinde <link rel="manifest" href="/manifest.json"> ile bağlayın. Tarayıcı manifest'i okuyarak PWA özelliklerini etkinleştirir.

Service Worker

Service Worker, tarayıcı ile ağ arasında çalışan bir JavaScript dosyasıdır. Arka planda çalışır ve çevrimdışı erişim, önbellekleme ve push bildirimleri sağlar.

Kayıt: navigator.serviceWorker.register('/sw.js') ile Service Worker kaydedilir. HTTPS veya localhost üzerinde çalışmalıdır.

Önbellekleme stratejileri: Cache First (önce cache, sonra ağ), Network First (önce ağ, sonra cache), Stale While Revalidate (cache'den sun, arka planda güncelle).

Cache API: caches.open('v1').then(cache => cache.addAll(['/index.html', '/style.css', '/app.js'])) ile statik varlıklar önbelleğe alınır.

Offline fallback: Çevrimdışıyken özel bir sayfa gösterin. self.addEventListener('fetch', (e) => { e.respondWith(caches.match(e.request).then(r => r || fetch(e.request))); });

PWA Gereksinimleri ve Lighthouse

HTTPS: PWA'lar HTTPS üzerinde çalışmalıdır (localhost hariç). SSL sertifikası gereklidir.

Responsive tasarım: PWA mobil cihazlarda çalışacağı için responsive tasarım zorunludur. Viewport meta tag'ı ekleyin.

Hızlı yükleme: İlk yükleme 3 saniyenin altında olmalıdır. Code splitting, lazy loading ve önbellekleme ile hızlandırın.

Lighthouse PWA audit: Chrome DevTools Lighthouse sekmesinde PWA denetimi yapın. Tüm PWA kriterlerini (installable, works offline, fast load) kontrol eder.

Installability: Tarayıcı, manifest ve Service Worker koşulları sağlandığında 'Ana ekrana ekle' butonunu otomatik olarak gösterir.

PWA vs Native App

PWA avantajları: Tek kod tabanı, anında güncelleme, app store gerektirmez, SEO dostu, düşük maliyet, küçük boyut.

Native app avantajları: Tam donanım erişimi (kamera, Bluetooth, NFC), daha iyi performans, app store görünürlüğü, push bildirim güvenilirliği.

Seçim kriterleri: Bütçe kısıtlıysa ve hızlı lansman gerekiyorsa PWA. Tam donanım erişimi ve maksimum performans gerekiyorsa native app.

Hybrid yaklaşım: PWA ile başlayın, kullanıcı tabanı büyüdüğünde native app'e geçin. Veya Capacitor/Ionic ile PWA'yı native app'e dönüştürün.

PWA Örnekleri ve Araçlar

Başarılı PWA örnekleri: Twitter Lite (%65 daha az veri), Pinterest (%44 daha fazla kullanıcı etkileşimi), Starbucks (çevrimdışı sipariş).

Geliştirme araçları: Workbox (Google'ın Service Worker kütüphanesi), PWA Builder (Microsoft), Lighthouse (denetim), Chrome DevTools (debugging).

Framework desteği: Next.js (next-pwa), Nuxt.js (@nuxtjs/pwa), React (Create React App PWA template), Vue (Vue CLI PWA plugin).

Test etme: Chrome DevTools Application tab'ında Service Worker, Cache ve Manifest'i kontrol edin. Lighthouse ile PWA skorunu ölçün.