PWA Nedir? 30 Dakikada Uygulama Gibi Web Yapın

Giriş

PWA nedir diye aratmanızın sebebi büyük ihtimalle şu: Web siteniz hızlı olsa bile kullanıcılar “uygulama gibi” hissetmiyor, offline kalınca bozuluyor, ana ekrana eklenmiyor ve geri dönüşler düşüyor.

İyi haber: PWA (Progressive Web App) yaklaşımıyla mevcut web projenizi baştan yazmadan; ana ekrana ekleme, offline çalışma, daha iyi performans ve uygulama benzeri deneyim gibi özellikleri adım adım ekleyebilirsiniz.

Bu yazıda PWA nedir sorusunu netleştirip, gerçek hayatta işe yarayan bir kontrol listesiyle 30 dakikada temel PWA kurulumunu yapacağız.

PWA Nedir? (Progressive Web App)

PWA, tarayıcıda çalışan bir web uygulamasının; kullanıcıya yerel (native) uygulama benzeri deneyim sunması için tasarlanmış standartlar bütünüdür.

PWA’nın temel taşları:

• Web App Manifest: Uygulama adı, ikon, tema rengi, başlangıç ekranı gibi bilgileri tanımlar.
• Service Worker: Arka planda çalışan, cache/offline ve ağ stratejilerini yöneten script.
• HTTPS: Güvenlik ve service worker için zorunlu.

PWA, “tek seferde her şeyi native yapalım” değil; “mevcut web’i kademeli olarak güçlendirelim” felsefesidir.

Neden PWA Yapmalıyım? (Gerçek Kazançlar)

PWA’nın en pratik faydaları:

• Offline / zayıf internet desteği: Kullanıcı metroda bile sayfayı açabilir.
• Ana ekrana ekleme: “Uygulama gibi” geri dönüş ve kullanım sıklığı.
• Daha hızlı açılış: Akıllı cache ile ilk içerik daha çabuk gelir.
• Tek kod tabanı: iOS/Android mağaza sürecine girmeden yaygın erişim.

Gerçek hayattan örnek

Bir e-ticaret girişimi düşünün: Kullanıcı ürünü incelerken internet gidip geliyor. PWA ile:

• Ürün detay sayfasının son görüntüsü cache’den açılır,
• Sepete ekleme işlemi queued edilip internet gelince tamamlanabilir (ileri seviye),
• Kullanıcı “site bozuldu” demeden deneyime devam eder.

PWA İçin Ön Koşullar (Kontrol Listesi)

Aşağıdaki tablo hızlı bir “hazır mıyım?” kontrolü sağlar:

30 Dakikada PWA Kurulumu (Adım Adım)

Bu bölümde “minimum çalışan” bir PWA kuracağız. Örnekler framework bağımsızdır.

1) Web App Manifest ekleyin

Projenizin root’una manifest.webmanifest ekleyin:

{
  "name": "Ornek PWA",
  "short_name": "Ornek",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "background_color": "#0b1020",
  "theme_color": "#0b1020",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Ardından index.html içine bağlayın:

<link rel="manifest" href="/manifest.webmanifest" />
<meta name="theme-color" content="#0b1020" />

İpucu: İkonları gerçekten üretin. Eksik/yanlış ikon, “ana ekrana ekle” deneyimini bozar.

2) Service Worker kaydı (register) yapın

/sw.js dosyasını birazdan yazacağız. Önce kaydı ekleyin:

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', async () => {
      try {
        await navigator.serviceWorker.register('/sw.js');
        console.log('Service Worker kayıt edildi');
      } catch (e) {
        console.error('SW kayıt hatası', e);
      }
    });
  }
</script>

3) Basit bir cache stratejisi yazın (offline sayfası dahil)

Root’a sw.js oluşturun:

const CACHE_NAME = 'pwa-cache-v1';
const OFFLINE_URL = '/offline.html';

const PRECACHE_ASSETS = [
  '/',
  '/styles.css',
  OFFLINE_URL
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => cache.addAll(PRECACHE_ASSETS))
  );
  self.skipWaiting();
});

self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((keys) =>
      Promise.all(
        keys
          .filter((key) => key !== CACHE_NAME)
          .map((key) => caches.delete(key))
      )
    )
  );
  self.clients.claim();
});

self.addEventListener('fetch', (event) => {
  const req = event.request;

  // Sadece GET isteklerini ele alalım
  if (req.method !== 'GET') return;

  event.respondWith(
    (async () => {
      try {
        // Önce ağ (güncel içerik), başarısız olursa cache
        const networkRes = await fetch(req);

        // Aynı origin ise cache'e yaz
        const url = new URL(req.url);
        if (url.origin === self.location.origin) {
          const cache = await caches.open(CACHE_NAME);
          cache.put(req, networkRes.clone());
        }

        return networkRes;
      } catch (e) {
        const cached = await caches.match(req);
        if (cached) return cached;

        // Navigasyon isteklerinde offline sayfası
        if (req.mode === 'navigate') {
          return caches.match(OFFLINE_URL);
        }

        throw e;
      }
    })()
  );
});

Şimdi basit bir offline.html oluşturun:

<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Offline</title>
</head>
<body>
  <h1>Bağlantı yok</h1>
  <p>İnternet gelince tekrar deneyin. Bu sayfa PWA offline desteği için gösteriliyor.</p>
</body>
</html>

Bunu neden yapmalıyım? Çünkü kullanıcı boş ekran yerine kontrollü bir mesaj görür; güven artar.

4) Cache stratejisini doğru seçin (mini rehber)

Her şey için tek strateji kullanmak hatalıdır. Aşağıdaki pratik eşleştirmeyi kullanın:

• HTML (sayfalar): Network-first (güncel içerik önemli)
• CSS/JS (statik dosyalar): Cache-first (hız önemli)
• API yanıtları: Duruma göre stale-while-revalidate veya network-first

İleri seviye için Google Workbox ile stratejileri daha güvenli yönetebilirsiniz.

5) Lighthouse ile PWA testini yapın

Chrome DevTools → Lighthouse → “Progressive Web App” seçin.

Kontrol edin:

• Manifest doğru mu?
• Service worker çalışıyor mu?
• Sayfa offline senaryosunda açılıyor mu?
• Installable (yüklenebilir) görünüyor mu?

Hızlı hata ayıklama ipucu:

• DevTools → Application → Service Workers → “Update” / “Unregister”
• Cache’i temizleyip tekrar deneyin.

6) Yaygın hatalar (ve hızlı çözümler)

• HTTP’de deneme: Service worker çalışmaz → HTTPS kullanın.
• Yanlış start_url: Ana ekrandan açınca 404 → start_url rotasını doğrulayın.
• Eksik ikon boyutları: Yükleme önerisi çıkmaz → 192 ve 512 ekleyin.
• Her şeyi cache’lemek: Eski içerik sorunu → HTML’de network-first tercih edin.

Sık Sorulan Sorular (FAQ)

1) PWA nedir, mobil uygulamanın yerini alır mı?

Bazı projelerde alır; fakat push, arka plan senaryoları, donanım erişimi gibi ihtiyaçlarda native hâlâ avantajlı olabilir.

2) PWA iPhone’da çalışır mı?

Evet, Safari iOS PWA’yı destekler. Ancak bazı özellikler (özellikle push bildirimleri) sürüme göre sınırlı olabilir.

3) PWA için mağazaya (App Store/Play Store) koymak şart mı?

Hayır. PWA tarayıcıdan yüklenebilir. İsterseniz ayrıca paketleyip mağazalara da sunabilirsiniz.

4) SEO açısından PWA iyi mi?

Doğru uygulanırsa evet. Hız, mobil deneyim ve erişilebilirlik SEO’yu destekler; ancak yanlış cache stratejisi indeksleme sorunları çıkarabilir.

Sonuç

Bu rehberle PWA nedir sorusunu netleştirdik ve manifest + service worker ile temel bir PWA’yı adım adım kurduk. Artık siteniz; offline fallback, ana ekrana eklenebilirlik ve daha “uygulama gibi” bir deneyim sunmaya hazır.

Bir sonraki adım olarak: Lighthouse skorlarınızı paylaşın ve hangi framework’te (Next.js, Nuxt, Vite, Angular vb.) PWA’ya geçmek istediğinizi yorumda yazın; ona göre daha ileri seviye cache/push stratejisiyle devam edelim.