Çevrimdışı Çalışan Web Uygulamaları: PWAnızı Jedi Gibi Yönetin

İnternet bağlantısı olmadığında uygulamanızın çalışmaması, kullanıcı deneyimini bir anda felç eden bir durum. Ben de benzer bir sorunla karşılaştım: kullanıcılarım, uygulamamın arayüzünü sevdiklerini söylüyor ancak metroda internet olmadığında tamamen işlevsiz kaldığını bildirdiler. Tıpkı bir Jedi'nın ışın kılıcını sadece güç kaynağına yakınken kullanabilmesi gibi, uygulama da ancak sürekli internet bağlantısı varken çalışıyordu. Bu durumda çevrimdışı-first (offline-first) Progressive Web App (PWA) fikri doğdu: uygulamanızı, sürekli internet bağlantısına ihtiyaç duymayan, yerel uygulamalar gibi çalışır hale getirmek.

Neden Çevrimdışı İlk Yaklaşım?

Bağlantı sorunları, kullanıcı deneyimini doğrudan etkileyen kritik bir faktör. Uygulamanızın performansı, sadece internet hızına değil, aynı zamanda bağlantının sürekli olup olmadığına da bağlıysa, kullanıcılarınızın güvenini hızla kaybedersiniz. İşte bu noktada Service Worker devreye giriyor. Service Worker, arka planda çalışan ve ağ isteklerini yöneten bir JavaScript dosyasıdır. Tıpkı bir droidin erzakları önceden depolayıp gerektiğinde dağıtması gibi, Service Worker da statik dosyaları önbelleğe alarak uygulamanızın çevrimdışı çalışmasını sağlar.

İki temel stratejiyle çalışır:

• Cache-First (Önbellek Öncelikli): Uygulamanızın arayüzü, stilleri ve komut dosyaları gibi statik içerikleri önbellekte saklar. Bu sayede uygulama, ilk yüklemeden sonra neredeyse anında açılır.
• Network-First (Ağ Öncelikli): API isteklerindeyse, öncelikle ağdan yeni veriyi almaya çalışır. Eğer ağda sorun varsa, önbelleğe alınmış eski veriyi gösterir. Bu şekilde kullanıcılar, en güncel veriye ulaşamasalar bile, uygulamanın çalışmaya devam etmesini sağlar.

Uygulamaya Service Worker Eklemek

Service Worker kullanmaya başlamak oldukça basit. Öncelikle, uygulamanızın statik dosyalarını önbelleğe alacak bir sw.js dosyası oluşturun. Bu dosya, uygulamanızın temel bileşenlerini (HTML, CSS, JS, ikonlar vb.) saklayacak ve gerektiğinde bunları sunacaktır.

// sw.js
const CACHE_ADI = 'gorev-yonetici-pwa-v1';
const OZELLESTIRILMIS_DOSYALAR = [
  '/',
  '/index.html',
  '/stiller.css',
  '/uygulama.js',
  '/ikon-192.png',
  '/ikon-512.png'
];

// Kurulum aşaması: Statik dosyaları önbelleğe al
self.addEventListener('install', (olay) => {
  olay.waitUntil(
    caches.open(CACHE_ADI)
      .then( (cache) => cache.addAll(OZELLESTIRILMIS_DOSYALAR) )
      .then(() => self.skipWaiting())
  );
});

// Etkinleştirme aşaması: Eski önbellekleri temizle
self.addEventListener('activate', (olay) => {
  olay.waitUntil(
    caches.keys()
      .then( (anahtarlar) => Promise.all(
        anahtarlar
          .filter(anahtar => anahtar !== CACHE_ADI)
          .map(anahtar => caches.delete(anahtar))
      ))
      .then(() => self.clients.claim())
  );
});

// Ağ isteklerini yönet
self.addEventListener('fetch', (olay) => {
  const { request } = olay;
  const url = new URL(request.url);

  // API istekleri: Öncelikle ağdan, sonra önbellekten
  if (url.pathname.startsWith('/api/')) {
    olay.respondWith(
      fetch(request)
        .then((yanit) => {
          // Yanıtı klonla ve önbelleğe ekle
          const klonYanit = yanit.clone();
          caches.open(CACHE_ADI).then(cache => cache.put(request, klonYanit));
          return yanit;
        })
        .catch(() => caches.match(request)) // Eğer ağdan alınamazsa, önbellekten getir
    );
    return;
  }

  // Diğer tüm istekler: Öncelikle önbellekten, sonra ağdan
  olay.respondWith(
    caches.match(request)
      .then(yanit => yanit || fetch(request))
  );
});

Ardından, ana JavaScript dosyanızda Service Worker'ı kaydedin:

// public/js/uygulama.js
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('Service Worker kaydedildi', reg))
    .catch(err => console.error('Service Worker kaydedilemedi', err));
}

// Görevleri yükle (Service Worker, istekleri yönetecek)
async function gorevleriYukle() {
  try {
    const yanit = await fetch('/api/gorevler');
    const veriler = await yanit.json();
    gorevleriGoster(veriler);
  } catch (hata) {
    console.error('Ağ hatası', hata);
  }
}

gorevleriYukle();

Sık Yapılan Hatalar ve Çözümleri

Service Worker kullanırken dikkat edilmesi gereken bazı yaygın tuzaklar bulunuyor:

• `skipWaiting()` Çağrısını Unutmak: Yeni Service Worker'ın eski olanın yerini alabilmesi için bu fonksiyonun çağrılması gerekir. Aksi halde, kullanıcılar tüm sekmeleri kapatana kadar eski versiyonu kullanmaya devam ederler.

• API Yanıtlarını Dikkatsizce Önbelleğe Almak: POST veya PUT gibi durum değiştiren istekleri önbelleğe almak, eski verilerin kullanıcıya gösterilmesine neden olabilir. Sadece GET isteklerini önbelleğe almaya özen gösterin veya "stale-while-revalidate" modelini kullanın.

• `CACHE_ADI` Değişkenini Güncellememek: Statik dosyalardan herhangi birini değiştirdiğinizde, CACHE_ADI değerini de güncelleyin. Aksi takdirde, Service Worker yeni dosyaları algılamaz ve önbelleği güncellemez.

Gerçek Dünya Uygulaması: Kullanıcı Deneyimi Nasıl Değişiyor?

Service Worker entegrasyonundan sonra uygulamanızın performansı önemli ölçüde artar:

• Hızlı Yükleme: İlk yüklemeden sonra uygulama, statik dosyalar önbellekte olduğu için anında açılır.
• Çevrimdışı Desteği: Kullanıcılar, internet bağlantısı olmadan görev ekleyebilir. Uygulama, bağlantı geri geldiğinde veriyi otomatik olarak senkronize eder.
• Bağlantı Sorunlarına Karşı Dayanıklılık: Zayıf 3G bağlantısında bile uygulama, statik dosyaları önbellekten yüklediği için performansı yüksek kalır.

Artık uygulamanız, sürekli internet bağlantısına ihtiyaç duymayan, kullanıcı dostu bir deneyim sunuyor.

Sizin Sıranız: Kendi Uygulamanızı Geliştirin

Küçük bir projeyle başlayarak Service Worker'ın gücünü keşfedin. Örneğin:

• Bir hava durumu widget'ı
• Basit bir not alma uygulaması
• Kişisel görev listenizi optimize etmek

Chrome Geliştirici Araçları'nda Application > Service Workers bölümüne giderek önbelleğin nasıl dolduğunu gözlemleyin. Ardından, uygulamayı çevrimdışı modda test edin. Uygulamanızın, bağlantı olmadan da çalıştığını gördüğünüzde, gelişmiş kullanıcı deneyiminin kapılarını araladığınızı fark edeceksiniz.

Unutmayın: Service Worker, uygulamanızı sadece daha hızlı değil, aynı zamanda daha güvenilir hale getiren güçlü bir araçtır. Tıpkı bir Jedi'nın ışın kılıcı gibi, uygulamanız da her koşulda kullanıcılarınıza hizmet etmeye devam edecek.