PWA (Progressive Web App) Nedir?

PWA, modern web yeteneklerini native mobil uygulama deneyimiyle birleştiren teknolojidir. App Store veya Google Play Store bağımlılığı olmadan web sitesinin mobil cihazlara yüklenmesini, çevrimdışı (offline) çalışmasını ve bildirim göndermesini sağlar. Dijital ajanslar ve yazılım ekipleri için maliyet düşürücü, performans artırıcı bir çözümdür.

Neden PWA? Modern Web Trendleri ve Avantajlar

Düşük Maliyet: Tek kod tabanı (HTML, CSS, JS) tüm platformlarda çalışır.
Hızlı Yükleme: Cache API ve Service Worker ile anında açılış.
Çevrimdışı Destek: Bağlantı koptuğunda önbellekteki içerik sunulur.
SEO Avantajı: Standart URL yapısı taranabilirliği korur, arama motorlarında tam indekslenir.

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

Adım 1: Web App Manifest Dosyası (manifest.json)

Uygulamanın simgesi, tam ekran modu, tema rengi ve başlangıç URL'sini belirten JSON dosyası oluşturun:

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

Adım 2: Manifest Dosyasını HTML'e Bağlama

HTML <head> içine ekleyin:

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

Adım 3: Service Worker Kaydetme (sw.js)

Arka plan işlemleri ve önbellek yönetimi için Service Worker dosyasını root dizine ekleyin:

const CACHE_NAME = 'v1_cache';
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 4: Ana JS Dosyasında Service Worker'ı Başlatma

Service Worker desteğini kontrol edip kaydedin:

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

Adım 5: HTTPS ve Test

PWA güvenli bağlantı (HTTPS) zorunlu kılar (localhost hariç). Chrome DevTools > Application sekmesinden Manifest ve Service Worker durumunu, Lighthouse panelinden PWA uygunluk puanını test edin.

Modern web trendleri, kullanıcı deneyimini doğrudan native deneyime yaklaştıran hafif çözümlere odaklanıyor. PWA bu dönüşümün merkezindedir.