Bir kullanıcı mobil tarayıcıda bir web sitesini açtığında ekranda "ana ekrana ekle" bildirimini görebilir. Dokunduğunda site, App Store'dan geçmeden telefonun uygulama simgeleri arasına yerleşir; internet bağlantısı olmadığında bile açılabilir ve bildirim gönderebilir. Bu davranışın arkasında Progressive Web App (PWA) teknolojisi vardır: HTML, CSS ve JavaScript ile yazılmış, ama yerel bir uygulama gibi davranan bir web uygulaması.
PWA'nın asıl gücü, tek bir kod tabanıyla hem normal bir web sitesi hem de yüklenebilir bir uygulama deneyimi sunmasından gelir. Bu rehberde PWA'yı çalışır hâle getiren temel teknolojileri ve bir web uygulamasını adım adım PWA'ya dönüştürme sürecini ele alıyoruz.
Service worker arka planda neyi yönetir
Service worker, çalıştığı web sayfasından bağımsız olarak tarayıcının arka planında yürüyen bir JavaScript dosyasıdır. Sayfa kapansa bile çalışmaya devam edebilir; bu yüzden çevrimdışı çalışma, arka plan senkronizasyonu ve push bildirimi gibi özelliklerin temelini oluşturur. Bir service worker kaydetmek birkaç satır kodla başlar:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('Service worker kaydedildi:', reg.scope))
.catch(err => console.error('Kayıt başarısız:', err));
}
Service worker'ın en önemli görevi, ağ isteklerini yakalamaktır. fetch olayını dinleyerek her istek için yanıtın önbellekten mi yoksa ağdan mı geleceğine karar verebilir:
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
Bu basit "önce önbellek" (cache-first) yaklaşımı, istenen kaynak önbellekte varsa onu döner, yoksa isteği ağa gönderir. Sık değişen dinamik içerikte "önce ağ" (network-first) yaklaşımı daha uygundur: bu yöntem güncel veriyi önceliklendirir ve yalnızca ağ isteği başarısız olduğunda önbelleğe geri döner.
Web app manifest uygulamayı nasıl tanımlar
Bir PWA'nın ana ekrana yüklenebilmesi için gereken ikinci parça, web app manifest dosyasıdır. Bu JSON dosyası uygulamanın adını, simgelerini, renklerini ve görüntüleme modunu tanımlar; tarayıcı bu bilgileri okuyarak uygulamayı yerel bir uygulama gibi başlatır.
{
"name": "Örnek Uygulama",
"short_name": "Örnek",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2563eb",
"icons": [
{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
display: standalone değeri, uygulamanın tarayıcı adres çubuğu olmadan tam bir uygulama gibi açılmasını sağlar. start_url, kullanıcı ana ekrandaki simgeye dokunduğunda hangi sayfanın açılacağını belirtir. Bu manifest dosyası HTML'in <head> bölümüne şu satırla bağlanır:
<link rel="manifest" href="/manifest.json">
Manifest ve service worker birlikte, tarayıcının "yüklenebilirlik" (installability) kriterlerini karşılar. Chrome ve Edge gibi tarayıcılar bu kriterler sağlandığında "ana ekrana ekle" istemini otomatik gösterir. Bu istem elle de tetiklenebilir, ama tarayıcının varsayılan davranışı çoğu senaryoda yeterlidir.
Chrome'un bir PWA'yı yüklenebilir sayması için şu asgari kriterler karşılanmalıdır:
- Geçerli bir web app manifest dosyası bağlanmış olmalı
- En az 192x192 ve 512x512 boyutlarında simge tanımlanmalı
- Sayfa HTTPS üzerinden sunulmalı
- Kayıtlı ve
fetcholayını dinleyen bir service worker bulunmalı start_urlmanifest içinde geçerli bir yola işaret etmeli
Safari'nin PWA desteği Chrome ve Edge'e kıyasla daha sınırlıdır. iOS'ta push bildirimleri ve arka plan senkronizasyonu gibi bazı özellikler kısıtlı çalışır ya da hiç desteklenmez. Bir PWA'yı yayınlamadan önce hedef kitlenin ağırlıklı olarak hangi tarayıcıyı kullandığını bilmek, hangi özelliklere güvenilip hangilerine yedek (fallback) plan hazırlanması gerektiğini belirler.
Çevrimdışı çalışma nasıl kurgulanır
Çevrimdışı çalışma, PWA'ları geleneksel web sitelerinden ayıran en somut özelliktir. Bunu sağlamak için service worker, uygulamanın kritik dosyalarını (HTML, CSS, JS, temel görseller) kurulum aşamasında önbelleğe alır:
const CACHE_NAME = 'uygulama-v1';
const KAYNAKLAR = ['/', '/style.css', '/app.js', '/offline.html'];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => cache.addAll(KAYNAKLAR))
);
});
Ağ isteği başarısız olduğunda kullanıcıya boş bir hata sayfası yerine hazırlanmış bir offline.html gösterilmesi deneyimi büyük ölçüde iyileştirir. Bu yaklaşım, özellikle toplu taşımada ya da sinyalin zayıf olduğu bölgelerde uygulamayı kullananlar için fark yaratır.
Eski önbellek sürümlerini temizlemek de aynı derecede önemlidir. activate olayı, yeni bir service worker devreye girdiğinde eski CACHE_NAME değerlerini silmek için kullanılır. Aksi hâlde kullanıcının cihazında gereksiz eski dosyalar birikir ve depolama alanı boşuna dolar.
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(keys =>
Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k)))
)
);
});
Bu temizlik kodu, yalnızca güncel CACHE_NAME ile eşleşmeyen önbellekleri siler. Yeni bir sürüm yayınlarken CACHE_NAME değerini artırmak (örneğin uygulama-v2), eski dosyaların otomatik olarak silinmesini tetikler. Bu basit versiyonlama disiplini, PWA güncellemelerinin sorunsuz yayılmasını sağlar.
Hangi projeler PWA'dan gerçekten fayda görür
PWA her proje için doğru seçim değildir. En çok fayda sağladığı senaryoları bilmek, geliştirme kaynaklarını doğru yere yönlendirmek anlamına gelir. İçerik ağırlıklı siteler (haber, blog, dokümantasyon), çevrimdışı okuma ve hızlı yükleme sayesinde kullanıcı bağlılığını artırır. E-ticaret siteleri ise hızlı sayfa geçişleri ve push bildirimleriyle terk edilen sepet oranını düşürebilir.
Buna karşılık kameraya, Bluetooth'a veya cihazın derin donanım özelliklerine yoğun biçimde ihtiyaç duyan uygulamalar (profesyonel video düzenleme, gelişmiş AR uygulamaları) hâlâ yerel uygulama API'lerine daha bağımlıdır. PWA'ların tarayıcı API desteği hızla genişliyor, ama bazı donanım erişimleri platforma göre hâlâ tutarsız çalışabilir.
Karar verirken şu soru yol gösterir: kullanıcıların uygulama mağazasından geçmeden hızlı erişmesi mi önemli, yoksa cihazın tüm donanım özelliklerine tam erişim mi gerekli? Cevap birinciyse PWA, ikinciyse yerel geliştirme daha uygun bir yoldur.
Bazı ekipler iki yaklaşımı birlikte kullanır: temel deneyimi PWA olarak sunar, gelişmiş donanım erişimi gerektiren özellikleri yalnızca yerel uygulamaya taşır. Bu hibrit strateji geniş erişilebilirlik ile gerektiğinde derin platform entegrasyonunu bir arada sağlar, ama iki ayrı kod tabanını senkron tutmanın getirdiği ek bakım yükünü de beraberinde getirir.
Test ve performans ölçümü nasıl yapılır
Bir PWA'nın kriterleri gerçekten karşılayıp karşılamadığını görmek için Chrome DevTools içindeki Lighthouse aracı kullanılır. Bu araç manifest doğruluğunu, service worker kaydını, HTTPS kullanımını ve performans metriklerini otomatik tarayarak bir puan ve eksiklik listesi üretir.
npx lighthouse https://siteniz.com --view --preset=desktop
Bu komut siteyi tarar ve sonuçları tarayıcıda açar. "Progressive Web App" bölümündeki her başarısız kontrol, hangi dosyanın ya da ayarın eksik olduğunu gösterir. HTTPS zorunluluğu burada kritik bir noktadır: service worker'lar yalnızca güvenli bağlantı (HTTPS) veya localhost üzerinde çalışır; bu bir güvenlik gereksinimidir ve atlanamaz.
Performans tarafında ilk yükleme süresini kısaltmak, PWA deneyiminin can damarıdır. Gereksiz JavaScript paketlerini küçültmek, kritik CSS'i satır içi (inline) yüklemek ve görselleri modern formatlarda (WebP, AVIF) sunmak, Lighthouse puanını doğrudan etkileyen pratik adımlardır. Bu optimizasyonlar aynı zamanda sıradan bir web sitesi için de geçerli iyi uygulamalardır.
Mozilla'nın geliştirici dokümantasyonu (MDN), service worker yaşam döngüsü ve önbellekleme stratejileri için güncel ve ayrıntılı bir referanstır. Yeni bir önbellekleme deseni denerken ya da beklenmedik bir tarayıcı davranışıyla karşılaşıldığında ilk başvurulacak kaynak burasıdır.
Lighthouse puanı yüksek çıksa bile gerçek cihazlarda test etmek atlanmamalıdır. Masaüstü Chrome'da sorunsuz çalışan bir service worker, düşük bellekli bir Android telefonda farklı davranabilir. Chrome DevTools'un uzaktan hata ayıklama (remote debugging) özelliği, gerçek bir mobil cihazı bilgisayara bağlayıp service worker durumunu canlı izlemeyi mümkün kılar.
Manifest, service worker ve HTTPS'i doğru kurup Lighthouse ile düzenli denetlemek, bir web uygulamasını gerçek anlamda "yüklenebilir ve güvenilir" bir PWA'ya dönüştürmenin en kısa yoludur.
Kaynaklar ve doğrulama
Bilgileri uygulamadan önce güncel ayrıntıları aşağıdaki birincil veya alan otoritesi kaynaklardan kontrol edin.
Yazan Celil Uyanikoglu
25 yıldır bilgi işlem piyasasında farklı dallarda uzmanlaşan bir Bilgisayar Mühendisi
Henüz yorum yok.
Sohbete katıl. Yorumlar yayınlanmadan önce moderasyondan geçer.