PWA (Progressive Web Apps) Nedir?

PWA, modern web yeteneklerini yerel mobil uygulama deneyimiyle birleştiren yazılım modelidir. Kullanıcı uygulama mağazasına girmeden web sitesini ana ekrana ekler. Çevrimdışı çalışır, anlık bildirim gönderir, donanıma erişir.

PWA Avantajı: Tek kod tabanı, sıfır App Store komisyonu, anında güncelleme, düşük geliştirme maliyeti.

Modern Web Trendleri ve PWA

Dijital ajans projelerinde PWA kullanımı hızla artıyor. Nedenleri:

Yüksek Dönüşüm: Hızlı yükleme süreleri bounce rate oranını düşürür.
Düşük Boyut: Yerel uygulamalar 50-100 MB iken PWA genellikle 1 MB altındadır.
SEO Uyumu: Standart URL yapısına sahip olduğundan arama motorları içeriği doğrudan indeksler.

Adım Adım PWA Kurulum Rehberi

Adım 1: Web App Manifest Tanımlama

Uygulama adı, simgeler ve tema renklerini belirten manifest.json dosyasını kök dizine ekleyin:

{
  "name": "Modern Web App",
  "short_name": "WebApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

HTML <head> alanına bağlayın:

<link rel="manifest" href="/manifest.json">

Adım 2: Service Worker Kaydı ve Önbellekleme

Service Worker, tarayıcı ile ağ arasında proxy görevi görür. Çevrimdışı desteği sağlar.

Ana JavaScript dosyanızda Service Worker kaydedin:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js');
  });
}

Kök dizinde sw.js oluşturun (Cache-First stratejisi):

const CACHE_NAME = 'app-cache-v1';
const ASSETS = ['/', '/index.html', '/style.css', '/app.js'];

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

self.addEventListener('fetch', (e) => {
  e.respondWith(
    caches.match(e.request).then((res) => res || fetch(e.request))
  );
});

Adım 3: HTTPS Zorunluluğu

Service Worker API güvenlik nedeniyle sadece HTTPS veya localhost üzerinde çalışır. SSL sertifikanızı aktif edin.

Adım 4: Yükleme Deneyimi (Add to Home Screen)

Tarayıcının varsayılan yükleme istemini yakalayıp özel butonla tetikleyin:

let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  const installBtn = document.getElementById('install-btn');
  installBtn.style.display = 'block';
  
  installBtn.addEventListener('click', () => {
    installBtn.style.display = 'none';
    deferredPrompt.prompt();
  });
});

Test ve Doğrulama

PWA standartlarını test etmek için Chrome DevTools kullanın:

Lighthouse: DevTools > Lighthouse sekmesinden "Progressive Web App" analizini çalıştırın.
Application Tab: Manifest ve Service Worker durumunu denetleyin. Offline modunu test edin.