PWA Nedir ve Neden Gereklidir?

PWA (Progressive Web Apps), web teknolojileri (HTML, CSS, JS) kullanarak native uygulama deneyimi sunan modern web standardıdır. App Store veya Google Play zorunluluğu yoktur. Düşük maliyetlidir, çevrimdışı çalışır ve anında yüklenir. Birçok dijital ajans, yüksek dönüşüm oranları ve düşük geliştirme maliyetleri nedeniyle mobil çözümlerde bu mimariyi önerir.

Adım 1: HTTPS Protokolünü Etkinleştirme

Service Worker yapısı güvenlik nedeniyle yalnızca HTTPS altında çalışır. Yerel geliştirme ortamında localhost istisnadır. Canlı ortamda geçerli bir SSL sertifikası zorunludur.

Adım 2: Web App Manifest Dosyası Hazırlama

Uygulamanın simgesi, tam ekran modu, tema rengi ve başlangıç URL'sini belirten manifest.json dosyasını kök dizine ekleyin:

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

Adım 3: Service Worker Kaydı ve Cache Stratejisi

Service worker, arka planda çalışan komut dosyasıdır. Ağ isteklerini yakalar, önbelleğe alır ve çevrimdışı desteği sağlar.

1. Service Worker Kayıt Kodu (index.html veya app.js):

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

2. Service Worker Dosyası (sw.js):

const CACHE_NAME = 'pwa-v1';
const ASSETS = [
  '/',
  '/index.html',
  '/style.css',
  '/app.js',
  '/icons/icon-192x192.png'
];

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

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

Adım 4: Manifest ve Meta Etiketlerini HTML'e Bağlama

HTML dosyanızın <head> bölümüne gerekli meta etiketlerini ekleyin:

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#0f172a">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" href="/icons/icon-192x192.png">

Adım 5: Lighthouse ile Test ve Doğrulama

Chrome DevTools açın (F12).
Lighthouse sekmesine geçin.
Progressive Web App kategorisini seçip Generate report çalıştırın.
Gereksinim eksikliklerini rapor doğrultusunda kapatın.

Bu rehber adımları uygulandığında web siteniz taranabilir, yüklenebilir ve çevrimdışı çalışabilir bir mobil uygulamaya dönüşür. Güncel trendler, hafif ve hızlı yapılar üzerinden native deneyim sunan bu yöne evrilmektedir.