PWA (Progressive Web App) Nedir?

PWA, web teknolojileri (HTML, CSS, JS) ile geliştirilen, yerel mobil uygulama deneyimi sunan modern web standardıdır. Kullanıcı tarayıcıdan siteye girer, tek tıkla ana ekrana ekler. Uygulama mağazası zorunluluğu yoktur.

PWA üç temel direk üstüne kurulur: HTTPS, Web App Manifest ve Service Worker.

Neden PWA? Dijital Ajans ve İşletme Avantajları

Mobil uygulama maliyetleri yüksektir. iOS ve Android için ayrı kod tabanı yönetmek kaynak tüketir. Dijital ajans projelerinde ve kurumsal sitelerde PWA tercih edilme nedenleri:

Düşük Maliyet: Tek kod tabanı tüm platformlarda çalışır.
Çevrimdışı Çalışma: Ağ kesilse bile içerik önbellekten gelir.
Push Bildirimleri: Mobil uygulamalar gibi anlık bildirim gönderir.
SEO Uyumu: Arama motorları içeriği doğrudan indeksler.
Yüksek Dönüşüm: Trendler, PWA kullanan sitelerin yükleme süresinin %300 hızlandığını ve terk etme oranlarının düştüğünü gösterir.

Adım Adım Web Sitesini PWA Yapma Rehberi

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

Kök dizine manifest.json ekleyin. Tarayıcıya uygulamanın adı, teması ve ikonlarını bildirir.

{
  "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> içine bağlayın:

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

Adım 2: Service Worker Kaydı ve Önbellek Stratejisi

Service Worker arka planda çalışır, ağ isteklerini yakalar ve önbelleğe alır. index.html içine kayıt kodunu ekleyin:

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 = 'pwa-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 güvenlik nedeniyle sadece HTTPS veya localhost üzerinde çalışır. SSL sertifikanızı aktifleştirin.

Lighthouse ile PWA Testi

Kurulumu test etmek için:

Chrome DevTools açın (F12).
Lighthouse sekmesine geçin.
Progressive Web App kutusunu işaretleyip analizi başlatın.
Eksik ikon veya HTTPS hatalarını rapordan giderin.

Sonuç ve En İyi Pratikler

Bu rehber adımlarını tamamladığınızda siteniz mobil cihazlarda 'Ana Ekrana Ekle' bildirimini tetikler. Gereksiz büyük dosyaları önbelleğe almayın, sadece kritik CSS/JS ve ana sayfayı Service Worker içine dahil edin.