Çevrim dışı (offline) çalışabilen web uygulamaları


10 Mart 2013     Etiketler: jQuery JavaScript CSS CSS3 jQueryMobile

HTML5 uyumlu tarayıcılar tarafından desteklenen bir takım özellikler yardımıyla çevrim dışı da çalışabilen web uygulamaları geliştirme... Bellek Bildirim (Cache Manifest) nedir?


Bu makale F5 Dergi Kasim-Aralik 2012 sayisinda yayinlanmistir.


HTML5


Çevrim dışı (offline) çalışabilen web uygulamaları


Geçtiğimiz sayımızda yer alan jQuery Mobil makalemizde çevrim dışı çalışabilen HTML5 uygulamaları konusundan bahsetmiştik. Bu makalemizi HTML5 uyumlu tarayıcılar tarafından desteklenen bir takım özellikler yardımıyla nasıl çevrim dışı da çalışabilen web uygulamaları geliştirilebileceği konusuna ayırdık.


Web ve internetin doğası gereği, çevrim içi (online) olmak web uygulamalarının çalışabilmesi için en başta gelen koşuldu az bir zaman öncesine kadar. Ancak internet erişimli telefon ve tablet gibi cihazlarının artan kullanımı ve bu taşınabilir cihazların çevrim dışı olduğu zamanlarda da kısmen de olsa işlevsel olması artık kullanıcılar tarafından beklenmekte ve talep edilmektedir. Google Mail ve Financial Times gibi web uygulamaları HTML5 teknolojileriyle geliştirilirmiş ve çevrim dışı da çalışabilen uygulamalardır.


Mobil cihazlar ile http://app.ft.com adresi üzerinden ulaştığımız FT HTML5 uygulaması internet bağlantısı mevcutken indirilen ve belleğe yerleştirilen veri ve dosyaların çevrim dışı olunan durumda kullanılmasıyla internet bağlantısı mevcut değilse bile kısmi işlev sunabiliyor. Bu makale ile nasıl çevrim dışı da çalışabilen web uygulamaları geliştirebiliriz bunu inceleyeceğiz.


ÖNEMLİ NOT: Çevrim dışı çalışabilme özelliği bütün tarayıcılar tarafından desteklenmemektedir. Akıllı telefon ve tablet gibi cihazların çoğunda ve masaüstü tarayıcılardan da Firefox, Chrome, Safari ve Opera tarayıcılarının son versiyonları tarafından desteklenen bu özellik Internet Explorer 10 tarafından desteklenecektir.


Bellek Bildirim (Cache Manifest) Dosyası


Özümsenmesi gereken ilk unsur olan bu dosya özel bir bildirim dosyası olup HTML5 uygulamalarının çevrim dışı çalışabilmesi için hangi dosyaların tarayıcının belleğine kaydedileceğini dikte eder.

Genellikle uygulamanın ana sayfası gibi ilk yüklenecek olan dosya içinde bloğunda aşağıdaki şekilde referans edilir:

<html manifest="bellek.appcache">


Yukarıdaki ifadeyle tarayıcıya bellek.appcache dosyasının bir bellek bildirim dosyası olduğunu söylemiş oluyoruz. .appcache sektörde kabul görmüş ve tavsiye edilen dosya uzantı adı olmakla birlikte dosya adı ve uzantısı istediğimiz her hangi bir değer olabilir. Ancak seçtiğimiz uzantının web sunucumuz tarafından text/cache-manifest MIME tipiyle servis edilmesi gerekmektedir.


Bir diğer önemli konu ise bu bellek bildirim dosyalarının CACHE MANIFEST ifadesiyle başlaması gerekliliğidir. Bu başlangıcın ardından gelecek olan içerik 3 bölümden oluşur.


NOT: Bellek bildirim dosyası içine işlevsel olmayan not ve açıklamalar # karakteri ile başlayan satırlara yerleştirilebilir.


1. CACHE Bu bölüm tarayıcıya hangi dosyaların çevrim dışı kullanılmak üzere belleğe yerleştirmesi gerektiğini dikte eder. Bellek bildirim dosyalarına referans içeren dosyalar, yani bloğunda manifest alanı içeren dosyalar, tarayıcılar tarafından otomatik olarak belleğe yerleştirildiklerinden CACHE bölümünde listelenmelerine gerek yoktur.


# Yorumlar # işaretiyle başlayan satırlara girilebilir
CACHE:
css/ana.css
grafik/logo.gif
grafik/arkaPlan.png
js/ana.js
index.html
çevrimDisi.html

Bellek bildirim dosyaları içinde her hangi bir başlık altında olmayan ifadeler CACHE bölümündelermiş gibi kabul edilirler.


2. FALLBACK Bu bölüm çevrim dışıyken ziyaret edilmek istenen sayfaların bellekte mevcut olmamaları halinde görüntülenecek alternatif sayfa veya sayfaların belirlenmesi için kullanılır. Mesela, aşağıdaki / /çevrimDisi.html ifadesi bellekte bulunmayan herhangi bir sayfanın istenmesi halinde çevrimDisi.html sayfasının gösterilmesini dikte etmektedir.


# bellekte yoksa /çevrimDisi.html sayfasını göster
FALLBACK:
/ /çevrimDisi.html

3. NETWORK Bu bölümde de mutlak suretle sunucudan okunması gereken dosyaların bildirimi yapılır. Burada listelenen dosyalar internet bağlantısı mevcut olsun olmasın bellekten değil sunucudan talep edilecektir. Bağlantı mevcut değilse FALLBACK bölümünde ilgili sayfa için tanımlanan alternatif sayfa ya da hata sayfası görüntülenecektir.


NETWORK:
kayıt.aspx
oturumAc.aspx

Konuyu daha detaylı incelemeye devam etmeden önce siz okuyucularımız için hazırladığımız çevrim dışı çalışabilen örnek web uygulamamızı ziyaret etmenizi tavsiye ederiz.


http://lab.f5dergi.com/201211/html5/anaSayfa.html adresinden erişebileceğiniz bu basit örnek uygulamanın ana sayfası (anaSayfa.html) bir bellek bildirim dosyası kullanarak uygulama içeriğinin büyük bir bölümünü yerel belleğe kayıt edecektir. Başka hiçbir sayfaya erişmeden internet bağlantınızı kesip aynı sayfaya yeniden erişirseniz göreceksiniz ki daha önce hiç ziyaret etmediğiniz sayfalar bile erişilebilir olacaktır. Bildirim dosyaları aracılığıyla belleğe yerleştirilen dosyalar, yani CACHE bölümünde tanımlanan dosyalar, bir kere belleğe kaydedildikten sonra sürekli bellekten servis edilirler. Bu bazı durumlarda istenmeyen bir durum olacaktır. Mesela, belleğe yüklenen sayfalardaki içerik sunucudaki değişiklikleri doğal olarak içermeyecektir. Bu da belleğe yerleşen dosyalar üzerinde bir takım kontrol ve yönetim gerekliliğini berberinde getirir.


Bunun tek yolu bellek bildirim dosyasında bir değişiklik yaparak bu dosyanın yeniden işlem görmesini sağlamaktır. Bellek bildirim dosyaları yeniden işlem gördüklerinde CACHE bölümünde bildirilen dosyaların hepsi yeniden sunucudan okunacak ve belleğe yeniden yerleştirileceklerdir. Bellek bildirim dosyalarında # karakteri ile başlayan bir açıklama satırı içinde versiyon bilgisi ile bu işlemi yerine getirmek mümkündür. Yukarıdaki örnek sayfa tarafından kullanılan bildirim dosyasında bu teknik kullanılmaktadır.


CACHE MANIFEST
# versiyon 1.2


CACHE:
grafik/logo.png
css/ana.css
js/jquery.js
js/ana.js
bilgi.html
makaleler.html
makaleler/makale1.html
makaleler/makale2.html
#...diğer makaleler...#
çevrimDisi.html


FALLBACK:
/ çevrimDisi.html


NETWORK:
kayit.html


Burada şu önemli notu da düşmemiz gerekmektedir: bildirim dosyaları da bizim arzumuz ve kontrolümüz dışında bazı tarayıcılar tarafından belleğe yerleştirilebilir. Bu durum çevrim dışı çalışabilen HTML uygulamaları geliştiren yazılımcılar için problem bir noktadır. Bu yüzden web sunucularında gerekli konfigürasyon ile bellek bildirim dosyalarının asla tarayıcı belleğine yerleşmemesi sağlanmalıdır.


Bir diğer önemli nokta da bellek bildirim dosyalarının asla kendilerini içermemeleridir. Eğer bir bellek bildirim dosyası CACHE bölümünde kendini içerirse belleğin yenilenmesi neredeyse imkansız hale gelecektir. Bir başka can sıkıcı durum da büyük ve küçük harflerle yazılmış dosya adları dosyanın farklı dosyalarmış gibi muamele görecek olmalarıdır. Eğer bildirim dosyamızın CACHE bölümünde anaSayfa.html sayfasını belleğe yerleştirilmek üzere bildirmişsek uygulamamız içindeki bütün linkler anaSayfa.html şeklinde olmalıdır. Çevrim dışıyken anasayfa.html adresine yapılacak talepler bellekte mevcut anaSayfa.html ile karşılanmayacaklardır. Bu da akılda tutmamız gereken bir husustur.


Bellek bildirim dosyaları ASPX, PHP vs. gibi sunucu teknolojileri ile de dinamik bir şekilde oluşturulabilir. Bu şekilde oluşturulan bellek bildirim dosyaları Content-Type: text/cache-manifest şeklinde bir HTML Header ifadesi içermelidir.


Bildirim dosyalarında yapılacak değişiklerin bellekteki içeriğin tazeleneceği anlamına geldiğini söyledik. Ancak burada bilinmesi gereken önemli bir ayrıntı vardır. Bu da bellekteki içerik yenilendikten sonra bu yeni içeriğin hemen değil bir sonra ki yüklemede etkin duruma geleceğidir. Bunu daha somut bir senaryo ile açıklamaya çalışalım:


Farz edelim ki bildirim dosyasının CACHE bölümünde bir CSS dosyasının belleğe kopyalanması bildirimini yaptık. Böylece çevrim dışı olunan durumlarda da sayfalarımıza gerekli görselliği uygulayabilelim. Bu CSS dosyasında bir değişiklik yaptığımızda doğal olarak ilk fırsatta bellekteki dosyayı yenisiyle değiştirmek isteyeceğiz. Bu yüzden bellek bildirim dosyamızdaki versiyon satırında bir değişiklik yaparak tarayıcılara bellekteki dosyaları yenilemelerini dikte etmeliyiz. Tarayıcılar bellekteki dosyaları yenilerler ancak sayfa zaten yüklenmiş olduğu için bu yenilikler bir sonraki yüklemede etkin hale geleceklerdir. Bu durumu aşağıdaki JavaScript tekniği ile elimine edebiliriz.


function bellekGuncelle(e) {
  alert("Bellek güncelleniyor");
 
window.location.reload(); //sayfayı yeniden yükle
}
window.applicationCache.addEventListener('updateready',bellekGuncelle,false);

Burada tarayıcı belleğinde bellek bildirim dosyamız için ayrılan alanı temsil eden window.applicationCache nesnesinin yayınladığı updateready olayına bellekGuncelle metodumuzu ekliyoruz ki tarayıcı tarafından otomatik olarak gerçekleştirilecek olan bellek yenileme işleminden hemen sonra sayfamızı yeniden yükleyerek değişikliklerin derhal etkin olmasını sağlamış oluyoruz.


Sadece JavaScript ile bellekteki içeriği manipüle etmemiz mümkün değil ancak window.applicationCache.update() ifadesi ile tarayıcının bellek bildirimi (manifest) dosyasını kontrol etmesini ve bu dosyada bir değişiklik tespit edilirse bellek içeriği window.applicationCache.swapCache() ile yeniden yüklemeye sebep olmaksızın yenilenebilir. update() ve swapCache() metotları üzerinde bulunulan sayfa tarafından kullanılan JavaScript, XML vs. gibi dosyaların bellekte tazelenmesi gibi senaryolarda faydalı olabilir. Bir çok blog ve web sitelerinde yanlış bir şekilde ifade edildiğinin aksine window.applicationCache.swapCache() ve window.location.reload() ifadelerini arka arkaya çalıştırmak gereksizdir. window.location.reload() ile sayfanın yeniden yüklenmesi zaten bellek içeriğini tazeleyecektir.


Makalemizi sonlandýrýrken þunu da belirtelim: çevrim dýþý çalýþabilen uygu-lamalar geliþtirmede kullanýlan bellek bildirim dosyalarý ve win-dow.applicationCache nesnesi üzerinden yapýlan JavaScript manipülas-yonlarýnýn diðer normal web uygulamalarýnda da kullanýlarak çevrim içi olu-nan durumlarda hatýrý sayýlýr performans kazanýmlarý elde edebiliriz. Bellek bildirim dosyalarýnda bildirilen kaynaklarýn yerel ortama indirilip belleðe yer-leþtirilme iþlemi arka planda gerçekleþen bir iþlem olduðundan bu teknikle site ve web uygulamalarýmýzda yer kullanýlan grafik, JavaScript, CSS, JSON, XML vs. gibi dosyalar bellek bildirim dosyalarý aracýlýðýyla önceden tarayýcý belleðine yerleþtirilebilirler. Böylece bu dosyalar ihtiyaç halinde su-nucudan deðil bellekten servis edilecekleri için gözle görünür performans iyileþmeleri elde edilebilir. Bu tekniði performansýn çok önemli olduðu proje-ler üzerinde çalýþan meslektaþlarýmýza önemle tavsiye ederiz.



Okuyucularýmýzdan önemi her geçen gün artan HTML5 ve benzeri konular-da deneyimlerinizi bizlerle paylaþmanýzý rica ederiz.




Yorumlar


Bu makaleye ait yorum bulunamadı.

Sizin yorumunuz

Email


Adınız







F5 Dergi © 2017