Giriş: PWA Nedir ve Neden 2026'da Patlama Yapıyor?
Progressive Web App (PWA), web teknolojileriyle (HTML, CSS, JavaScript) geliştirilen ancak native mobil uygulama gibi davranan hibrit bir yaklaşımdır. Kullanıcılar tarayıcı üzerinden erişir, ancak "Add to Home Screen" ile ana ekrana ekleyebilir, offline çalışabilir, push notification alabilir ve tam ekran modda açılır.
2026'da PWA'lar neden bu kadar konuşuluyor?
-
Gartner tahminlerine göre, 2027'ye kadar tüketici odaklı uygulamaların %50'sinden fazlası PWA tabanlı olacak.
-
Global PWA pazarı 2030'a kadar 9.4 milyar dolara ulaşacak (30%+ yıllık büyüme).
-
Apple'ın iOS 16.4+ ile push notification desteği (2023'ten beri), Safari'de Service Worker iyileştirmeleri ve EU DMA etkisiyle PWA kısıtlamalarının azalması.
-
Android'de Chrome'un tam desteği, edge computing ve AI entegrasyonları (örneğin predictive caching).
-
Maliyet avantajı: Native app'lere göre %40-60 daha düşük geliştirme maliyeti, tek codebase ile iOS + Android + desktop.
Ana fark yaratan özellikler:
-
Offline erişim (Service Worker ile caching)
-
Push bildirimleri (Web Push API)
-
Installable (Web App Manifest ile home screen ikon)
-
Hızlı yüklenme (Core Web Vitals uyumlu)
Native app'ler hala güçlü ama PWA'lar artık "yeterince iyi" değil, çoğu senaryoda daha akıllı tercih.
Avantajlar (PWA):
-
Hızlı geliştirme ve bakım
-
Geniş erişim (App Store onayı yok)
-
SEO + viral paylaşım kolay
-
Düşük terk oranı (hızlı yüklenme)
Dezavantajlar:
-
iOS'ta bazı kısıtlamalar (background sync sınırlı, push için home screen şart)
-
Çok karmaşık native özellikler (AR, ileri kamera) için yetersiz
-
Keşif zor (app store yok)
Temel Bileşenler: PWA'yı PWA Yapan 3 Ana Teknoloji
-
HTTPS Zorunluluğu
Güvenlik temeli. Tüm PWA'lar HTTPS üzerinden servis edilir (localhost hariç test için).
-
Web App Manifest (manifest.json)
App'in meta verilerini tanımlar: isim, ikon, tema rengi, display modu (fullscreen/standalone).
Örnek manifest.json:
{ "name": "Kaliteweb PWA", "short_name": "Kaliteweb", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#000000", "icons": [ { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" } ] }HTML'e ekle:
<link rel="manifest" href="/manifest.json"> -
Service Worker
Arka planda çalışan proxy script. Caching, offline, push için kritik.
-
Cache-first, network-first stratejileri
-
Background sync, periodic sync (2026'da daha güçlü)
-
Adım Adım PWA Oluşturma Rehberi (Vanilla + Workbox)
Basit Vanilla Örnek (Kod Azaltma Odaklı):
-
Proje klasörü oluşturun.
-
index.html:
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PWA Örnek</title> <link rel="manifest" href="/manifest.json"> <meta name="theme-color" content="#000000"> </head> <body> <h1>Merhaba PWA!</h1> <script> if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js') .then(reg => console.log('SW registered!', reg)) .catch(err => console.log('SW registration failed:', err)); }); } </script> </body> </html> -
sw.js (basit cache):
const CACHE_NAME = 'pwa-cache-v1'; const urlsToCache = ['/', '/styles.css', '/app.js']; self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll(urlsToCache)) ); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => response || fetch(event.request)) ); });
Workbox ile Profesyonel (Önerilen):
-
npm install workbox-cli --global
-
workbox generateSW workbox-config.js (otomatik cache stratejileri)
Popüler Framework Entegrasyonları (2026 Güncel)
-
Next.js (En Popüler)
next-pwa plugin veya built-in support (App Router ile). Edge runtime + SSR için ideal. Vercel deploy ile otomatik PWA.
-
Nuxt (Vue için)
@vite-pwa/nuxt modülü. SSR + offline caching kolay.
-
Vite PWA Plugin
En hızlı geliştirme. vite-plugin-pwa ile manifest ve SW otomatik oluşturulur. React/Vue/Svelte ile uyumlu.
-
React / Angular / Vue
CRA yerine Vite + plugin önerilir. Angular PWA schematics hala güçlü.
Checklist: Framework Seçimi
-
SEO + performans → Next.js
-
Hızlı prototip → Vite + React/Vue
-
Vue ekosistemi → Nuxt
-
Enterprise → Angular
Performans Optimizasyonu: Lighthouse PWA Skoru 100 Alma İpuçları
Lighthouse PWA kategorisi: manifest, SW, offline, prompt kriterlerini kontrol eder.
100 Puan İçin Pratik Checklist (2026):
-
HTTPS zorunlu
-
Manifest tam (name, short_name, icons 192+512, display: standalone)
-
Service Worker yüklü ve offline fallback
-
Install prompt tetiklenir (beforeinstallprompt event)
-
Core Web Vitals uyumlu (LCP <2.5s, INP <200ms)
-
Image optimization (WebP/AVIF, lazy loading)
-
Minify JS/CSS, code splitting
-
CDN + caching headers
-
No render-blocking resources
İpuçları:
-
Workbox ile stale-while-revalidate stratejisi
-
Partial hydration (Next.js 14+)
-
Edge caching (Cloudflare / Vercel)
Hosting Uyumluğu ve Kaliteweb Avantajı
PWA'lar statik dosya ağırlıklı → hızlı hosting + CDN şart.
-
Kaliteweb Hosting İpuçları: SSD + LiteSpeed, Cloudflare entegrasyonu (ücretsiz CDN, cache everything), HTTP/3 desteği → TTFB <100ms.
-
Statik export (Next.js export veya Vite build) → düşük maliyet, yüksek hız.
-
Vercel / Netlify / Cloudflare Pages → otomatik PWA optimizasyonu.
Güvenlik ve Erişilebilirlik Konuları
Güvenlik:
-
HTTPS + HSTS
-
Content Security Policy (CSP)
-
Secure headers (X-Frame-Options, Permissions-Policy)
-
Privacy: push permission sadece explicit
Erişilebilirlik:
-
ARIA label'lar
-
Keyboard navigation
-
Reduced motion desteği
-
Lighthouse Accessibility skoru >90 hedefle
Gerçek Dünya Örnekleri
-
Twitter Lite (X PWA): %75 daha az veri kullanımı, %70 daha hızlı yüklenme, offline tweet okuma.
-
Starbucks PWA: Sipariş sistemi offline çalışır, menü caching ile hızlanır.
-
AliExpress PWA: Dönüşüm oranı %104 artış (App Store friction kalktı).
-
Pinterest PWA: Mobil trafiğin büyük kısmı PWA'dan.
Yaygın Hatalar ve Debug İpuçları
Yaygın Hatalar:
-
Manifest ikon boyutları yanlış
-
Service Worker scope hatalı
-
iOS'ta push için home screen eklemeyi unutmak
-
Cache'i aşırı agresif yapmak (stale content)
-
Lighthouse'ta "Add to home screen" kriterini kaçırmak
Debug:
-
Chrome DevTools → Application tab → Manifest / Service Workers
-
Lighthouse → PWA audit
-
Workbox debug mode
-
iOS: Safari → Add to Home → test
Sonuç + Gelecek Tahmini: PWA + AI Entegrasyonu
2026 PWA yılı: Maliyet düşüşü, iOS desteği iyileşmesi ve edge/AI ile native'e yaklaşma.
Gelecek (2027+):
-
AI-powered predictive caching
-
WebAssembly + AI modelleri offline
-
Voice UI + PWA (Web Speech API)
-
Web3 entegrasyonu (wallet access)
-
Composable front-ends + PWA
Kaliteweb olarak önerimiz: MVP için Vite + PWA plugin ile başlayın, sonra Next.js'e geçin.