PWA Rehberi: Web Sitesini Mobil Uygulamaya Dönüştürme

PWA Nedir: Dijital Strateji ve Modern Trendler

PWA (Progressive Web App), web sitelerine yerel mobil uygulama özellikleri kazandıran standarttır. App Store onay süreçlerini ve komisyonları ortadan kaldırır. Çevrimdışı çalışma, anlık bildirim (push notification) ve ana ekrana ekleme yetenekleri sunar. Düşük geliştirme maliyeti nedeniyle modern web trendleri arasında temel dijital strateji bileşenidir.

Adım 1: Web App Manifest Dosyası Oluşturma

Uygulama adı, tema renkleri ve ikonları tanımlayan manifest.json dosyasını kök dizine ekleyin:

{
  "name": "PWA Uygulama",
  "short_name": "App",
  "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 Kodlama

Çevrimdışı çalışma ve ağ isteklerini yakalamak için sw.js oluşturun. Native Cache API kullanın:

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))
  );
});

Service Worker sadece HTTPS ve localhost üzerinde çalışır. HTTP ortamında tetiklenmez.

Adım 3: Service Worker Kaydı (Registration)

Ana JavaScript dosyanıza kayıt mantığını ekleyin:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .catch((err) => console.error('SW Kayıt Hatası:', err));
  });
}

Adım 4: Lighthouse ile PWA Doğrulama

• Test: Chrome DevTools > Lighthouse sekmesini açın.
• Kriterler: Manifest tanımlı, Service Worker kayıtlı, HTTPS aktif, 200 OK yanıtları mevcut.
• Doğrulama: Kurulum kriterleri sağlandığında tarayıcı adres çubuğunda "Uygulamayı Yükle" butonu belirir.

PWA İpuçları

• Önbellek Geçersiz Kılma: Kod güncellendiğinde CACHE_NAME sürümünü artırın (örn: v2).
• Ağ Stratejisi: Dinamik veriler için Network-First, statik varlıklar için Cache-First stratejisi kullanın.