JavaScript Academy · Ders

Arka Plan Eşitleme ve Güncellemeler

Önbellekleri güncelleyin ve yeniden çevrimiçi olduğunuzda eşitleyin.

Arka Plan Eşitleme ve Güncellemeler, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Önbellekleri Güncel Tutma

Çevrim dışı çalışabilen bir uygulama güncellemeleri sorunsuzca yönetmelidir: yeni varlıkları dağıtmalı, eskileri kaldırmalı ve bağlantı geri geldiğinde başarısız işlemleri yeniden denemelidir. Hizmet çalışanları bu üçü için de araçlar sağlar.

Sürümlendirilmiş Önbellek Adları

En basit güncelleme mekanizması, sürümlendirilmiş bir önbellek adıdır. Sürümü artırmak yeni bir önbellek oluşturur; eski önbellek ise etkinleştirme sırasında temizlenmek üzere bırakılır.

const CACHE = 'app-v2'; // was 'app-v1'
self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open(CACHE).then(c => c.addAll(ASSETS))
  );
});

Eski Önbellekleri Temizleme

activate olayında tüm önbellek adlarını listeleyin ve geçerli sürüme ait olmayanları silin. Bu işlem depolama alanını boşaltır ve güncelliğini yitirmiş varlıkları kaldırır.

self.addEventListener('activate', (e) => {
  e.waitUntil(
    caches.keys().then(names =>
      Promise.all(
        names.filter(n => n !== CACHE)
             .map(n => caches.delete(n))
      )
    )
  );
});

Bekleyen İşçi

Varsayılan olarak yeni bir işçi yüklenir, ancak eski işçinin denetlediği tüm sayfalar kapatılana kadar bekliyor durumunda kalır. Bu, oturumun ortasında oluşabilecek sürüm uyuşmazlıklarını önler.

skipWaiting

self.skipWaiting(), bekleyen işçiye hemen etkinleşmesini ve sekmelerin kapanmasını beklemeden denetimi devralmasını söyler. Güncellemelerin hemen uygulanmasını istediğinizde bunu install içinde çağırın.

self.addEventListener('install', (event) => {
  self.skipWaiting(); // activate as soon as installed
});

clients.claim

Etkinleştirildikten sonra self.clients.claim(), yeni işçinin yalnızca gelecekteki gezinimleri denetlemesi yerine hâlihazırda açık olan sayfaların denetimini hemen devralmasını sağlar.

self.addEventListener('activate', (event) => {
  event.waitUntil(self.clients.claim());
});

Sayfadan Güncellemeleri Algılama

Sayfa, kayda ait updatefound olayı aracılığıyla yeni bir işçiyi dinleyebilir ve ardından en son sürümü almak için kullanıcıdan sayfayı yeniden yüklemesini isteyebilir.

reg.addEventListener('updatefound', () => {
  const sw = reg.installing;
  sw.addEventListener('statechange', () => {
    if (sw.state === 'installed') {
      console.log('new version available - reload to update');
    }
  });
});

Arka Plan Senkronizasyonu

Arka Plan Senkronizasyonu API'si, bir işlemi (örneğin form göndermeyi) cihaz bağlantı kurana kadar ertelemenizi sağlar. Bir senkronizasyon etiketi kaydedersiniz ve tarayıcı çevrim içi olduğunda bir sync olayı tetikler.

// In the page, after queuing data:
reg.sync.register('send-messages')
  .then(() => console.log('sync scheduled'));

Senkronizasyon Olayını Yönetme

Hizmet çalışanında sync olayını dinleyin ve etiketi eşleştirin. Tarayıcının yeniden deneme tamamlanana kadar işçiyi çalışır durumda tutması için waitUntil kullanın.

self.addEventListener('sync', (event) => {
  if (event.tag === 'send-messages') {
    event.waitUntil(sendQueuedMessages());
  }
});

Önce Kuyruğa Alıp Sonra Senkronize Etme Deseni

Sağlam bir çevrim dışı akış şöyledir: bekleyen işlemi IndexedDB'ye kaydedin, bir senkronizasyon kaydedin ve sync işleyicisinde kuyruğu okuyup her öğeyi POST edin; işlem başarılı olduğunda öğeyi kuyruktan kaldırın.

async function sendQueuedMessages() {
  const items = await readQueueFromIndexedDB();
  for (const item of items) {
    await fetch('/api/messages', {
      method: 'POST',
      body: JSON.stringify(item)
    });
  }
  await clearQueue();
}

Güncellemeler ve Senkronizasyon Özeti

Bu özellikler birlikte uygulamaları dayanıklı hâle getirir: sürümlendirilmiş önbellekler ve temizlik varlıkları güncel tutar, skipWaiting/clients.claim dağıtım zamanlamasını denetler ve Arka Plan Senkronizasyonu, kullanıcı yeniden çevrim içi olduğunda işlemleri güvenilir biçimde tamamlar.

Kısa Kontrol

Güncellemeleri ve arka plan senkronizasyonunu ne kadar anladığınızı sınayın.

Özet

Arka plan senkronizasyonunu ve güncellemeleri öğrendiniz:

Sürümlendirilmiş önbellek adları kullanın ve activate sırasında eski önbellekleri temizleyin.
skipWaiting ve clients.claim güncelleme zamanlamasını denetler.
Yeni sürümleri updatefound aracılığıyla algılayın.
Arka Plan Senkronizasyonu, işlemleri sync olayı aracılığıyla çevrim içi olana kadar erteler.
Öğeleri IndexedDB'de kuyruğa alın, ardından senkronizasyonda gönderin.

Hizmet Çalışanları ve Çevrim Dışı Önbelleğe Alma dersini tamamladınız.

Sıkça Sorulan Sorular

“Arka Plan Eşitleme ve Güncellemeler” dersi ücretsiz mi?

Evet — “Arka Plan Eşitleme ve Güncellemeler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Arka Plan Eşitleme ve Güncellemeler” dersinde ne öğreneceğim?

Önbellekleri güncelleyin ve yeniden çevrimiçi olduğunuzda eşitleyin. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Arka Plan Eşitleme ve Güncellemeler” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön