PWA (Progressive Web App) Nedir?

PWA, modern web teknolojilerini kullanarak kullanıcılara yerel mobil uygulama deneyimi sunan web uygulamalarıdır. Uygulama mağazası zorunluluğunu kaldırır. Düşük internet hızlarında ve çevrimdışı çalışır. Push bildirimi gönderir.

Neden PWA? Modern Web Trendleri ve Dijital Ajans Yaklaşımı

Modern web geliştirme süreçlerinde dijital ajanslar, tek bir kod tabanıyla hem web hem mobil deneyim sunduğu için PWA mimarisini tercih eder. Mağaza komisyonları, uzun onay süreçleri ve yüksek native geliştirme maliyetleri ortadan kalkar.

PWA Temel Bileşenleri

HTTPS: Güvenli bağlantı zorunludur. Service Worker yalnızca HTTPS üzerinde çalışır.
Web App Manifest: Uygulamanın simgesi, adı, tema rengi ve ekran modunu tanımlayan JSON dosyasıdır.
Service Worker: Arka planda çalışan, ağ isteklerini yakalayan ve önbellekleme (caching) yapan JavaScript dosyasıdır.

Adım Adım Web Sitesini PWA'ya Dönüştürme

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

Kök dizine manifest.json dosyası ekleyin:

{
  "name": "Sitem",
  "short_name": "Sitem",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

HTML içine bağlayın:

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

Adım 2: Service Worker Dosyası Hazırlama

Kök dizinde sw.js oluşturun. Statik varlıkları önbelleğe alı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))
  );
});

Adım 3: Service Worker'ı Kaydetme

Ana JavaScript dosyanızda (app.js) Service Worker kaydını başlatın:

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 Uyumluluk Testi

Chrome DevTools > Lighthouse sekmesini açın. PWA kategorisini seçip analiz çalıştırın. Eksik ikonları, maskable icon ayarlarını ve HTTPS yönlendirmelerini düzeltin.

Pratik Optimizasyon İpuçları

Cache Stratejisi: Değişmeyen statik dosyalar için Cache-First, API verileri için Network-First stratejisi kullanın.
Offline Fallback: Ağ bağlantısı olmadığında gösterilecek özel bir offline.html sayfası tanımlayın.
Maskable Icons: Android uyumluluğu için ikonlara "purpose": "any maskable" parametresi ekleyin.

PWA dönüşümü, kullanıcı etkileşimini ve sayfa hızını artırarak SEO metriklerini doğrudan yukarı taşır.