Progressive Web Apps (PWA): Geleceğin Web Uygulamaları

Progressive Web App (PWA) Nedir?

Progressive Web App (PWA), web teknolojileri kullanılarak geliştirilen ancak kullanıcılara native mobil uygulama benzeri bir deneyim sunan modern web uygulamalarıdır. Google tarafından 2015 yılında popülerleştirilen bu kavram, günümüzde web geliştirmenin en önemli paradigmalarından biri haline gelmiştir.

PWA'lar, güvenilir (reliable), hızlı (fast) ve etkileşimli (engaging) olmak üzere üç temel prensip üzerine inşa edilir. Bu prensipler sayesinde kullanıcılar, bir uygulama mağazasından indirme yapmadan, doğrudan tarayıcı üzerinden native uygulama kalitesinde bir deneyim yaşayabilir.

PWA'nın Temel Özellikleri

• Progresif: Her tarayıcıda çalışır, tarayıcı yeteneklerine göre kademeli olarak zenginleşir.
• Duyarlı (Responsive): Her ekran boyutuna ve cihaza uyum sağlar.
• Bağlantı bağımsız: Service Worker sayesinde çevrimdışı veya düşük kaliteli ağlarda da çalışabilir.
• Uygulama benzeri: Uygulama kabuğu (app shell) modeli ile native uygulama hissi verir.
• Güncel: Service Worker güncelleme mekanizması ile her zaman en güncel sürümü sunar.
• Güvenli: HTTPS üzerinden sunulur, veri bütünlüğü korunur.
• Keşfedilebilir: Arama motorları tarafından web uygulaması olarak tanınır.
• Yüklenebilir: Kullanıcılar ana ekranlarına ekleyebilir.
• Bağlantı paylaşılabilir: URL ile kolayca paylaşılabilir.
• Yeniden etkileşim: Push bildirimler ile kullanıcıyı tekrar çekebilir.

PWA'nın Temel Teknolojileri

Service Worker

Service Worker, PWA'nın en kritik bileşenidir. Tarayıcı ile ağ arasında bir proxy gibi çalışan, arka planda çalışabilen bir JavaScript dosyasıdır. Ana sayfa thread'inden bağımsız olarak çalışır ve DOM'a doğrudan erişimi yoktur.

Service Worker'ın temel görevleri şunlardır:

• Ağ isteklerini yakalama ve önbelleğe alma.
• Çevrimdışı içerik sunma.
• Arka plan senkronizasyonu.
• Push bildirimlerini yönetme.

Service Worker Yaşam Döngüsü

Service Worker, kayıt (register), yükleme (install) ve etkinleştirme (activate) olmak üzere üç aşamalı bir yaşam döngüsüne sahiptir. Kayıt aşamasında tarayıcı, Service Worker dosyasını indirir ve ayrıştırır. Yükleme aşamasında önbelleğe alınacak kaynaklar tanımlanır. Etkinleştirme aşamasında ise eski önbellekler temizlenir ve yeni Service Worker devralır.

// Service Worker kayıt
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('SW kayıt başarılı:', registration.scope);
      })
      .catch(error => {
        console.log('SW kayıt başarısız:', error);
      });
  });
}

// sw.js - Service Worker dosyası
const CACHE_NAME = 'v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/scripts/app.js',
  '/images/logo.png'
];

// Yükleme olayı
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

// Fetch olayı - Önbellek stratejisi
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

Web App Manifest

Web App Manifest, uygulamanın adı, simgesi, başlangıç URL'si ve görünüm ayarları gibi meta verileri içeren bir JSON dosyasıdır. Bu dosya, tarayıcıya uygulamanın ana ekrana nasıl ekleneceğini ve nasıl görüntüleneceğini söyler.

{
  "name": "Ekolsoft PWA Örnek Uygulama",
  "short_name": "Ekolsoft",
  "description": "Ekolsoft Progressive Web App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2196F3",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

HTTPS Zorunluluğu

PWA'lar mutlaka HTTPS üzerinden sunulmalıdır. Service Worker gibi güçlü API'lere yalnızca güvenli bağlantılar üzerinden erişilebilir. Bu zorunluluk, kullanıcı verilerinin korunmasını ve man-in-the-middle saldırılarının önlenmesini sağlar. Geliştirme ortamında localhost üzerinde HTTPS olmadan da çalışılabilir.

Çevrimdışı Çalışma Stratejileri

PWA'ların en güçlü özelliklerinden biri çevrimdışı çalışabilme yeteneğidir. Service Worker, çeşitli önbellekleme stratejileri kullanarak bu yeteneği sağlar.

Cache First (Önbellek Önce)

İstek önce önbellekte aranır. Bulunursa önbellekten, bulunamazsa ağdan sunulur. Statik kaynaklar (CSS, JavaScript, görseller) için idealdir. Bu strateji, ağ bağlantısı olmasa bile sayfanın hızlıca yüklenmesini sağlar.

Network First (Ağ Önce)

İstek önce ağdan karşılanmaya çalışılır. Başarısız olursa önbellekten sunulur. Güncel veri gerektiren dinamik içerikler için uygundur. API yanıtları ve sık güncellenen sayfalar bu strateji ile önbelleklenebilir.

Stale While Revalidate

Önbellekten hemen yanıt verilir, aynı zamanda arka planda ağdan güncel versiyon indirilir ve önbellek güncellenir. Hem hız hem güncellik isteyen senaryolar için idealdir. Bir sonraki ziyarette kullanıcı güncel içeriği görür.

Network Only ve Cache Only

Network Only stratejisinde yanıtlar yalnızca ağdan sunulur ve önbellek kullanılmaz. Analitik istekleri veya gerçek zamanlı veriler için uygundur. Cache Only stratejisinde ise yanıtlar yalnızca önbellekten sunulur. Uygulama kabuğu gibi nadiren değişen kaynaklar için kullanılır.

Push Bildirimleri

Push bildirimleri, kullanıcılarla yeniden etkileşim kurmanın güçlü bir yoludur. Uygulama kapalı olsa bile kullanıcılara bildirim gönderilebilir. Bu özellik, Push API ve Notification API'nin birlikte kullanılmasıyla sağlanır.

Push Bildirim Akışı

1. Kullanıcıdan bildirim izni istenir.
2. Tarayıcı, push servisine abone olur ve bir endpoint URL'si döner.
3. Bu endpoint sunucuya kaydedilir.
4. Sunucu, bildirim göndermek istediğinde bu endpoint'e bir istek gönderir.
5. Push servisi bildirimi tarayıcıya iletir.
6. Service Worker bildirimi yakalar ve kullanıcıya gösterir.

// Bildirim izni isteme
async function requestNotificationPermission() {
  const permission = await Notification.requestPermission();
  if (permission === 'granted') {
    const registration = await navigator.serviceWorker.ready;
    const subscription = await registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array(PUBLIC_VAPID_KEY)
    });
    // Aboneliği sunucuya gönder
    await fetch('/api/push/subscribe', {
      method: 'POST',
      body: JSON.stringify(subscription),
      headers: { 'Content-Type': 'application/json' }
    });
  }
}

// Service Worker'da push olayını dinleme
self.addEventListener('push', event => {
  const data = event.data.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: '/icons/icon-192x192.png',
      badge: '/icons/badge-72x72.png',
      data: { url: data.url }
    })
  );
});

App Shell Modeli

App Shell modeli, uygulamanın arayüz iskeletini (kabuk) önbelleğe alıp anında yüklenmesini sağlayan bir mimari yaklaşımdır. Kabuk; gezinme çubuğu, alt menü ve genel düzen gibi sabit unsurları içerir. Dinamik içerik ise ağdan yüklenir.

Bu yaklaşımın avantajları şunlardır:

• İlk yükleme anında bile hızlı görsel yanıt sağlar.
• Çevrimdışı durumda bile uygulama kabuğu görüntülenir.
• Native uygulama hissiyatı verir.
• İçerik ve kabuk ayrı ayrı önbelleğe alınabilir.

PWA vs Native Uygulama Karşılaştırması

PWA Performans Optimizasyonu

PWA'ların başarısı büyük ölçüde performansa bağlıdır. Kullanıcılar, web uygulamalarından native uygulama hızında bir deneyim bekler.

Lazy Loading

Sayfada görünmeyen kaynakların (görseller, bileşenler, modüller) gerektiğinde yüklenmesini sağlar. Bu teknik, ilk yükleme süresini önemli ölçüde kısaltır. Intersection Observer API ile görsellerin viewport'a girdiğinde yüklenmesi sağlanabilir.

Kod Bölme (Code Splitting)

JavaScript paketinin daha küçük parçalara bölünmesi, ilk yükleme için gereken kod miktarını azaltır. Webpack, Rollup veya Vite gibi araçlar otomatik kod bölme destekler. Rota bazlı bölme ile her sayfanın yalnızca kendi kodunu yüklemesi sağlanabilir.

Görsellerin Optimizasyonu

WebP ve AVIF formatlarının kullanılması, responsive görseller için srcset ve sizes özelliklerinin tanımlanması, görsellerin boyutlarının CSS yerine HTML'de belirtilmesi (CLS'yi önler) ve CDN kullanarak görsellerin kullanıcıya yakın sunuculardan sunulması performansı önemli ölçüde artırır.

Critical CSS ve Inline Styles

İlk görüntüleme (above-the-fold) için gereken CSS'in HTML içinde inline olarak eklenmesi, geri kalan CSS'in asenkron yüklenmesi ilk anlamlı boyama (FCP) süresini kısaltır.

PWA Geliştirme Araçları

Workbox

Google tarafından geliştirilen Workbox, Service Worker oluşturmayı ve önbellekleme stratejilerini yönetmeyi kolaylaştıran bir kütüphane setidir. Hazır önbellekleme stratejileri, ön önbellekleme (precaching), arka plan senkronizasyonu ve rota eşleştirme gibi özellikler sunar. Webpack, Rollup ve CLI entegrasyonları mevcuttur.

// workbox ile önbellekleme stratejisi
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';

// Statik kaynaklar - Cache First
registerRoute(
  ({request}) => request.destination === 'style' ||
                  request.destination === 'script' ||
                  request.destination === 'image',
  new CacheFirst({
    cacheName: 'static-resources',
    plugins: [
      new ExpirationPlugin({ maxEntries: 60, maxAgeSeconds: 30 * 24 * 60 * 60 })
    ]
  })
);

// API istekleri - Network First
registerRoute(
  ({url}) => url.pathname.startsWith('/api/'),
  new NetworkFirst({
    cacheName: 'api-cache',
    plugins: [
      new ExpirationPlugin({ maxEntries: 50, maxAgeSeconds: 5 * 60 })
    ]
  })
);

Lighthouse

Google'ın geliştirdiği Lighthouse, PWA'ların kalitesini ölçmek için kullanılan bir denetleme aracıdır. Performans, erişilebilirlik, en iyi uygulamalar, SEO ve PWA uyumluluğu gibi kategorilerde detaylı raporlar sunar. Chrome DevTools içinde, komut satırından veya CI/CD pipeline'larında çalıştırılabilir.

Chrome DevTools

Chrome DevTools, PWA geliştirme sürecinde vazgeçilmez bir araçtır. Application panelinde Service Worker durumu, manifest bilgileri, önbellek içeriği ve push bildirim abonelikleri incelenebilir. Network panelinde çevrimdışı simülasyon yapılabilir ve önbellek davranışları test edilebilir.

PWA Kurulum Deneyimi

PWA'ların en çekici özelliklerinden biri, kullanıcıların uygulamayı ana ekranlarına ekleyebilmesidir. Modern tarayıcılar, belirli kriterleri karşılayan PWA'lar için otomatik olarak bir kurulum istemi gösterir.

Kurulum Kriterleri

• Geçerli bir Web App Manifest dosyası bulunmalıdır.
• Uygulama HTTPS üzerinden sunulmalıdır.
• Etkin bir Service Worker kayıtlı olmalıdır.
• Kullanıcı siteyle yeterli düzeyde etkileşimde bulunmuş olmalıdır.

Özel Kurulum İstemi

Tarayıcının varsayılan kurulum istemini yakalayarak özelleştirilmiş bir kurulum deneyimi sunulabilir. beforeinstallprompt olayı dinlenerek, kurulum butonunun ne zaman ve nasıl gösterileceği kontrol edilebilir. Bu sayede kullanıcıya daha anlamlı bir zamanda, bağlama uygun bir kurulum teklifi sunulabilir.

Gerçek Dünya PWA Örnekleri

Twitter Lite

Twitter'ın PWA versiyonu, veri kullanımını yüzde 70 azaltırken sayfa yükleme süresini de önemli ölçüde kısaltmıştır. Oturum başına sayfa sayısı yüzde 65, gönderilen tweet sayısı yüzde 75 artmıştır.

Starbucks

Starbucks'ın PWA'sı, native iOS uygulamasının neredeyse tüm işlevlerini sunmaktadır. Boyutu native uygulamanın yüzde 99.84'ü kadar küçüktür. Çevrimdışı sipariş özelleştirme yeteneği sayesinde, kullanıcılar internet bağlantısı olmasa bile menüyü inceleyip siparişlerini hazırlayabilmektedir.

Pinterest

Pinterest, PWA'ya geçtikten sonra kullanıcı etkileşiminde ciddi artışlar gözlemlemiştir. Reklam geliri yüzde 44, çekirdek etkileşimler yüzde 60 ve kullanıcı tarafından oluşturulan pin sayısı yüzde 40 artmıştır.

PWA'nın Geleceği

PWA teknolojisi sürekli gelişmektedir. Web Bluetooth, Web USB, File System Access API, Web Share API ve WebGPU gibi yeni tarayıcı API'leri, PWA'ların yeteneklerini genişletmeye devam etmektedir. Project Fugu kapsamında geliştirilen bu API'ler, web platformu ile native platform arasındaki uçurumu kapatmayı hedeflemektedir.

Apple'ın da iOS ve macOS'te PWA desteğini giderek artırması, PWA'ların benimsenmesi açısından önemli bir gelişmedir. Push bildirimlerinin iOS 16.4 ile desteklenmeye başlaması, PWA'ların tüm platformlarda tam özellikli çalışmasına yaklaşıldığını göstermektedir.

Sonuç

Progressive Web Apps, web'in geleceğini şekillendiren önemli bir teknolojidir. Tek bir kod tabanı ile tüm platformlarda native uygulama kalitesinde deneyim sunma vaadi, hem geliştiriciler hem de işletmeler için büyük avantajlar sağlamaktadır. Service Worker, Web App Manifest ve HTTPS gibi temel teknolojileri doğru kullanarak, kullanıcılarınıza hızlı, güvenilir ve etkileşimli bir deneyim sunabilirsiniz.

"PWA, web'in erişilebilirliğini native uygulamaların zenginliğiyle birleştiren bir köprüdür. Gelecekte uygulama mağazaları yerine web'in kendisi ana dağıtım kanalı olabilir."

PWA geliştirmeye başlamak için mevcut web uygulamanıza bir Service Worker ve manifest dosyası ekleyerek küçük adımlarla ilerleyebilirsiniz. Workbox ve Lighthouse gibi araçlar bu süreçte en büyük yardımcılarınız olacaktır.