Çevrimdışı Önbelleğe Alma Stratejileri: CacheFirst ve NetworkFirst
Cache API ve Workbox kitaplığını kullanarak statik varlıklar için Cache-First, API yanıtları için Network-First uygulamayı öğrenin.
Çevrimdışı Önbelleğe Alma Stratejileri: CacheFirst ve NetworkFirst, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Önbellekleme Stratejileri Neden Önemlidir?
Hizmet çalışanları her fetch işlemini yakalayabilir — ancak bir stratejiye ihtiyacınız vardır. Farklı içerikler farklı kurallar gerektirir: bir logo sonsuza kadar önbelleğe alınabilir, bir API yanıtı her zaman güncel olmalıdır, haber makaleleri ise bayat içeriği sunup arka planda yenilemeden yararlanır.
Önbellek API'si
Hizmet çalışanları, Request → Response çiftlerinden oluşan ve her kaynak için ayrı kapsamlanan bir anahtar-değer deposu olan Önbellek API'sini kullanır. Oturumlar arasında kalıcıdır.
// open a cache:
const cache = await caches.open('v1');
// add resources:
await cache.add('/styles.css');
await cache.addAll(['/', '/app.js', '/styles.css']);
// look up:
const response = await cache.match('/styles.css');
// delete:
await cache.delete('/styles.css');Önce Önbellek
Önce önbelleği denetleyin. Bulursanız onu döndürün. Bulamazsanız ağa başvurun ve yanıtı önbelleğe alın. En uygun kullanım: statik varlıklar, yazı tipleri, logolar ve uygulama kabuğu.
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(cached => {
if (cached) return cached;
return fetch(event.request).then(res => {
const clone = res.clone();
caches.open('v1').then(c => c.put(event.request, clone));
return res;
});
})
);
});Önce Ağ
Önce ağa başvurmayı deneyin. Başarısız olursa (çevrimdışıysa) önbelleğe yedek seçenek olarak başvurun. En uygun kullanım: API çağrıları ve güncelliğin hızdan daha önemli olduğu dinamik içerikler.
self.addEventListener('fetch', (event) => {
event.respondWith(
fetch(event.request).then(res => {
const clone = res.clone();
caches.open('api-v1').then(c => c.put(event.request, clone));
return res;
}).catch(() => caches.match(event.request))
);
});Bayatken Yenile
Önbelleği hemen döndürün (hızlıdır), ardından arka planda veriyi alın ve bir sonraki kullanım için önbelleği güncelleyin. En uygun kullanım: avatarlar, haber makaleleri ve kısmen güncel veriler.
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(cached => {
const network = fetch(event.request).then(res => {
caches.open('v1').then(c => c.put(event.request, res.clone()));
return res;
});
return cached || network;
})
);
});Yalnızca Ağ
Önbelleği tamamen atlayın — her zaman ağa gidin. Önbelleğe alınamayan istekler (kimlik doğrulama uç noktaları, analiz ve veri değişiklikleri) için kullanın.
self.addEventListener('fetch', (event) => {
if (event.request.url.includes('/api/auth')) {
event.respondWith(fetch(event.request));
return;
}
// ... other strategies
});Yalnızca Önbellek
Ağa hiçbir zaman gitmeyin — önbelleği döndürün veya başarısız olun. Önceden önbelleğe aldığınız ve oturum sırasında yenilemek istemediğiniz dosyalar için kullanışlıdır.
Workbox Stratejileri
Workbox, tüm stratejileri adlandırılmış sınıflar olarak paketler. Daha az tekrarlı hazırlık kodu gerektirir.
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';
registerRoute(({ request }) => request.destination === 'image',
new CacheFirst({ cacheName: 'images' })
);
registerRoute(({ url }) => url.pathname.startsWith('/api/'),
new NetworkFirst({ cacheName: 'api', networkTimeoutSeconds: 3 })
);
registerRoute(({ request }) => request.destination === 'document',
new StaleWhileRevalidate({ cacheName: 'pages' })
);Önbellek Süresinin Dolması
Sınır belirlemezseniz önbellekler sonsuza kadar büyür. Workbox, ExpirationPlugin'i sağlar.
import { ExpirationPlugin } from 'workbox-expiration';
new CacheFirst({
cacheName: 'images',
plugins: [new ExpirationPlugin({
maxEntries: 50,
maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days
})]
});Önbelleğe Alınabilir Yanıt
Varsayılan olarak tarayıcılar yalnızca 200 yanıtlarını önbelleğe alır. Önbelleği hatalarla doldurmamak için 4xx, 5xx ve opak (çapraz kaynaklı no-cors) yanıtları atlayın.
Çevrimdışı Yedek Sayfa
Bir gezinme başarısız olduğunda kullanıcı dostu bir çevrimdışı sayfa gösterin — bu, tarayıcının varsayılan hatasından daha iyi bir kullanıcı deneyimi sunar.
self.addEventListener('install', (e) => {
e.waitUntil(caches.open('offline').then(c => c.add('/offline.html')));
});
self.addEventListener('fetch', (e) => {
if (e.request.mode === 'navigate') {
e.respondWith(
fetch(e.request).catch(() => caches.match('/offline.html'))
);
}
});Doğru Stratejiyi Seçme
Statik varlıklar (logo, yazı tipi, CSS): Önce Önbellek. API verileri (kullanıcı profili, akış): Önce Ağ. Zaman zaman güncellenen içerikler (avatarlar, haberler): Bayatken Yenile. Kimlik doğrulama: Yalnızca Ağ. Önceden yüklenmiş statik dosyalar: Yalnızca Önbellek.
Hızlı Kontrol
Nadiren değişen ancak hızlı yüklenmesi gereken bir CSS dosyası için hangi önbellekleme stratejisi en uygundur?
Özet: Önbellekleme Stratejileri
Önce Önbellek: statik varlıklar (en hızlısı, güncelliğini yitirebilir). Önce Ağ: API verileri (en günceli, daha yavaştır). Bayatken Yenile: önbelleği sunar ve arka planda veri alır. Yalnızca Ağ: kimlik doğrulama ve veri değişiklikleri. Yalnızca Önbellek: önceden yüklenmiş kabuk. Daha az tekrarlı hazırlık kodu için Workbox kullanın. Süre sınırları belirleyin. Çevrimdışı bir yedek sayfa ekleyin. Her kaynak türüne göre seçim yapın.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 41
- Dersler
- 163
Sıkça Sorulan Sorular
“Çevrimdışı Önbelleğe Alma Stratejileri: CacheFirst ve NetworkFirst” dersi ücretsiz mi?
Evet — “Çevrimdışı Önbelleğe Alma Stratejileri: CacheFirst ve NetworkFirst” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Çevrimdışı Önbelleğe Alma Stratejileri: CacheFirst ve NetworkFirst” dersinde ne öğreneceğim?
Cache API ve Workbox kitaplığını kullanarak statik varlıklar için Cache-First, API yanıtları için Network-First uygulamayı öğrenin. Frontend 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.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend 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 3. dersidir.
“Çevrimdışı Önbelleğe Alma Stratejileri: CacheFirst ve NetworkFirst” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend 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
- Web Uygulaması Bildirimi
- Service Worker Kaydı ve Yaşam Döngüsü
- Çevrimdışı Önbelleğe Alma Stratejileri: CacheFirst ve NetworkFirst
- Anlık Bildirimler