web.dev 2025 PWA raporu net konuşuyor: Progressive Web App’lerden gelen mobil dönüşüm oranı, klasik mobil web’e göre ortalama %52 yüksek; Chrome’da PWA yükleme oranı 2024’te %147 sıçradı ve Microsoft Edge PWA showcase’inde 1Password, Twitter, Starbucks gibi markalar oturum başına 3-4 katı süre elde etti. 2026’da Progressive Web App artık “tarayıcı oyuncağı” değil; Service Worker, Project Fugu API ailesi, File System Access, WebUSB, Web Bluetooth ve iOS 17.4 sonrası AB Web App regülasyonu sayesinde native uygulamayla aynı arenada koşan birinci sınıf dağıtım kanalıdır. App Store komisyonu, sürüm onayı kuyruğu ve iki ayrı kod tabanı yükü olmadan tek koddan tüm platformlara dağıtım yapılabiliyor.

Bu rehberde PWA’nın 2026 yetenek setini, offline-first mimarisini, Service Worker yaşam döngüsünü, Project Fugu API yüzeyini, iOS özelindeki kısıtları, performans bütçesini ve uygulama yol haritasını uçtan uca inceliyoruz. Hangi senaryoda PWA seçilir, hangisinde native gerekir, ne zaman hibrit gider netleşecek.

PWA’nın 2026 Olgunluk Hikayesi ve Yetenek Genişlemesi

PWA terimi 2015’te Alex Russell ve Frances Berriman tarafından icat edildiğinde “discoverable, installable, linkable, network independent, progressive” beş ilkesi üstünde duruyordu. On yıl sonra ekosistem nihayet kurumsal eşiği aştı: web.dev PWA hub verilerine göre Fortune 500 şirketlerinin %43’ü en az bir kanal için PWA’yı birincil mobil deneyim olarak kullanıyor. Chrome 120+ ile File System Access, Web Share Target ve Periodic Background Sync API’ları stabilize oldu; Chrome PWA install pattern blog serisi 2025 install rate’in yıldan yıla %147 büyüdüğünü duyurdu. Microsoft Edge PWA showcase’inde 1Password, TikTok, Twitter ve Starbucks vakaları yayınlandı.

En büyük politika değişikliği Apple cephesinden geldi: AB Dijital Pazarlar Yasası (DMA) zorlamasıyla iOS 17.4 ile Avrupa’da PWA’lar üçüncü taraf tarayıcı motorları üzerinden de çalışabilir hale geldi. WebKit’in resmi duyurusu Home Screen Web Apps modelinin AB özelinde Safari WebView’a ek olarak Blink ve Gecko motorlarına da açıldığını net biçimde ortaya koydu. Bu, Web Push notification, badge ve background sync gibi özelliklerin AB iOS pazarında çoklu motor üstünde çalışmasına zemin hazırladı.

PWA vs Native vs Hybrid: 2026 Karar Matrisi

2026’da bir mobil ürün stratejisi kurulurken PWA, tam native (Swift/Kotlin) ve hibrit (React Native/Flutter/Capacitor) üçü arasında karar verilir. Aşağıdaki matris dağıtım, yetenek, maliyet ve bakım eksenlerinde kıyaslama sunar. React Native ve Flutter karşılaştırmamız hibrit tarafı; iOS native vs cross-platform yazımız Apple platform tarafını derinleştirir.

KriterPWANative (Swift/Kotlin)Hibrit (RN/Flutter)
Dağıtım kanalıTarayıcı + opsiyonel App StoreApp Store / Play zorunluApp Store / Play zorunlu
Sürüm yayınıAnında (cache invalidation)Onay 24-72 saatOnay + bridge güncelleme
App Store komisyonuYok%15-30%15-30
Donanım erişimiGeniş (Fugu API’ları)TamPlugin’e bağlı
Offline yetenekService Worker (üstün)Manuel kurulumManuel kurulum
DiscoverabilityGoogle SEO + URLApp Store SEO (ASO)ASO
Geliştirme maliyeti1x (tek kod)2x (iOS+Android)1.2x
Push notificationiOS 16.4+, Android tamTam (APNs/FCM)Tam
İlk açılış boyutu~150 KB20-80 MB15-40 MB

Karar çıkarımı net: e-ticaret, SaaS paneli, içerik platformu, hizmet rezervasyonu, kurumsal portal — bu senaryolarda PWA varsayılan seçenek. Bluetooth LE mesh, ARKit/RealityKit, gelişmiş kamera RAW, makine öğrenmesi NPU erişimi gibi donanım yoğun deneyimlerde ise native gerekir. Hibrit, ekipte web mühendisi ağırlığı varsa ve App Store dağıtımı zorunluysa orta yol kurar.

Service Worker Mimarisi: Offline-First’in Motoru

Service Worker, tarayıcı ile ağ arasına oturan programlanabilir proxy’dir. UI thread’inden ayrı çalışır, sayfa kapansa bile yaşar ve fetch, push, sync, message gibi event’lere yanıt verir. MDN Service Worker API referansı kanonik dokümandır. Yaşam döngüsü üç aşamadan oluşur: install (cache hazırlığı), activate (eski cache temizliği) ve fetch (her ağ isteğinin yakalanması).

Service Worker YetenekAPITarayıcı Desteği 2026Tipik Kullanım
Fetch interceptfetch eventChrome, Edge, Firefox, SafariOffline cache, mock API
Cache Storagecaches APITam destekStatik asset + dinamik veri
Web PushPushManagerChrome, Edge, Firefox, Safari 16.4+Bildirim, mesaj
Background SyncSyncManagerChrome, EdgeOffline form gönderimi
Periodic SyncPeriodicSyncManagerChrome, Edge (origin trial)Saatlik içerik yenileme
Background FetchBackgroundFetchManagerChrome, EdgeBüyük dosya indirme
Web Share Targetshare_target manifestChrome, Edge, Samsung“Bu uygulamaya paylaş”
Badging APIsetAppBadgeChrome, Edge, Safari (Home Screen)İkon üzerinde sayı rozeti

Workbox 7, Google’ın Service Worker abstraction kütüphanesidir ve manuel API’larla uğraşmadan production-grade cache stratejilerini deklaratif şekilde yazmayı sağlar. Build adımında precaching manifest üretir, route bazlı cache stratejisi tanımlar ve background sync queue’u yönetir.

Cache Stratejileri: Her Endpoint’e Doğru Reçete

Offline-first sadece “internet yokken çalışsın” demek değil; ağdan bağımsız UI öncelikli mimari kurmaktır. Cache stratejisi endpoint başına seçilir, kör bir “tüm istekleri cachele” yaklaşımı yıkıcıdır. Doğru reçete, p99 yük süresini ortalama %60 düşürür ve web.dev Core Web Vitals metriklerini LCP, INP ve CLS boyutlarında dramatik iyileştirir.

Stratejiİdeal İçerikHızTazelikÖrnek Endpoint
Cache-firstStatik asset (CSS, font, logo)Çok hızlıDüşük/static/main.css, woff2
Network-firstAPI, sıcak veriOrtaYüksek/api/orders
Stale-while-revalidateYarı sıcak içerikHızlıOrta/api/profile
Network-onlyÖdeme, kritik POSTAğa bağlıTam/api/checkout
Cache-onlySürüm sabit hashed assetAnındaYok/static/bundle.[hash].js

Stale-while-revalidate, modern PWA’ların en kullanışlı stratejisidir: kullanıcıya anında cache’ten yanıt verir, arka planda ağı çağırır ve cache’i sessizce günceller. LCP’yi ortalama %35 iyileştirir, INP’i kritik eşik altına çeker. Core Web Vitals 2026 rehberimiz bu metriklerin sıralama etkisini derinleştirir.

Web Push API ve Notification Mimarisi

Push notification, PWA’nın native ile kullanıcı bağlılığı açısından en hassas yarış alanıdır. 2026’da Web Push standardı tüm büyük tarayıcılarda destekleniyor: Chrome ve Firefox uzun süredir, Safari 16.4 ile macOS, iOS 16.4+ ile Home Screen PWA’larda, iOS 17.4+ ile AB’de tüm motorlarda. Mimaride dört aktör vardır: client (sayfa + service worker), VAPID anahtar çifti, push servisi (FCM, Mozilla autopush, Apple Push Service) ve uygulama backend’i.

Push BileşeniRolAnahtar Detay
VAPIDBackend kimlik doğrulamaECDSA P-256 keypair, base64url
PushManager.subscribe()Kullanıcı izin + endpoint üretimiuserVisibleOnly: true zorunlu
Push Service EndpointTarayıcı sağlayıcısının URL’ifcm.googleapis.com, push.services.mozilla, web.push.apple
Payload encryptionEnd-to-end güvenlikRFC 8291 (aes128gcm)
Service Worker push eventBildirimi göstermeself.registration.showNotification()
NotificationClickTıklama yönlendirmesiclients.openWindow(url)
Action buttonsBildirim üstü kısayollaractions: [{action, title, icon}]
TTL headerPush yaşam süresi0 = anında, max 28 gün

Pre-permission tasarımı kritik: kullanıcıya tarayıcının native izin diyalogu açılmadan önce in-app bir “neden push istiyoruz” mikrosayfa gösterirseniz kabul oranı tipik %35’ten %65’e çıkar. iOS 16.4+ Home Screen PWA’larında ise kullanıcı önce uygulamayı yüklemek zorundadır; bu küçük friction abonelik kalitesini artırır, kayıp oranını klasik web’e göre %40 düşürür.

Project Fugu: Tarayıcının Donanıma Erişen Yeni Yüzü

Project Fugu, Google ve Microsoft öncülüğünde 2019’da başlatılan, web’i native ile yetenek seviyesinde eşitlemeyi hedefleyen API girişimidir. Project Fugu durum sayfası yayınlanan ve origin trial aşamasındaki tüm API’ları listeler. 2026 itibarıyla File System Access, Web Bluetooth, Web USB, Web Serial, Web NFC, Web HID, Eye Dropper, Window Controls Overlay gibi onlarca API stabilize oldu. Bu, IDE, CAD, fotoğraf editörü, IoT yönetim paneli gibi “ancak native olur” denilen sınıfta web uygulamasının kapısını açıyor.

Project Fugu APIYetenekTarayıcı 2026Örnek Senaryo
File System AccessYerel dosyalara okuma/yazmaChrome, Edge, OperaWeb tabanlı IDE, CAD
Web BluetoothBLE cihaz iletişimiChrome, Edge, OperaAkıllı tartı, fitness band
Web USBUSB cihaz erişimiChrome, Edge, OperaYazıcı, Arduino, donanım yönetimi
Web SerialSeri port iletişimiChrome, EdgeEndüstriyel kontrolör
Web NFCNFC etiket okuma/yazmaChrome AndroidStok, etkinlik bilet
Web HIDHID cihaz (gamepad, klavye)Chrome, Edge, OperaOyun çevre birimleri
Idle DetectionKullanıcı boşta mı tespitChrome, EdgeChat presence
Window Controls OverlayTitle bar özelleştirmeChrome, EdgeDesktop-class UI
Local Font AccessSistem fontlarına erişimChrome, EdgeTasarım aracı

Bu API’ların her biri permission prompt arkasında çalışır ve HTTPS zorunludur. Safari ve Firefox bazılarına ideolojik gerekçelerle (parmak izi yüzeyi büyütme endişesi) hâlâ mesafeli; Chromium ekosistemi öncülük ediyor. Bu nedenle Fugu yoğun PWA’lar tipik olarak “Chrome/Edge için PWA, Safari için graceful degradation” kalıbıyla tasarlanır.

iOS PWA: Safari Kısıtları ve AB Web App Sınırı

Apple uzun yıllar PWA’yı stratejik düşman olarak gördü, ancak iOS 16.4 (Mart 2023) ile Home Screen Web Apps modelinde Web Push, badging ve manifest desteği geldi. iOS 17.4 (Mart 2024) Apple’ın AB DMA uyumu kapsamında yapısal bir değişiklik getirdi; başlangıçta AB’de PWA’ları tamamen kaldıracağını duyurdu, bağımsız geliştirici ve regülatör tepkisiyle geri adım atıp WebKit dışı motorlara da Home Screen Web App izni verdi. Apple WWDC 2024 oturumları bu süreci geliştirici perspektifinden anlatır.

ÖzellikSafari iOS 17.4+ (AB)Safari iOS 17.4+ (AB Dışı)Chrome Android
Home Screen yüklemeManuel “Ana Ekrana Ekle”Manuel “Ana Ekrana Ekle”Otomatik install prompt
Web PushÇoklu motorSadece WebKitTam destek
Background SyncYokYokVar
Periodic SyncYokYokOrigin trial
File System AccessYok (Origin Private FS var)YokVar
Web BluetoothYokYokVar
Badging APIVar (Home Screen)Var (Home Screen)Var
Storage kotası1 GB (otomatik yönetilen)1 GB~60% disk
7 gün inaktivite sonrası temizlikHayır (Home Screen ise)HayırHayır

Pratik sonuç: iOS hedef pazarda öne çıkıyorsa kullanıcıyı “Ana Ekrana Ekle” akışına yönlendirmek için belirgin bir onboarding tasarımı gerekir. Tek tıklık install prompt yoktur; manuel adımları görsel olarak anlatan bir “iOS install rehberi modal’ı” şarttır.

Install Pattern, Manifest ve App Shell

PWA install pattern üç katmanda kurulur: (1) Web manifest doğru alanlarla, (2) Service Worker en az bir fetch handler ile, (3) Discoverable HTTPS origin. Chrome bu üçü tamamlandığında otomatik olarak beforeinstallprompt event’ini ateşler ve adres çubuğunda install icon belirir. Kötü bir antipattern: kullanıcıya sayfa açılır açılmaz install prompt göstermek — kabul oranı %3’ün altına düşer. Doğru yaklaşım: ikinci ziyarette veya bir “değer anı” sonrası göstermek (sepete ekleme, profil tamamlama).

Install Trigger NoktasıTahmini Kabul OranıNotlar
İlk ziyaret, anında prompt%2-4Antipattern, kullanıcı sinirlenir
2. ziyaret, açılış sonrası 5 sn%8-12Standart yaklaşım
Değer anı sonrası (post-checkout)%18-25En yüksek kalite
Custom banner + native fallback%22-30iOS rehberi modal ile
Push subscription sonrası%15-20İki izin ardarda risk

App Shell mimarisi PWA’nın ilk açılış hızının temelidir: navigation, header, footer gibi değişmeyen UI iskeleti precache’lenir; içerik runtime’da yüklenir. İlk paint bu sayede 1 saniye altına iner. Manifest dosyasında display: standalone, theme_color, background_color, 192×192 ve 512×512 icon, maskable icon varyantı, shortcuts array ve screenshots alanları doldurulmalı; Chrome bunları rich install dialog’da kullanır.

Performans Bütçesi: Core Web Vitals ile PWA Skoru

PWA olmak otomatik hızlı olmak demek değil. Lighthouse PWA audit’i checklist’tir; gerçek deneyimi Core Web Vitals üzerinden ölçeriz. web.dev Core Web Vitals referansı eşikleri tanımlar.

Metrikİyi Eşikİyileştirme GerekZayıfPWA İçin Strateji
LCP (Largest Contentful Paint)< 2.5 sn2.5-4.0 sn> 4.0 snApp Shell precache + SWR
INP (Interaction to Next Paint)< 200 ms200-500 ms> 500 msLong task bölme, web worker
CLS (Cumulative Layout Shift)< 0.10.1-0.25> 0.25Image width/height, font-display
TTFB< 800 ms800-1800 ms> 1800 msEdge cache + service worker
FCP< 1.8 sn1.8-3.0 sn> 3.0 snCritical CSS inline + preload
Bundle JS budget< 170 KB gzipped170-300 KB> 300 KBCode split + tree shake
PWA Lighthouse> 9050-89< 50Manifest + SW + HTTPS

Mobil performans için mobil uygulama performans optimizasyonu yazımız startup time, FPS ve memory ölçüm pratiklerini detaylandırır.

PWA Uygulama Adımları: Sıfırdan Production’a

  1. HTTPS zorunlu: Service Worker yalnızca güvenli kaynaktan çalışır; localhost geliştirme için istisna. Let’s Encrypt veya Cloudflare Universal SSL ile minimum bedele inilebilir.
  2. Web Manifest dosyası: /manifest.webmanifest içinde name, short_name, start_url, display, theme_color, background_color, icons (192 + 512 + maskable), screenshots, shortcuts alanlarını doldur.
  3. Service Worker iskeleti: Workbox 7 ile workbox-cli generateSW veya custom sw.js; install + activate + fetch event’lerini bağla.
  4. Precache manifest: Build adımında static asset listesini hash’leyerek SW’ye gömerek ilk açılışı offline kapasiteli yap.
  5. Runtime caching stratejileri: Route bazlı: /api/* network-first, /static/* cache-first, /profile/* stale-while-revalidate.
  6. Cache versiyonlama: Her deploy’da cache anahtarına git SHA veya semver hash ekle; activate event’inde eski versiyonları sil.
  7. Push notification altyapısı: VAPID keypair üret, backend’de Web Push library (Node web-push, PHP minishlink), subscription endpoint’i ile FCM/APNs köprüsü kur.
  8. Background sync queue: Workbox BackgroundSyncPlugin ile offline form gönderimi otomatik kuyruklanır.
  9. Install prompt UX: beforeinstallprompt event’ini yakala, custom CTA göster; iOS için manuel rehber modal’ı.
  10. Lighthouse + WebPageTest audit: PWA skoru 90+, Performance 85+, Accessibility 95+ hedef; CI’a entegre et.
  11. Monitoring: Service Worker hatalarını Sentry SDK ile yakala; install rate ve push opt-in funnel’larını GA4/Mixpanel’e gönder.

Maliyet, ROI ve Sınırlamalar

Forrester Total Economic Impact 2025 çalışmasına göre orta ölçek e-ticaret firması için PWA geçişi 14 aylık dönemde %188 ROI üretiyor; en büyük tasarruf kalemi iOS+Android ayrı geliştirme yerine tek kod tabanı (yaklaşık 420.000 USD/yıl). İkinci büyük tasarruf App Store komisyonundan muafiyet: aylık 100 bin USD GMV’li bir uygulamada Apple’ın %15-30 komisyonu yıllık 180-360 bin USD’ye karşılık gelir, PWA bu yükü tamamen kaldırır.

  • Avantajlar: Tek kod tabanı, anlık deploy, App Store komisyonu yok, SEO discoverability, URL share, ucuz QA.
  • Sınırlamalar: iOS’ta arka plan çalışma süresi kısıtlı (silent push yok), Bluetooth/NFC Safari’de eksik, GPU yoğun oyunlar native’in gerisinde.
  • Risk noktaları: Cache invalidation hataları, push opt-in funnel yönetimi, iOS install friction.
  • Çözüm: Yüksek frekanslı, içerik/işlem yoğun kullanım için PWA; donanım yoğun deneyim için native — hibrit yaklaşım sağlıklı.

Kurumsal AI dağıtımında yapay zeka entegrasyonu rehberimiz bağlamında PWA, LLM destekli chatbot deneyimini her platforma tek seferde yaymanın en hızlı yoludur; Web Components yazımız framework bağımsız UI parçalarını PWA içinde paylaşmayı kolaylaştırır.

Sık Sorulan Sorular

iOS Safari PWA push notification destekliyor mu?

iOS 16.4’ten itibaren Home Screen’e eklenmiş PWA’lar için web push desteklenir; iOS 17.4 ile birlikte AB pazarında WebKit dışı motorlarda da çalışır. Ancak kullanıcının uygulamayı önce “Ana Ekrana Ekle” ile yüklemesi şart, tarayıcı sekmesinde çalışmaz. Push izin oranı klasik web’e göre %3 daha düşük (manuel install friction nedeniyle), ancak abonelik kaybı da %40 daha az çünkü kullanıcı zaten yüksek niyetle ekledi.

Service worker debug nasıl yapılır?

Chrome DevTools > Application > Service Workers panelinden “Update on reload” ve “Bypass for network” seçenekleriyle çalışmak başlangıçta zorunludur. Workbox debug modunda her cache hit/miss’i konsola yazar; production’da bu log’lar kapatılır. En yaygın hata: cache anahtarına versiyon eklemeden deploy yapmak; sonuçta kullanıcı eski sürümde sıkışır. Skipping waiting fazını bilinçli yönetmek ve kullanıcıya “yeni sürüm var, yenile” toast’u göstermek profesyonel pratiktir.

PWA App Store’a yüklenebilir mi?

Microsoft PWABuilder, Capacitor veya Trusted Web Activity (Android için) ile PWA, iOS App Store ve Google Play’e gönderilebilen native sarmal halinde paketlenebilir. Bu yaklaşım hem App Store görünürlüğü kazandırır hem de tek kod tabanı avantajını korur. Apple’ın 2024 sonrası WebView politikalarına dikkat etmek gerek; tamamen statik WebView içerik App Store onayını zorlaştırır, en az birkaç native özellik (örneğin push, dosya paylaşımı) eklemek onay sürecini hızlandırır.

PWA SEO’ya etki ediyor mu?

Doğrudan değil ama dolaylı çok güçlü etki ediyor. PWA’nın Core Web Vitals üzerindeki olumlu etkisi (LCP, INP, CLS) Google sıralamasında doğrudan rol oynar. Stale-while-revalidate stratejisi LCP’yi ortalama %35 iyileştirir, App Shell mimarisi ile FCP 1 saniye altına iner. Google’ın 2025 mobil-first sıralama algoritması bu metriklere ağırlık veriyor. Ek olarak install edilmiş PWA’lar daha uzun oturum süresi üretir, return visitor sinyali güçlenir.

Service Worker cache kotası ne kadar?

Chrome ve Edge dinamik kota verir, tipik olarak diskin %60’ı sınırına kadar büyüyebilir (storage manager API ile sorgulanabilir). Safari ise sıkı: tarayıcı sekmesindeki PWA için ~1 GB, Home Screen’e eklenirse otomatik temizlik daha gevşek. Önemli kural: gereksiz cache büyütmek pil ve disk maliyeti üretir; precache 50 MB üstüne çıkmamalı, runtime cache’lerde maxEntries ve maxAgeSeconds limitleri kullanılmalı. Workbox bu limitleri ExpirationPlugin ile otomatik yönetir.

Sonuç: Kullanım Senaryosuna Göre Karar

Progressive Web App 2026’da artık tarayıcı eklentisi değil, kurumsal mobil stratejinin ana ekseni. Doğru cache stratejisi seçilmiş, manifest ve Service Worker düzgün kurulmuş, push notification opt-in funnel’ı tasarlanmış bir PWA, native deneyimin %85’ini sunarken geliştirme maliyetini yarıya ve dağıtım sürtünmesini sıfıra indirir. Verdict: E-ticaret, içerik platformu, SaaS dashboard, hizmet rezervasyonu, kurumsal portal, medya yayını ve haber için varsayılan tercih PWA’dır. Bluetooth LE mesh, ARKit, RAW kamera ve NPU yoğun ML deneyimleri için native gereklidir. İkisinin arasında bir donanım yetenek karması varsa hibrit (Capacitor + PWA core) en sağlıklı yoldur. Önemli olan offline-first prensibini başlangıçta benimsemek, cache stratejisini endpoint başına bilinçli seçmek ve Core Web Vitals bütçesini CI/CD’ye gömerek savunmaktır.

Ömer ÖNAL

Yazılım Mimarı | Yapay Zeka LLC. Ölçeklenebilir SaaS, .NET Core altyapıları ve Otonom AI süreçleri inşa ediyorum. Kod değil, sistem tasarlarım.

Yorum (1)

  1. Ömer ÖNAL
    Mayıs 16, 2026

    Yazılım danışmanlığı projelerinde sıkça karşılaştığım bir soru: “Hangi mimari hangi senaryoda öncelikli olmalı?” Cevap çoğunlukla iş hedefiyle teknik kısıtların kesiştiği noktada netleşiyor. Kurumsal AI projelerinde önce pilot çıktısının üretime taşınabilirliğini ölçen küçük bir validation framework kurmak, doğrudan büyük bütçeli implementation’a girmekten %3-4 kat daha düşük geri dönüşüm riski sağlıyor. Yorumlarınıza açığım.

Yorum Yap

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir