JavaScript Academy · Ders

Cache API'si

Yanıtları önbellekten saklayın ve sunun.

Cache API'si, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 2. 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.

Önbellek API'si Nedir?

Önbellek API'si, istek-yanıt çiftlerini adlandırılmış önbelleklerde depolar. Hizmet çalışanları bunu kaynakları ağa erişmeden sunmak için kullanır; bu, çevrimdışı desteğin temelidir.

Önbellekler Nesnesi

Genel caches nesnesi (bir CacheStorage), adlandırılmış tüm önbelleklerinizi yönetir. Hem sayfalarda hem de hizmet çalışanlarında kullanılabilir.

// Available globally:
// caches.open(name)
// caches.match(request)
// caches.delete(name)
// caches.keys()

Önbellek Açma

caches.open(name), belirtilen ada sahip bir önbellek için vaat döndürür; önbellek yoksa onu oluşturur. Adlar, önbelleklerin sürümlerini yönetmenizi sağlar.

caches.open('static-v1').then(cache => {
  console.log('cache ready');
});

addAll ile Önceden Önbelleğe Alma

install sırasında cache.addAll(urls), tek bir çağrıyla bir kaynak listesini alır ve depolar. Herhangi bir alma işlemi başarısız olursa tüm işlem reddedilir.

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('static-v1').then(cache =>
      cache.addAll(['/', '/styles.css', '/app.js'])
    )
  );
});

waitUntil

event.waitUntil(promise), tarayıcıya vaat sonuçlanana kadar çalışanı etkin tutmasını söyler. Kurulumun çok erken tamamlanmaması için önbellek kurulumunuzu bunun içine sarın.

self.addEventListener('install', (event) => {
  event.waitUntil(setupCache());
});

Tek Bir Girdi Ekleme

cache.put(request, response) tek bir yanıtı depolarken cache.add(url) bir URL'yi alır ve depolar. Kaydetmek üzere zaten bir yanıtınız olduğunda put kullanın.

const cache = await caches.open('static-v1');
const response = await fetch('/logo.png');
await cache.put('/logo.png', response);

Önbellekten Eşleştirme

cache.match(request), depolanmış bir yanıtı arar. Eşleşme varsa yanıtla, yoksa undefined ile sonuçlanır.

const cache = await caches.open('static-v1');
const hit = await cache.match('/styles.css');
if (hit) console.log('served from cache');

caches.match Kısayolu

caches.match(request), tüm önbelleklerde aynı anda arama yapar. Kaynağın hangi önbellekte bulunduğuyla ilgilenmediğiniz bir fetch işleyicisinde kullanışlıdır.

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(hit =>
      hit || fetch(event.request)
    )
  );
});

respondWith

Bir fetch olayının içinde event.respondWith(promise), tarayıcının kullanacağı yanıtı sağlar. Bunu önbelleğe alınmış veya yeni alınmış bir Response ile sonuçlandırın.

self.addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request));
});

Yanıtları Kopyalama

Bir yanıt gövdesi yalnızca bir kez okunabilir. Hem bir yanıt döndürmek hem de onu depolamak için önce kopyasını oluşturun.

const response = await fetch(request);
cache.put(request, response.clone()); // store a copy
return response; // return the original

Önbellek Girdilerini Silme

cache.delete(request) tek bir girdiyi kaldırır; caches.delete(name) adlandırılmış bir önbelleğin tamamını siler. Eski kaynakları kaldırmak için bunları kullanın.

await cache.delete('/old-asset.js');
await caches.delete('static-v0'); // remove old cache version

Hızlı Kontrol

Önbellek API'si hakkındaki anlayışınızı sınayın.

Tekrar

Önbellek API'sini öğrendiniz:

caches.open(name), adlandırılmış bir önbelleği alır veya oluşturur.
addAll kaynakları önceden önbelleğe alır; put/add girdileri depolar.
match kaynakları alır; caches.match tüm önbelleklerde arama yapar.
respondWith, fetch olayındaki yanıtı sağlar.
Yanıtları önbelleğe almadan ve döndürmeden önce kopyalayın.

Sırada önbelleğe alma stratejileri var.

Sıkça Sorulan Sorular

“Cache API'si” dersi ücretsiz mi?

Evet — “Cache API'si” 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.

“Cache API'si” dersinde ne öğreneceğim?

Yanıtları önbellekten saklayın ve sunun. 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 2. dersidir.

“Cache API'si” 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