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

Giriş

Web tabanlı uygulamaların çevrimdışı erişilebilir olması giderek daha önemli hale geliyor. Evet, tüm tarayıcılar gerektiği şekilde sayfaları ve kaynakları uzun süre önbelleğe alabilir, ancak başka şeylere yer açmak için herhangi bir noktada öğeleri tek tek önbellekten çıkarabilir. HTML5, ApplicationCache arayüzüyle çevrimdışı olmanın bazı sıkıntılarını giderir. Önbellek arayüzünü kullanmak, uygulamanıza üç avantaj sağlar:

  1. Çevrimdışı göz atma - Kullanıcılar çevrimdışı olduklarında sitenizin tamamında gezinebilir
  2. Hız: Kaynaklar doğrudan diskten gelir, ağa taşınmaz.
  3. Dayanıklılık: Siteniz "bakım" nedeniyle bozulursa (ör. birisi yanlışlıkla her şeyi bozarsa) kullanıcılarınıza çevrimdışı deneyimi yaşayacaksınız

Uygulama Önbelleği (veya AppCache), geliştiricinin tarayıcının hangi dosyaları önbelleğe alacağını ve çevrimdışı kullanıcılara sunacağını belirtmesine olanak tanır. Kullanıcı internete bağlı değilken yenile düğmesine bassa bile uygulamanız doğru şekilde yüklenir ve ç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. Manifest dosyasında açıkça listelenmeyen bir sayfa, manifest özelliğini içermiyorsa tarayıcı sayfayı önbelleğe almaz. Bu, manifest içeren ve kullanıcının gittiği her sayfanın uygulama önbelleğine dolaylı olarak ekleneceği anlamına gelir. Dolayısıyla, manifest dosyanızdaki her sayfayı listelemenize gerek yoktur. Bir sayfa bir manifeste yönlendiriyorsa bu sayfanın önbelleğe alınmasını engellemenin hiçbir yolu yoktur.

Uygulama önbelleği tarafından kontrol edilen URL'leri Chrome'da about://appcache-internals/ adresini ziyaret ederek 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 URL'ye veya göreli yola işaret edebilir ancak mutlak URL, web uygulamasıyla aynı kaynak altında olmalıdır. Manifest dosyası herhangi bir dosya uzantısına sahip olabilir, ancak doğru mime türüyle sunulması gerekir (aşağıya bakın).

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

Bir manifest dosyası, text/cache-manifest mime türüyle yayınlanmalı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'de sunmak için yapılandırma dosyanıza şu satırı ekleyin:

AddType text/cache-manifest .appcache

Veya Google App Engine'deki 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 çıkarılmıştır ve artık Chrome, Safari ve Firefox'un en son sürümlerinde gerekli değildir, ancak eski tarayıcılarda ve IE11'de çalışması için mime türüne ihtiyacınız olacaktır.

Manifest dosyasının yapısı

Manifest, html öğesindeki manifest özelliği aracılığıyla bağlantı oluşturduğunuz ayrı bir dosyadır. Basit bir manifest şöyle görünür:

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

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

Dikkat edilmesi gereken birkaç nokta var:

  • CACHE MANIFEST dizesi ilk satırdır ve zorunludur.
  • Dosyalar başka bir alandan olabilir
  • Bazı tarayıcılar, uygulamanızın kullanabileceği depolama alanı kotası miktarına kısıtlamalar getirir. Örneğin Chrome'da AppCache, diğer çevrimdışı API'lerin paylaşabileceği GEÇİCİ depolama alanının paylaşılan havuzunu kullanır. Chrome Web Mağazası için bir uygulama yazıyorsanız, unlimitedStorage kullanıldığında bu kısıtlama kaldırılır.
  • Manifestin kendisi 404 veya 410 döndürürse önbellek silinir.
  • Manifest veya içinde belirtilen bir kaynak indirilemezse önbellek güncelleme işleminin tamamı başarısız olur. Hata durumunda tarayıcı, eski uygulama önbelleğini kullanmaya devam eder.

Daha karmaşık bir örneği inceleyelim:

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 hizmet edebilirler. Bir uygulamanın önbelleği yalnızca manifest dosyası değiştiğinde güncellenir. Örneğin, bir resim kaynağını düzenler veya bir 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ın kendisini değiştirmeniz gerekir.

Her defasında güncellemeleri zorunlu kılmak için sürekli güncellenen bir zaman damgası veya rastgele dize kullanmaktan kaçının. Güncelleme sırasında manifest dosyası, bir kez başlangıçta ve bir kez de önbelleğe alınan tüm dosyalar güncellendikten sonra bir kez olmak üzere iki kez kontrol edilir. Güncelleme sırasında manifest değiştiyse, tarayıcı bazı dosyaları bir sürümden, diğer dosyaları başka bir sürümden almış olabilir. Bu nedenle, önbelleği uygulamaz ve daha sonra yeniden dener.

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

Bir manifestin üç farklı bölümü olabilir: CACHE, NETWORK ve FALLBACK.

CACHE:
Bu, girişler için varsayılan bölümdür. Bu başlık altında (veya CACHE MANIFEST öğesinden hemen sonra) listelenen dosyalar ilk kez indirildikten sonra açık bir şekilde önbelleğe alınır. NETWORK:
Bu bölümde listelenen dosyalar önbellekte yoksa ağdan gelebilir. Aksi takdirde, kullanıcı internete bağlı olsa bile ağ kullanılmaz. Burada belirli URL'leri beyaz listeye ekleyebilirsiniz. Alternatif olarak, tüm URL'lere izin veren "" ifadesini kullanabilirsiniz. Çoğu sitede "" gerekir. FALLBACK:
Bir kaynağa erişilemiyorsa, yedek sayfaları belirten isteğe bağlı bir bölüm. İlk URI kaynaktır. İkinci URI, ağ isteğinin başarısız olması veya hata oluşması durumunda kullanılan yedektir. Her iki URI de manifest dosyasıyla aynı kaynağa sahip olmalıdır. Belirli URL'leri yakalayabileceğiniz gibi URL öneklerini de yakalayabilirsiniz. "images/large/" ifadesi, "images/large/whatever/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örüntülenecek bir "tümünü yakalama" sayfası (offline.html) tanımlar. Ayrıca diğer tüm kaynakların (ör. uzaktaki bir sitedekiler) internet bağlantısı gerektirdiğini de 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 sitenize ait veri depolama alanını temizler.
  2. Manifest dosyası değiştirilir. Not: Manifest'te listelenen bir dosyanın güncellenmesi, tarayıcının söz konusu kaynağı yeniden önbelleğe alacağı anlamına gelmez. Manifest dosyasının kendisi değiştirilmelidir.

Önbellek durumu

window.applicationCache nesnesi, tarayıcınızın uygulama önbelleğine programlı olarak erişmenizdir. status özelliği, önbelleğin mevcut durumunu kontrol etmek için yararlı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'te güncellemeleri programatik olarak kontrol etmek için önce applicationCache.update() çağrısı yapın. Bu işlem, kullanıcının önbelleğini güncellemeye çalışır (manifest dosyasının değiştirilmesini gerektirir). Son olarak, applicationCache.status UPDATEREADY durumundayken applicationCache.swapCache() çağrıldığında eski önbelleği 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.
}

Bununla birlikte, bu işlemi otomatikleştirebilirsiniz. Kullanıcıları sitenizin en yeni sürümüne güncellemek için sayfa yüklemesinde updateready etkinliğini izleyecek bir işleyici 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 açığa çıkar. Tarayıcı; indirme ilerleme durumu, uygulama önbelleğinin güncellenmesi ve hata koşulları gibi konularla ilgili etkinlikleri tetikler. Aşağıdaki snippet, her bir önbellek etkinliği türü için etkinlik işleyicileri 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. Bu tür bir hata olması durumunda tarayıcı, eski uygulama önbelleğini kullanmaya devam eder.

Referanslar