Uygulama önbelleğini kullanma konusunda başlangıç kılavuzu

Giriş

Web tabanlı uygulamaların çevrimdışı olarak erişilebilir olması giderek daha önemli hale geliyor. Evet, tüm tarayıcılar istenirse sayfaları ve kaynakları uzun süreler boyunca önbelleğe alabilir ancak tarayıcı, diğer öğelere yer açmak için dilediğinde öğeleri önbellekten çıkarabilir. HTML5, ApplicationCache arayüzüyle çevrimdışı olmanın bazı sorunlarını giderir. Önbellek arayüzünü kullanmak uygulamanıza üç avantaj sağlar:

  1. Çevrimdışı tarama: Kullanıcılar çevrimdışıyken sitenizin tamamında gezinebilir.
  2. Hız: Kaynaklar doğrudan diskten alınır, ağa gitmez.
  3. Esneklik: Siteniz "bakım" nedeniyle (ör. bir kullanıcı yanlışlıkla her şeyi bozarsa) devre dışı kalırsa kullanıcılarınız çevrimdışı deneyimi yaşar.

Uygulama önbelleği (veya AppCache), geliştiricinin tarayıcının hangi dosyaları önbelleğe alması ve çevrimdışı kullanıcılara sunması gerektiğini belirtmesine olanak tanır. Kullanıcı internete bağlı değilken yenile düğmesine bassa bile uygulamanız yüklenir ve düzgün çalışır.

Önbellek manifest dosyası

Önbellek manifest dosyası, tarayıcının çevrimdışı erişim için önbelleğe alması gereken kaynakları listeleyen basit bir metin dosyasıdır.

Manifest dosyasına referans verme

Bir uygulamanın uygulama önbelleğini etkinleştirmek için dokümanın html etiketine manifest özelliğini ekleyin:

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

manifest özelliği, web uygulamanızın önbelleğe alınmasını istediğiniz her sayfasına eklenmelidir. Tarayıcı, manifest özelliğini içermeyen sayfaları önbelleğe almaz (manifest dosyasında açıkça listelenmediği sürece). Bu, kullanıcının gittiği ve manifest içeren tüm sayfaların uygulama önbelleğine dolaylı olarak eklenmesi anlamına gelir. Bu nedenle, manifest dosyanızda her sayfayı listelemeniz gerekmez. Bir sayfa bir manifest'i gösteriyorsa bu sayfanın önbelleğe alınmasını engellemenin bir yolu yoktur.

Chrome'da about://://appcache-internals/ adresini ziyaret ederek uygulama önbelleği tarafından kontrol edilen URL'leri görebilirsiniz. Buradan önbellekleri temizleyebilir ve girişleri görüntüleyebilirsiniz. Firefox'ta benzer geliştirici araçları vardır.

manifest özelliği mutlak bir URL'yi veya göreli bir yolu işaret edebilir ancak mutlak URL, web uygulamasıyla aynı kaynakta olmalıdır. Manifest dosyasının uzantısı herhangi bir şey olabilir ancak doğru mime türüyle yayınlanması gerekir (aşağıya bakın).

<html manifest="http://www.example.com/example.mf">
  ...
</html>

Manifest dosyası, text/cache-manifest mime türüyle sunulmalıdır. Web sunucunuza veya .htaccess yapılandırmanıza özel bir dosya türü eklemeniz gerekebilir.

Örneğin, bu mime türünü Apache'te sunmak için yapılandırma dosyanıza şu satırı ekleyin:

AddType text/cache-manifest .appcache

Alternatif olarak, Google App Engine'daki app.yaml dosyanızda:

- url: /mystaticdir/(.*\.appcache)
  static_files: mystaticdir/\1
  mime_type: text/cache-manifest
  upload: mystaticdir/(.*\.appcache)

Bu şart bir süre önce spesifikasyondan kaldırıldı ve artık Chrome, Safari ve Firefox'un en son sürümleri tarafından gerekli değil. Ancak eski tarayıcılarda ve IE11'de çalışması için mime türüne ihtiyacınız var.

Manifest dosyasının yapısı

Manifest, html öğesindeki manifest özelliği aracılığıyla bağladığınız ayrı bir dosyadır. Basit bir manifest aşağıdaki gibi görünür:

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
http://cdn.example.com/scripts/main.js

Bu örnekte, sayfadaki bu manifest dosyasını belirten dört dosya önbelleğe alınır.

Göz önünde bulundurulması gereken bazı noktalar:

  • CACHE MANIFEST dizesi ilk satırdır ve gereklidir.
  • Dosyalar başka bir alandan olabilir
  • Bazı tarayıcılar, uygulamanızın kullanabileceği depolama alanı kotası miktarı konusunda kısıtlamalar uygular. Örneğin Chrome'da AppCache, diğer çevrimdışı API'lerin paylaşabileceği TEMPORARY depolama alanından ortak bir havuz kullanır. Chrome Web Mağazası için bir uygulama yazıyorsanız unlimitedStorage kullanarak bu kısıtlamayı kaldırabilirsiniz.
  • Manifest'in kendisi 404 veya 410 döndürüyorsa önbellek silinir.
  • Manifest veya içinde belirtilen bir kaynak indirilemezse önbellek güncelleme sürecinin tamamı başarısız olur. Başarısızlık durumunda tarayıcı eski uygulama önbelleğini kullanmaya devam eder.

Daha karmaşık bir örneğe göz atalım:

CACHE MANIFEST
# 2010-06-18:v2

# Explicitly cached 'master entries'.
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js

# Resources that require the user to be online.
NETWORK:
*

# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg

"#" ile başlayan satırlar yorum satırlarıdır ancak başka bir amaca da hizmet edebilir. Bir uygulamanın önbelleği yalnızca manifest dosyası değiştiğinde güncellenir. Örneğin, bir resim kaynağını düzenlerseniz veya JavaScript işlevini değiştirirseniz bu değişiklikler yeniden önbelleğe alınmaz. Tarayıcıyı önbelleğe alınan dosyaları yenilemesi için bilgilendirmek üzere manifest dosyasını kendiniz değiştirmeniz gerekir.

Her seferinde güncellemeleri zorlamak için sürekli güncellenen bir zaman damgası veya rastgele dize kullanmaktan kaçının. Güncelleme sırasında manifest bir kez başlangıçta ve tüm önbelleğe alınmış dosyalar güncellendikten sonra bir kez kontrol edilir. Güncelleme sırasında manifest değiştiyse tarayıcının bazı dosyaları bir sürümden, diğer dosyaları başka bir sürümden alması mümkündür. Bu nedenle, tarayıcının önbelleği uygulamaması ve daha sonra yeniden denemesi olasıdır.

Önbellek güncellense de güncellemeler sayfanın önbelleğin geçerli sürümünden yüklenmesinden sonra gerçekleştiği için tarayıcı, sayfa yenilenene kadar bu dosyaları kullanmaz.

Bir manifest dosyası üç farklı bölümden oluşabilir: CACHE, NETWORK ve FALLBACK.

CACHE:
Bu, girişler için varsayılan bölümdür. Bu başlığın altında listelenen dosyalar (veya CACHE MANIFEST hemen sonrasındaki dosyalar) ilk kez indirildikten sonra açıkça önbelleğe alınır. NETWORK:
Bu bölümde listelenen dosyalar, önbellekte değilse ağdan gelebilir. Aksi takdirde, kullanıcı çevrimiçi olsa bile ağ kullanılmaz. Burada belirli URL'leri veya tüm URL'lere izin veren "" değerini beyaz listeye ekleyebilirsiniz. Çoğu sitenin "" değerine ihtiyacı vardır. FALLBACK:
Bir kaynağa erişilemezse yedek sayfaları belirten isteğe bağlı bir bölüm. İlk URI kaynaktır, ikincisi ise ağ isteği başarısız olursa veya hata oluşursa kullanılan yedek kaynaktır. Her iki URI de manifest dosyasıyla aynı kaynaktan gelmelidir. Belirli URL'leri ve URL ön eklerini yakalayabilirsiniz. "images/large/", "images/large/herhangi/img.jpg" gibi URL'lerdeki hataları yakalar.

Aşağıdaki manifest, kullanıcı çevrimdışıyken sitenin köküne erişmeye çalıştığında gösterilecek bir "herkese açık" sayfa (offline.html) tanımlar. Ayrıca, diğer tüm kaynakların (ör. uzak bir sitedeki kaynaklar) internet bağlantısı gerektirdiğini belirtir.

CACHE MANIFEST
# 2010-06-18:v3

# Explicitly cached entries
index.html
css/style.css

# offline.html will be displayed if the user is offline
FALLBACK:
/ /offline.html

# All other resources (e.g. sites) require the user to be online.
NETWORK:
*

# Additional resources to cache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png

Önbelleği güncelleme

Bir uygulama çevrimdışı olduğunda aşağıdakilerden biri gerçekleşene kadar önbelleğe alınmış olarak kalır:

  1. Kullanıcı, tarayıcısının sitenizle ilgili veri depolama alanını temizler.
  2. Manifest dosyası değiştirilmişse. Not: Manifest'te listelenen bir dosyanın güncellenmesi, tarayıcının bu kaynağı yeniden önbelleğe alacağı anlamına gelmez. Manifest dosyasının kendisi değiştirilmelidir.

Önbellek durumu

window.applicationCache nesnesi, tarayıcının uygulama önbelleği için programlı erişiminizi sağlar. status mülkü, önbelleğin mevcut durumunu kontrol etmek için kullanışlıdır:

var appCache = window.applicationCache;

switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
break;
case appCache.IDLE: // IDLE == 1
return 'IDLE';
break;
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING';
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING';
break;
case appCache.UPDATEREADY:  // UPDATEREADY == 4
return 'UPDATEREADY';
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE';
break;
default:
return 'UKNOWN CACHE STATUS';
break;
};

Manifest'teki güncellemeleri programatik olarak kontrol etmek için önce applicationCache.update() işlevini çağırın. Bu işlemle kullanıcının önbelleği güncellenmeye çalışılır (bu işlem için manifest dosyasının değiştirilmiş olması gerekir). Son olarak, applicationCache.status UPDATEREADY durumundayken applicationCache.swapCache() çağrılırsa eski önbellek yenisiyle değiştirilir.

var appCache = window.applicationCache;

appCache.update(); // Attempt to update the user's cache.

...

if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache();  // The fetch was successful, swap in the new cache.
}
çağrısı gerekmez.

İyi haber şu ki bu işlemi otomatikleştirebilirsiniz. Kullanıcıları sitenizin en yeni sürümüne güncellemek için sayfa yüklendiğinde updateready etkinliğini izleyen bir dinleyici ayarlayın:

// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {

window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    // Browser downloaded a new app cache.
    if (confirm('A new version of this site is available. Load it?')) {
    window.location.reload();
    }
} else {
    // Manifest didn't changed. Nothing new to server.
}
}, false);

}, false);

AppCache etkinlikleri

Tahmin edebileceğiniz gibi, önbelleğin durumunu izlemek için ek etkinlikler gösterilir. Tarayıcı, indirme ilerleme durumu, uygulama önbelleğini güncelleme ve hata koşulları gibi durumlar için etkinlikler tetikler. Aşağıdaki snippet, her tür önbellek etkinliği için etkinlik dinleyicileri ayarlar:

function handleCacheEvent(e) {
//...
}

function handleCacheError(e) {
alert('Error: Cache failed to update!');
};

// Fired after the first cache of the manifest.
appCache.addEventListener('cached', handleCacheEvent, false);

// Checking for an update. Always the first event fired in the sequence.
appCache.addEventListener('checking', handleCacheEvent, false);

// An update was found. The browser is fetching resources.
appCache.addEventListener('downloading', handleCacheEvent, false);

// The manifest returns 404 or 410, the download failed,
// or the manifest changed while the download was in progress.
appCache.addEventListener('error', handleCacheError, false);

// Fired after the first download of the manifest.
appCache.addEventListener('noupdate', handleCacheEvent, false);

// Fired if the manifest file returns a 404 or 410.
// This results in the application cache being deleted.
appCache.addEventListener('obsolete', handleCacheEvent, false);

// Fired for each resource listed in the manifest as it is being fetched.
appCache.addEventListener('progress', handleCacheEvent, false);

// Fired when the manifest resources have been newly redownloaded.
appCache.addEventListener('updateready', handleCacheEvent, false);

Manifest dosyası veya içinde belirtilen bir kaynak indirilemezse güncellemenin tamamı başarısız olur. Tarayıcı, bu tür bir hata durumunda eski uygulama önbelleğini kullanmaya devam eder.

Referanslar