HTML5 Uygulama Bellekleme

HTML5 ile bir web uygulamasının çevrimdışı (offline) versiyonunu oluşturmak, bir cache manifest dosyası oluşturarak yapmak kolaydır.


Uygulama Bellekleme (Application Cache) Nedir?

HTML5 bir web uygulamasının ön belleğe alınmasını ve internet yokken de erişilebilmesini sağlayan “uygulama bellekleme” özelliğini taşır.

Application cache bir uygulamaya üç avantaj sağlar:

  1. Çevrimdışı tarama – kullanıcılar çevrimdışı olduklarında da uygulamayı kullanabilir.
  2. Hız – Belleklenmiş uygulamalar daha çabuk yüklenir.
  3. Düşürülmüş sunucu yükü – tarayıcı sadece gerekli güncellemeleri/değişiklikleri sunucudan yükler.

Destekleyen Tarayıcılar

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 10, Firefox, Chrome, Safari ve Opera Uygulama Bellekleme’yi destekler.



HTML5 Cache Manifest Örneği

Aşağıdaki örnek cache manifest içeren bir HTML dökümanını gösterir (çevrimdışı tarama):

Example

<!DOCTYPE HTML>
<html manifest=”demo.appcache”>

<body>
Döküman içeriği……
</body>

</html>

Kendin Dene »

 


Cache Manifest İlk Bilgiler

Uygulama Bellekleme’yi aktifleştirmek için, manifest özelliğini <html> etiketinin içine ekleyin:

<!DOCTYPE HTML>
<html manifest=”demo.appcache”>

</html>

Manifest özelliği olan her sayfa kullanıcı tarafından ziyaret edildiğinde ön belleğe alınır.

Manifest dosyası için önerilen dosya uzantısı: “.appcache”tir.

Note Bir manifest dosyası correct MIME-type ile sunucuya yüklenmelidir. Bu correct MIME-type “text/cache-manifest”tir. Web sunucusu üzerinden konfigüre edilmelidir.

 


Manifest Dosyası

Manifest dosyası, tarayıcıya neyi ön belleğe almasını (cache) gerektiğini söyleyen basit bir metin belgesidir.

Manifest dosyası üç kısımdan oluşur:

  • CACHE MANIFEST – Bu başlığın altında listelenen dosyalar ilk kez download edildikten sonra ön belleğe alınır.
  • NETWORK – Bu başlığın altında listelenen dosyalar sunucuya bağlantı gerektirir ve asla ön belleğe alınmazlar.
  • FALLBACK – Bu başlığın altında listelenen dosyalar bir dosya erişilemez durumda ise kullanıcıları yönlendirmek istediğiniz bir sayfayı belirtir (örnek: 404 bulunamadı sayfası gibi)

CACHE MANIFEST

İlk satır CACHE MANIFEST olmalıdır ve zorunludur:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

Yukarıdaki manifest dosyası üç kaynak dosyasına sahiptir: bir CSS stil dosyası, bir GIF resim dosyası ve bir JavaScript dosyası. Bir manifest dosyası yüklendiğinde, tarayıcı bu üç dosyayı sunucudan download eder. Devamında, kullanıcı internete bağlı olmazsa bile bunlara erişebilir.

NETWORK

Aşağıdaki NETWORK kısmı “login.php” dosyasının asla ön belleğe alınmayacağını ve çevrimdışı olarak kullanılamayacağını belirtir.:

NETWORK:
login.php

Geri kalan tüm dosyaların internet bağlantısı gerektirdiğini belirtmek için bir yıldız ( * ) simgesi kullanılabilir:

NETWORK:
*

FALLBACK

Aşağıdaki FALLBACK kısmı “offline.html” dosyasının, herhangi bir internet kesintisi yaşandığında ya da erişilemez bir sayfa olduğunda kullanıcılara gösterilmek üzere /html/ klasörüne koyulacağını gösterir.:

FALLBACK:
/html/ /offline.html

Not: İlk URI kaynak, ikincisi ise fallback’tir.


Önbelleği Güncelleme (Update)

Bir uygulama bir kez ön belleğe alındıktan sonra aşağıdakilerden biri olana kadar aynı şekilde kalır:

  • Kullanıcı tarayıcının ön belleğini temizler ise…
  • Manifest dosyası değiştirilir ise… (örnek aşağıda)
  • Uygulama ön belleği programlı bir şekilde güncellenir ise…

Örnek – Tüm bir Cache Manifest Dosyası

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

 

Note İpucu: “#” işareti ile başlayan satırlar yorum satırlarıdır, ancak başka bir amaca da hizmet ederler. Bir uygulamanın ön belleğe alınmış hali sadece manifest dosyası değiştirildiğinde güncellenir. Eğer bir resim ya da bir JavaScript fonksiyonunu düzenlerseniz (edit) bu değişiklikler tekrar ön belleğe alınmayacaktır. Yorum satırlarındaki tarih ya da versiyon gibi bilgileri değiştirmek ise dosyalarınızın tekrar ön belleğe alınması (update) için bir yoldur.

 


Uygulama bellekleme için notlar

Neyi ön belleğe aldığınıza dair dikkatli olun.

Bir dosya ön belleğe alındıktan sonra, siz dosyayı sunucu tarafında güncellerseniz bile tarayıcı belleğe alınmış şeklini göstermeye devam edecektir. Tarayıcınız güncellenmiş şeklini yüklediğinden emin olmak için, manifest dosyasını değiştirmek (yorum satırlarında ufak değişiklikler yapmak gibi) zorundasınız.

Not: Tarayıcıların farklı boyutlarda cache etme limitleri olabilir (bazıları site başına 5MB limit verir).