PWA Progressive Web App: Uygulama Benzeri Web Deneyimi

Progressive Web App (PWA) Nedir?

Progressive Web App (PWA), web teknolojileri kullanilarak gelistirilen ancak yerel (native) uygulama deneyimi sunan bir web uygulamasi turudur. PWA'lar, kullanicilarin cihazlarina kurulabilir, cevrimdisi calisabilir, push bildirim gonderebilir ve cihaz donanimi ile etkilesime gecebilir. Google, Microsoft ve Apple'in destegi ile PWA standartlari 2026 yilinda olgunlasarak guclu bir alternatif haline gelmistir.

Geleneksel web siteleri ile yerel uygulamalar arasindaki boslu dolduran PWA'lar, tek bir kod tabaniyla tum platformlarda calisir. Uygulama magaza onay surecine gerek kalmadan dogrudan kullanicilarla payllasilabilir ve aninda guncellenebilir.

PWA'nin Temel Bilesenleri

Bir web uygulamasinin PWA olarak nitelendirilebilmesi icin uc temel bilesene sahip olmasi gerekir:

HTTPS: PWA'lar guvenli baglanti uzerinden sunulmalidir. Service Worker'lar yalnizca HTTPS uzerinde calisir (localhost haric).
Web App Manifest: Uygulamanin adi, ikonu, renkleri ve gorunum modu gibi meta bilgileri iceren JSON dosyasi.
Service Worker: Arka planda calisan, ag isteklerini yakalayan ve onbellekleme stratejileri uygulayan JavaScript dosyasi.

Web App Manifest Dosyasi

manifest.json (veya manifest.webmanifest) dosyasi, PWA'nizin tarayiciya nasil gorunecegini ve davranacagini tanimlar. HTML dosyanizda <link rel="manifest" href="/manifest.json"> ile bagllanir.

Manifest dosyasinin temel ozellikleri sunlardir:

name: Uygulamanin tam adi. Kurulum ekraninda ve splash screen'de goruntulenir.
short_name: Ana ekran ikonunun altinda gosterilen kisa isim. En fazla 12 karakter olmalidir.
start_url: Uygulama acildiginda yuklenecek sayfa. Genellikle / veya /?source=pwa seklinde analytics takibi icin parametreli kullanilir.
display: Uygulamanin gorunum modu. standalone en yaygin secimdir; tarayici arayuzunu gizler ve yerel uygulama hissi verir. Diger secenekler: fullscreen, minimal-ui, browser.
theme_color: Tarayici adres cubugu ve gorev cubugu rengi.
background_color: Uygulama acilirken gosterilen splash screen arka plan rengi.
icons: Farkli boyutlarda uygulama ikonlari. En az 192x192 ve 512x512 piksel boyutlarinda ikonlar gereklidir. maskable amaci destekleyen ikonlar eklemek, Android cihazlarda uyarlanabilir ikon desteagi saglar.
scope: PWA'nin kontrol ettigi URL kapsamini belirler.
orientation: Tercih edilen ekran yonelimi: portrait, landscape veya any.

Service Worker Temelleri

Service Worker, web sayfasindan bagimsiz olarak arka planda calisan bir JavaScript dosyasidir. Ag isteklerini yakalayabilir, onbellekleme stratejileri uygulayabilir ve cevrimdisi deneyim sunabilir. Yakem dongusu uc asamadan olusur:

Kayit (Registration): Ana JavaScript dosyanizda Service Worker'i kayit edersiniz. navigator.serviceWorker.register('/sw.js') ile kayit islemi baslatilir.
Kurulum (Install): Service Worker ilk kez indirildiginde install olayi tetiklenir. Bu asamada kritik kaynaklari onbellege alabilirsiniz.
Etkinlestirme (Activate): Kurulumdan sonra activate olayi tetiklenir. Eski onbellekleri temizlemek icin ideal assamadir.

Onbellekleme Stratejileri

Service Worker ile ag isteklerini yonetmek icin cesitli onbellekleme stratejileri kullanilir. Her stratejinin farkli kullanim alanlari vardir:

Strateji	Aciklama	Kullanim Alani
Cache First	Once onbellek kontrol edilir, yoksa aga gidilir	Statik dosyalar, gorseller, fontlar
Network First	Once ag denenir, basarisizsa onbellek kullanilir	API cevaplari, dinamik icerik
Stale While Revalidate	Onbellekten hizlica sunar, arka planda gunceller	Sosyal medya akislari, haber icerikleri
Cache Only	Yalnizca onbellekten sunar	Uygulama kabugu (app shell), offline sayfalar
Network Only	Yalnizca agdan sunar, onbellek kullanilmaz	Odeme islemleri, form gonderimleri

Workbox kutuphanesi, bu stratejileri uygulamak icin Google tarafindan gelistirilen ve sektorun standardi haline gelmis bir aractir. Karmasik Service Worker kodlarini basitlestirerek hata riskini azaltir.

Cevrimdisi Destek (Offline Support)

PWA'larin en guclu ozelliklerinden biri, internet baglantisi olmadan da calissabilmesidir. Etkili bir cevrimdisi deneyim icin sunlari uygulayin:

App Shell modeli: Uygulamanin temel yapisini (header, sidebar, footer) onbellege alin. Dinamik icerik daha sonra yuklenir.
Ozel cevrimdisi sayfasi: Ag baglantisi yokken ve istenen kaynak onbellekte degilken gosterilecek kullanici dostu bir sayfa tasarlayin.
Background Sync: Cevrimdisiyken yapilan islemleri (form gonderimleri, begeniler) kuyruga alin ve baglanti geri geldiginde otomatik olarak gonderin.
IndexedDB: Buyuk miktarda yapilandirilmis veriyi istemci tarafinda depolayin. Cevrimdisi senaryolarda veritabani gibi calisir.

Push Bildirimleri

Push bildirimleri, kullanicilara uygulama acik olmasa bile mesaj gondermeinizi saglar. Iki temel API kullanilir:

Push API: Sunucudan bildirim almak icin. Kullanicidan izin istendikten sonra bir PushSubscription nesnesi olusturulur. Bu nesne sunucuya gonderilir ve sunucu bu bilgiyi kullanarak bildirim gonderir.
Notification API: Bildirimi gostermek icin. self.registration.showNotification(baslik, secenekler) ile Service Worker icerisinden bildirim olusturulur.

Bildirim izni istemek icin dogru zamanlama kritiktir. Sayfaya ilk girisste hemen izin istemek yerine, kullanicinin etkiliselim gosterdigi bir anda (ornegin bir urun begendikten sonra) istemek, kabul oranini onemli olcude arttirir.

Kurulum Istemi (Install Prompt)

PWA'larin cihaza kurulmasini tesvik etmek icin beforeinstallprompt olayini kullanabilirsiniz. Tarayici, PWA kriterlerini karsilayan bir site tespit ettiginde bu olayi tetikler.

Olayi yakalayarak varsayilan istemi engelleyin ve kendi ozel kurulum UI'inizi gosterin.
Kullaniciya uygulamayi neden kurmasi gerektigini acikca belirtin: cevrimdisi erisim, hizli yukleme, bildirimler gibi faydalar.
Kurulum istemini dogru zamanda gosterin; sayfa yuklendiginde hemen degil, kullanicinin uygulamadan fayda gormesi sonrasinda.
appinstalled olayi ile kurulumun basarili olup olmadigini takip edin ve analytics verisi olarak kaydedin.

Next.js ile PWA Gelistirme

Next.js projelerinde PWA ozelliklerini eklemek icin next-pwa veya @serwist/next gibi kutuphaneler kullanilabilir. Temel adimlar sunlardir:

PWA kutuphanesini yukleyin ve Next.js yapilandirmasina ekleyin.
public klasorune manifest.json dosyasini olusturun.
Farkli boyutlarda uygulama ikonlari hazirlaayin (192x192, 384x384, 512x512).
Layout dosyasinda manifest baglantisini ve meta etiketlerini ekleyin.
Cevrimdisi sayfasi icin ozel bir fallback sayfasi olusturun.
Gelistirme ortaminda Service Worker'i devre disi birakmayi dusunun; hata ayiklamayi kolaylastirir.

PWA Performans ve Test

PWA'nizin kalitesini olcmek ve iyilestirmek icin asagidaki araclari ve pratikleri kullanin:

Lighthouse: Chrome DevTools icindeki Lighthouse araci, PWA puanllamanizi detayli sekilde analiz eder ve iyilestirme onerileri sunar.
Application paneli: Chrome DevTools'taki Application sekmesinde manifest, Service Worker ve cache durumunu inceleyebilirsiniz.
PWABuilder: Microsoft'un araci, PWA'nizi analiz eder ve uygulama paketleri olusturmaniza yardimci olur.
Cevrimdisi test: DevTools'ta Network sekmesinde "Offline" secenegini etkinlestirerek cevrimdisi deneyimi test edin.
Farkli cihazlarda test: Android, iOS, Windows ve macOS uzerinde kurulum ve calisma deneyimini test edin. Ozellikle iOS'ta bazi sinirlamalar mevcuttur.

Sonuc:PWA teknolojisi, web ve yerel uygulama denyimlerinin en iyi yanlarini birlestirerek kullanicilara hizli, guvenilir ve etkileyici bir deneyim sunar. Service Worker'lar, manifest dosyasi ve modern web API'lari ile uygulamanizi bir ust seviyeye tasiyabilirsiniz. Ozellikle gelisen pazarlarda dusuk bant genisligi ve sinirli depolama alaniyla mucadele eden kullanicilar icin PWA, mukkemmel bir cozumdur.