Sobes.tech
Middle

HTML5'te uygulama önbelleği nedir?

sobes.tech yapay zeka

AI'dan gelen yanıt

HTML5'te Uygulama Önbelleği (Application Cache), web uygulamasının çevrimdışı çalışmasına olanak tanıyan, tarayıcının yerel olarak önbelleğe aldığı kaynaklar (HTML sayfaları, CSS, JavaScript, resimler) kümesini sağlayan bir mekanizmadır.

Uygulama önbelleğini kullanmak için .appcache uzantılı bir manifest dosyasına ihtiyaç vardır ve bu dosya <html> etiketinde manifest özniteliği aracılığıyla HTML sayfasına bağlanır:

<html manifest="manifest.appcache">
...
</html>

Manifest dosyasının yapısı şu şekildedir:

CACHE MANIFEST
# Manifest sürümü (isteğe bağlı, önbelleği güncellemek için)
# v1.0

CACHE:
# Açıkça önbelleğe alınan kaynaklar
/css/style.css
/js/script.js
/images/logo.png

FALLBACK:
# Bağlantı yokluğunda yedek kaynaklar
/offline.html /

NETWORK:
# Her zaman ağdan istenmesi gereken kaynaklar
*

Manifest dosyasının ana bölümleri şunlardır:

  • CACHE:: Bu bölümde listelenen kaynaklar, ilk sayfa yüklemesinden sonra önbelleğe alınır.
  • FALLBACK:: Yedek kaynakleri tanımlar. Ana kaynak için ağ isteği başarısız olursa, tarayıcı belirtilen yedek kaynağı yükler. Format: ana_kaynak yedek_kaynak.
  • NETWORK:: Bu bölümde listelenen kaynaklar asla önbelleğe alınmaz ve her zaman ağdan alınır. * sembolü, diğer bölümlerde listelenmeyen tüm kaynakların her zaman ağdan alınacağı anlamına gelir.

Uygulama önbelleğinin güncellenmesi, manifest dosyası değiştiğinde gerçekleşir. Tarayıcı güncellenmiş manifesti indirir, mevcut ile karşılaştırır ve yeni veya değiştirilmiş kaynakları yükler. Yeni dosyalar, sayfa yeniden yüklenmeden erişilebilir değildir.

Uygulama önbelleği ile ilgili olaylar şunlardır:

  • checking: Tarayıcı, yeni bir manifest sürümünün olup olmadığını kontrol eder.
  • downloading: Tarayıcı, yeni manifest sürümünde belirtilen kaynakları indirir.
  • progress: Kaynakların indirilme ilerlemesi.
  • updateready: Yeni önbellek sürümü kullanılmaya hazırdır. Sayfayı yeniden yüklemek gerekir.
  • cached: Kaynaklar ilk seferde başarıyla önbelleğe alınmıştır.
  • noupdate: Manifest değişmemiştir.
  • error: Önbelleğin yüklenmesi veya güncellenmesi sırasında hata oluştu.

Uygulama önbelleği API'sine window.applicationCache üzerinden erişilebilir.

// Önbellek durumunu kontrol et
console.log(window.applicationCache.status);

// updateready olayını işle
window.applicationCache.addEventListener('updateready', function() {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    // Yeni önbelleği uygula ve sayfayı yeniden yükle
    window.applicationCache.swapCache();
    window.location.reload();
  }
}, false);

Application Cache çevrimdışı özellikler sağlasa da, yönetim zorluğu, güncelleme sorunları ve esneklik eksikliği nedeniyle yeni projelerde kullanımı önerilmemektedir. Modern yaklaşımlar arasında Service Workers kullanılarak çevrimdışı erişim ve diğer gelişmiş web uygulaması özellikleri sağlanmaktadır.