M

MLOG

Türkçe

Service worker'ları kullanarak dünya çapındaki kullanıcılar için hızlı, güvenilir ve ilgi çekici çevrimdışı öncelikli web uygulamaları oluşturmayı öğrenin.

Service Worker'lar: Çevrimdışı Öncelikli Web Uygulamaları Geliştirme

Günümüz dünyasında kullanıcılar, ağ bağlantısı sınırlı veya mevcut olmadığında bile web uygulamalarının hızlı, güvenilir ve erişilebilir olmasını bekler. "Çevrimdışı öncelikli" tasarım konsepti işte bu noktada devreye girer. Service worker'lar, geliştiricilerin çevrimdışı olarak sorunsuz çalışan web uygulamaları oluşturmasını sağlayan ve üstün bir kullanıcı deneyimi sunan güçlü bir teknolojidir.

Service Worker'lar Nedir?

Service worker, ana tarayıcı iş parçacığından ayrı olarak arka planda çalışan bir JavaScript dosyasıdır. Web uygulaması ile ağ arasında bir proxy görevi görerek ağ isteklerini yakalar ve önbelleğe almayı yönetir. Service worker'lar aşağıdaki gibi görevleri yerine getirebilir:

Önemli bir nokta, service worker'ların web sayfası tarafından değil, tarayıcı tarafından kontrol edilmesidir. Bu, kullanıcı sekmeyi veya tarayıcı penceresini kapattığında bile çalışmalarını sağlar.

Neden Çevrimdışı Öncelikli?

Çevrimdışı öncelikli bir web uygulaması oluşturmak çok sayıda avantaj sunar:

Service Worker'lar Nasıl Çalışır?

Bir service worker'ın yaşam döngüsü birkaç aşamadan oluşur:

  1. Kayıt (Registration): Service worker, kontrol edeceği uygulamanın kapsamı belirtilerek tarayıcıya kaydedilir.
  2. Kurulum (Installation): Service worker kurulur ve bu sırada genellikle statik varlıkları önbelleğe alır.
  3. Aktivasyon (Activation): Service worker etkinleştirilir ve web uygulamasının kontrolünü ele alır. Bu, eski service worker'ların kaydını silmeyi ve eski önbellekleri temizlemeyi içerebilir.
  4. Boşta (Idle): Service worker, ağ isteklerini veya diğer olayları bekleyerek boşta kalır.
  5. Getirme (Fetch): Bir ağ isteği yapıldığında, service worker bunu yakalar ve önbelleğe alınmış içeriği sunabilir veya kaynağı ağdan getirebilir.

Service Worker'lar ile Çevrimdışı Öncelikli Uygulama: Adım Adım Kılavuz

İşte service worker'ları kullanarak çevrimdışı işlevselliği nasıl uygulayacağınıza dair temel bir örnek:

Adım 1: Service Worker'ı Kaydedin

Ana JavaScript dosyanızda (örneğin, `app.js`): 


if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker şu kapsamda kaydedildi:', registration.scope);
    })
    .catch(function(error) {
      console.log('Service Worker kaydı başarısız oldu:', error);
    });
}

Bu kod, tarayıcının service worker'ları destekleyip desteklemediğini kontrol eder ve `service-worker.js` dosyasını kaydeder. Kapsam, service worker'ın hangi URL'leri kontrol edeceğini tanımlar.

Adım 2: Service Worker Dosyasını Oluşturun (service-worker.js)

`service-worker.js` adında bir dosya oluşturun ve aşağıdaki kodu ekleyin:


const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/app.js',
  '/images/logo.png'
];

self.addEventListener('install', function(event) {
  // Kurulum adımlarını gerçekleştir
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Önbellek açıldı');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Önbellekte bulundu - yanıtı döndür
        if (response) {
          return response;
        }

        // ÖNEMLİ: İsteği klonlayın.
        // Bir istek bir akıştır ve yalnızca bir kez tüketilebilir. Bu isteği bir kez önbellek
        // ve bir kez de tarayıcı getirme işlemi için tükettiğimizden, yanıtı klonlamamız gerekir.
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(
          function(response) {
            // Geçerli bir yanıt alıp almadığımızı kontrol et
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // ÖNEMLİ: Yanıtı klonlayın.
            // Bir yanıt bir akıştır ve yalnızca bir kez tüketilmesi gerekir.
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );
});

self.addEventListener('activate', function(event) {

  var cacheWhitelist = [CACHE_NAME];

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Bu kod aşağıdakileri yapar:

Adım 3: Çevrimdışı İşlevselliğinizi Test Edin

Çevrimdışı işlevselliğinizi test etmek için tarayıcınızın geliştirici araçlarını kullanabilirsiniz. Chrome'da Geliştirici Araçları'nı açın, "Application" sekmesine gidin ve "Service Workers"ı seçin. Ardından "Offline" kutusunu işaretleyerek çevrimdışı modu simüle edebilirsiniz.

Gelişmiş Service Worker Teknikleri

Service worker'lar hakkında temel bir anlayışa sahip olduğunuzda, çevrimdışı öncelikli uygulamanızı geliştirmek için daha gelişmiş teknikleri keşfedebilirsiniz:

Önbelleğe Alma Stratejileri

Kaynağın türüne ve uygulamanızın gereksinimlerine bağlı olarak kullanabileceğiniz birkaç önbelleğe alma stratejisi vardır:

Doğru önbelleğe alma stratejisini seçmek, belirli kaynağa ve uygulamanızın gereksinimlerine bağlıdır. Örneğin, resimler ve CSS dosyaları gibi statik varlıklar genellikle "Önce Önbellek" stratejisiyle sunulurken, dinamik içerik "Önce Ağ" veya "Önce Önbellek, Sonra Ağ" stratejisinden faydalanabilir.

Arka Plan Senkronizasyonu

Arka plan senkronizasyonu, kullanıcının stabil bir ağ bağlantısına sahip olana kadar görevleri ertelemenize olanak tanır. Bu, form gönderme veya dosya yükleme gibi görevler için kullanışlıdır. Örneğin, Endonezya'nın uzak bir bölgesindeki bir kullanıcı çevrimdışıyken bir form doldurabilir. Service worker daha sonra verileri göndermeden önce bir bağlantı kurulana kadar bekleyebilir.

Anlık Bildirimler

Service worker'lar, uygulama açık olmasa bile kullanıcılara anlık bildirimler göndermek için kullanılabilir. Bu, kullanıcılarla yeniden etkileşim kurmak ve zamanında güncellemeler sağlamak için kullanılabilir. Bir haber uygulamasının, uygulama aktif olarak çalışmıyor olsa bile kullanıcılara gerçek zamanlı olarak son dakika haber uyarıları sağladığını düşünün.

Workbox

Workbox, service worker oluşturmayı kolaylaştıran bir JavaScript kütüphaneleri koleksiyonudur. Önbelleğe alma, yönlendirme ve arka plan senkronizasyonu gibi yaygın görevler için soyutlamalar sağlar. Workbox kullanmak, service worker kodunuzu basitleştirebilir ve daha sürdürülebilir hale getirebilir. Birçok şirket artık PWA'lar ve çevrimdışı öncelikli deneyimler geliştirirken Workbox'ı standart bir bileşen olarak kullanmaktadır.

Küresel Kitleler İçin Dikkat Edilmesi Gerekenler

Küresel bir kitle için çevrimdışı öncelikli web uygulamaları oluştururken, aşağıdaki faktörleri göz önünde bulundurmak önemlidir:

Çevrimdışı Öncelikli Uygulama Örnekleri

Birçok popüler web uygulaması, service worker'ları kullanarak çevrimdışı işlevselliği başarıyla uygulamıştır:

Sonuç

Service worker'lar, hızlı, güvenilir ve ilgi çekici çevrimdışı öncelikli web uygulamaları oluşturmak için güçlü bir araçtır. Varlıkları önbelleğe alarak, ağ isteklerini yakalayarak ve arka plan görevlerini yöneterek, service worker'lar ağ bağlantısı sınırlı veya mevcut olmadığında bile üstün bir kullanıcı deneyimi sağlayabilir. Dünya genelinde ağ erişimi tutarsız kaldığından, çevrimdışı öncelikli tasarımlara odaklanmak, web üzerindeki bilgi ve hizmetlere eşit erişimi sağlamak için çok önemlidir.

Bu kılavuzda belirtilen adımları izleyerek ve yukarıda belirtilen faktörleri göz önünde bulundurarak, çevrimdışı olarak sorunsuz çalışan ve dünya çapındaki kullanıcılar için keyifli bir deneyim sunan web uygulamaları oluşturabilirsiniz. Service worker'ların gücünü benimseyin ve web'in geleceğini inşa edin – web'in ağ bağlantısı ne olursa olsun herkes için her yerde erişilebilir olduğu bir gelecek.