banner
htmldersleri
Ana SayfaANA SAYFA Dersler | Örnekler | Forum | Sıkça Sorulan Sorular |Hakkında
HTML Temel
HTML Giriş
HTML Elementler
HTML Etiketler
HTML Parametreler
HTML Biçimlendirme
HTML Özeller
HTML Bağlantılar
HTML Çerçeveler
HTML Tablolar
HTML Listeleme
HTML Formlar
HTML Resimler
HTML Arka Plan
HTML Renkler
HTML Renk Değerleri
HTML Renk İsimleri
HTML Hızlı Liste

HTML5 Ana Menü
HTML5 Giriş
HTML5 Anlamlandırma
HTML5 Giriş Tipleri
HTML5 Form Elementleri
HTML5 Form Özellikleri
HTML5 Canvas
HTML5 SVG
HTML5 Video
HTML5 Audio
HTML5 Konum
HTML5 Sürükle/Bırak
HTML5 Web Depolama
HTML5 Uygulama Bellekleme
HTML5 Web Çalışanı
HTML5 SSE

HTML Gelişmiş
HTML Tasarım
HTML Fontlar
HTML Stiller
HTML Başlık
HTML Meta
HTML URL
HTML Scriptler
HTML Std. Nitelikler
HTML Olaylar
HTML ASCII
HTML Web Sunucu

HTML Örnekler/Test
HTML Örnekler
HTML Örnek Site
HTML Test

HTML5 Uygulama Bellekleme

Önceki Sonraki

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).


Önceki Sonraki
html dersleri
Dersler Örnekler Online Test