HTML5 Cache i JavaScript – jak używać HTML5 Cache

html5

Poziom średnio-zaawansowany

Dziś kilka słów o zagadnieniach i możliwościach oferowanych przez HTML5 Cache.

Praca z HTML5 Cache

Programiści backend mogą kojarzyć to z rodzajem cache’owania stron celem przyśpieszenia ich ładowania. W przypadku HTML5 Cache chodzi jednak także o nieco inne korzyści.

HTML5 oferuje mechanizm cache dla aplikacji, a oznacza to możliwość cache’owania aplikacji tak aby była ona dostępna nawet bez połączenia z Internetem!

Główne korzyści to:

– możliwość przeglądania offline – użytkownicy mogą używać aplikacji będąc offline,

– szybkość – zasoby z cache ładowane są szybciej,

– redukcja obciążenia serwera – przeglądarka pobierze tylko zmienione / zaktualizowane zasoby z serwera będąc online.

Podstawą do skorzystania z tych możliwości jest plik Manifest.

Plik Manifest HTML5 Cache

Należy zdefiniować odpowiedni atrybut elementu ‚html’, w którym podamy nazwę naszego pliku Manifest:

 <!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
  The content goes here ... 
</body>

</html>

Zalecanym rozszerzeniem plik manifestu jest „.appcache”.

I tutaj uwaga: plik manifest musi być serwowany z poprawnym typem MIME. W tym przypadku jest to:
„text/cache-manifest” (serwer musi być odpowiednio skonfigurowany).

Manifest to zwyczajny plik tekstowy z odpowiednią zawartością.

Przykład pliku HTML5 Cache Manifest:

CACHE MANIFEST
/style.css
/logo.gif
/photo.png
/app.js
../something.css

Pierwsza linia – sekcja CACHE MANIFEST jest wymagana.

CACHE MANIFEST – określa zasoby, które po pierwszym pobraniu z sieci zostaną zbuforowane (cached)

Są jeszcze dwie dodatkowe sekcje:

NETWORK – zasoby listowane w tej sekcji nie zostaną zbuforowane i będą zawsze wymagać połączenia z Internetem

FALLBACK – ta sekcja definiuje stronę awaryjną, w przypadku gdy nie można pobrać żądanej strony

Na przykład:

FALLBACK
login.php

lub:

FALLBACK
/html/ /offline.html

W tym przypadku plik offline.html będzie serwowany w miejsce wszystkich plików z katalogu „html”, gdy nie będzie możliwe pobranie zasobów z Internetu.

Na co uważać?

Otóż gdy dany plik jest buforowany, przeglądarka nawet po jego zmianie będzie pokazywać plik z cache. Zatem w celu zapewnienia aktualizacji cache, należy zmienić także plik manifestu.

Możliwe jest operowanie na HTML5 Cache z poziomu kodu JavaScript.

Przykład:


var appCache = window.applicationCache;
alert(appCache.status); // get status

// próba przeładowania cache
...
appCache.update();

Układając to wszystko w całość, otrzymujemy możliwość skutecznego używania HTML5 Cache w naszym projekcie.


Powiązane zasoby

– podstawy oraz przykłady pracy z HTML5 cache w JavaScript:

http://www.html5rocks.com/en/tutorials/appcache/beginner/

– więcej praktyki:

http://blog.kamilbrenk.pl/tworzenie-aplikacji-z-html5-offline/

– opis w podręczniku Dive into HTML5:

http://diveintohtml5.info/offline.html

– nudy aka specyfikacja W3C:

http://www.w3.org/TR/2011/WD-html5-20110525/offline.html

– HTML5 Cache w kontekście aplikacji web na urządzenia mobilne:

http://blogs.adobe.com/cantrell/archives/2011/11/building-an-offline-mobile-web-application.html

– zasoby na MDN, Opera …

https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

https://dev.opera.com/articles/offline-applications-html5-appcache/

oraz Apple Developer Center.

Podsumowanie

Im więcej popracujemy z HTML5, tym bardziej docenimy oferowane możliwości. Niektóre z nich są dużym skokiem naprzód w programowaniu WWW.

pozdrowienia.appcache

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+1Share on LinkedIn1Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.