PricingLoginStart free
Vue Academy · Ders

Service Worker Stratejileri

Önce önbellek, önce ağ, bayatlığı doğrularken sunma — kaynak türüne göre seçim yapma.

2. ders / 413 adım

Service Worker Stratejileri, CoddyKit'te ücretsiz bir Vue 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, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Önbelleğe Alma Stratejilerine Genel Bakış

Bir service worker, ağ isteklerini yakalar ve bunların önbellekten mi, ağdan mı yoksa her ikisinden mi sunulacağına karar verir. Workbox, her biri farklı bir kaynak türüne uygun olan dört temel strateji adlandırır.

CacheFirst

CacheFirst, önbellekten sunar ve yalnızca önbellekte bulunamadığında ağa başvurur. Yazı tipleri ve görseller gibi nadiren değişen ve içerik karması içeren varlıklar için en uygunudur.

// serve cached, fall back to network on miss

NetworkFirst

NetworkFirst, önce ağı dener; çevrimdışıyken veya zaman aşımında önbelleğe geri döner. Güncelliğin önemli olduğu ancak çevrimdışı erişimin de istendiği API yanıtları için en uygunudur.

// try network, fall back to cache when offline

StaleWhileRevalidate

StaleWhileRevalidate, hız için önbelleğe alınmış kopyayı hemen döndürürken önbelleği güncellemek üzere arka planda yeni bir kopya alır. JS paketleri ve CSS için çok uygundur.

// return cache now, update cache in background

NetworkOnly ve CacheOnly

İki uç seçenek şunlardır: NetworkOnly her zaman veri alır ve önbelleğe alma yapmaz; CacheOnly ise yalnızca önbelleğe önceden alınmış içeriği sunar. Bunları önbelleğe alınamayan POST istekleri veya kesinlikle önbelleğe önceden alınmış varlıklar için kullanın.

runtimeCaching Dizisi

Workbox yapılandırmasında runtimeCaching bir kural dizisidir. Her kural, istek URL'leriyle eşleşir ve bir stratejiyle önbellek adı atar.

VitePWA({
  workbox: {
    runtimeCaching: [ /* rules */ ]
  }
});

urlPattern Kuralı

Her kuralda bir urlPattern (düzenli ifade veya işlev), bir handler (strateji adı) ve önbellek adı gibi options bulunur.

{
  urlPattern: /\/api\//,
  handler: "NetworkFirst",
  options: { cacheName: "api-cache" }
}

Statik Varlıkları CacheFirst ile Önbelleğe Alma

Görselleri ve yazı tiplerini eşleştirip CacheFirst ile sunun; çünkü içeriği karma oluşturulmuş URL'leri dosya değiştiğinde değişir.

{
  urlPattern: /\.(?:png|jpg|svg|woff2)$/,
  handler: "CacheFirst",
  options: { cacheName: "static-assets" }
}

JS Paketlerini StaleWhileRevalidate ile Önbelleğe Alma

Betik ve stil paketlerini arka planda yenilerken önbellekten anında sunun.

{
  urlPattern: /\.(?:js|css)$/,
  handler: "StaleWhileRevalidate",
  options: { cacheName: "assets" }
}

Süre Sonu Eklentisi

Önbellekler sınırlandırılmadığında sınırsız büyür. expiration seçeneği, girdi sayısını ve bunların en uzun yaşını sınırlar; en eskileri önce kaldırır.

options: {
  cacheName: "api-cache",
  expiration: {
    maxEntries: 50,
    maxAgeSeconds: 60 * 60 * 24
  }
}

Opak Yanıtları Önbelleğe Alma

Başka kaynaklardan gelen API yanıtları için genellikle izin verilen durumlarla birlikte cacheableResponse eklersiniz; böylece yalnızca başarılı yanıtlar saklanır.

options: {
  cacheableResponse: { statuses: [0, 200] }
}

Kısa Kontrol

Güncel olması gereken ancak çevrimdışı kullanılabilen API yanıtları için hangi strateji en uygundur?

İnteraktif derste cevapla

Özet

Workbox stratejileri kaynak türleriyle eşleşir: statik varlıklar için CacheFirst, API yanıtları için NetworkFirst ve JS/CSS paketleri için StaleWhileRevalidate. Bunları runtimeCaching dizisinde bir urlPattern, handler ve önbellek boyutunu sınırlayan expiration eklentisi gibi options ile tanımlayın.

Başlamak ücretsiz

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
42
Dersler
156
Ücretsiz öğrenmeye başlaTüm kursu görüntüle

Sıkça Sorulan Sorular

“Service Worker Stratejileri” dersi ücretsiz mi?

Evet — “Service Worker Stratejileri” 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 Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Service Worker Stratejileri” dersinde ne öğreneceğim?

Önce önbellek, önce ağ, bayatlığı doğrularken sunma — kaynak türüne göre seçim yapma. Vue 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.

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

Önceden deneyim gerekmez. CoddyKit'te Vue 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.

“Service Worker Stratejileri” 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 Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue 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

  1. vite-plugin-pwa Kurulumu
  2. Service Worker Stratejileri
  3. Çevrimdışı Destek ve Arka Plan Senkronizasyonu
  4. Vue PWA'de Push Bildirimleri
← Vue Academy Sayfasına Dön