HTML

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.

    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>

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

Related Articles

Leave a Reply

Check Also

Close
Close

Reklam Engelleme

Please consider supporting us by disabling your ad blocker