Offline HTML5 Uygulamaları Yaratmak
HTML5′in hayat kolaylaştıran birçok özelliğinden bir tanesi de web sayfalarının offline (internet bağlantısı yokken) kullanılabilmesidir. Bu özelliği kullanabilmek için bazı işlemlerin yapılması gerekmektedir. Bu yazıda bunlardan bahsedeceğiz.
Sayfanıza HTML5 doctype ekleyin
İlk adım, sayfaya HTML5 doctype eklenir. Bu daha önce kullandığımız doctype’tan çok daha kolay.
<!DOCTYPE html> <html> ...
Bu arada HTML5′in tüm kuralları için burayı kullanabilirsiniz.
.htaccess desteği
.htaccess doyasının ne olduğunu bildiğinizi ve sunucunuz apache olduğunu varsayarsak, aşağıdaki satırları .htaccess dosyasına eklemeniz gerekiyor.
AddType text/cache-manifest .manifest
Sayfamızı cacheleyecek dosyaya manifesto denir. Bu satırla birlikte .manifest uzantılı dosyaların sunucu tarafından cache manifesto dosyası olarak iletilmesini sağladık. Bu aşamayı yapmazsak sayfamızın cachelenmesi mümkün olmayacaktır.
Manifesto dosyasını oluşturmak
offline.manifest adında bir dosya oluşturun ve aşağıdaki kodu içine yapıştırın.
CACHE MANIFEST CACHE index.html style.css ornek.jpg ornek-gorsel.jpg
Bununla birlikte basitçe offline çalışacak uygulamamız için, saklanacak dosyaları belirttik. Tabiki özellikler bununla sınırlı değil.
CACHE MANIFEST CACHE index.html style.css image.jpg NETWORK: search.php login.php FALLBACK: /admin offline.html
Yukarıdaki örnekte olduğu gibi NETWORK’ün altına saklanmasını istemediğimiz işlem dosyalarımızı belirtebiliriz. FALLBACK altına ise bu örnekte görüldüğü gibi admin linkine gidildiğinde gösterilecek olan offline.html dosyasını ekleyebiliriz.
HTML dosyasına manifesto dosyasını bağlamak
Manifesto ve index.html dosyalarımızı oluşturduktan sonra son adımımız index.html dosyasına manifesto dosyasının yolunu eklemek.
Bunun için manifesto dosyasının yolunu html tag’inin içerisine ekleyin:
<html manifest="/offline.manifest">
Sayfanızı oluşturup test ettiğiniz zaman, sadece Firefox bunun için izin istiyor ve izin ver dediğinizde offline uygulama çalışıyor. Tabiki unutmadan IE şu an bu sistemi desteklemiyor : )