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 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 gelir, hiçbir ağa bağlanmaz.
  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 elde eder.

Uygulama Önbelleği (veya AppCache), geliştiricinin, tarayıcının hangi dosyaları önbelleğe alıp çevrimdışı kullanıcılara sunacağını 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 uygulama için uygulama önbelleğini etkinleştirmek üzere manifest özelliğini, dokümanın html etiketine 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 ekleneceği 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 herhangi bir dosya uzantısı olabilir, ancak doğru mime türüyle sunulması 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&#39;te sunmak için yapılandırma dosyanıza şu satırı ekleyin:

AddType text/cache-manifest .appcache

Alternatif olarak, 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 kaldırıldı ve artık Chrome, Safari ve Firefox'un en son sürümleri tarafından gerekli değildir. Ancak eski tarayıcılarda ve IE11'de çalışması için mime türüne ihtiyacınız vardır.

Manifest dosyasının yapısı

Manifest, html öğesindeki manifest özelliği aracılığıyla bağlantı verdiğiniz 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ıya önbelleğe alınan dosyaları yenilemesi talimatını vermek için manifest dosyasının kendisini 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, önbelleği uygulamaz ve daha sonra yeniden dener.

Önbellek güncellense de tarayıcı, sayfa yenilenene kadar bu dosyaları kullanmaz. Bunun nedeni, güncellemelerin sayfanın önbelleğin mevcut sürümünden yüklenmesinden sonra gerçekleşmesidir.

Manifest'in üç farklı bölümü olabilir: 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 beyaz listeye ekleyebilir veya tüm URL'lere izin veren "" komutunu kullanabilirsiniz. Çoğu site için "" gereklidir. FALLBACK:
Bir kaynağa erişilemediğinde yedek sayfaları belirten isteğe bağlı bir bölüm. İlk URI kaynak, ikincisi ise ağ isteği başarısız olursa veya hatalar oluştuğunda kullanılan yedektir. Her iki URI de manifest dosyasıyla aynı kaynağa ait olmalıdır. Belirli URL'lerin yanı sıra URL ön eklerinin de yakalanmasını sağlayabilirsiniz. "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örüntülenecek bir "tümünü yakalama" sayfasını (çevrimdışı.html) tanımlamaktadır. 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 önbellekte 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şlem, kullanıcının önbelleğini güncellemeye çalışır (manifest dosyasının değişmiş 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 bir haberimiz var: 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