Stránka dostupná i bez internetu

JF · 2014-11-22 17:16:07

HTML5 prináša novú možnosť ktorou je ukladanie webovej stránky do pamäte prehliadača, takzvanej AppCache.
Dosiahnuť tohoto efektu nie je až tak zložité a dnes si v skratke vysvetlíme ako toho docieliť.

Aby prehliadač vedel ktorú stránku má uložiť do svojej pamäte, dáme mu to jasne vedieť v zdrojovom kóde stránky atribútom manifest umiestnenom v úvodnom tágu html, viď príklad:

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

Adresa súboru manifest môže byť absolútna URL (príklad: http://www.example.com/manifest.appcache), alebo relatívna cesta (príklad: /manifest.appcache). Pri použití absolútnej URL musí smerovať na adresu stránky na ktorej chceme AppCache použiť.

Manifest súbor musí byť zo servera odosielaný zo správnym MIME-TYPE a jeho názov i koncovka môže byť akákoľvek. Tohoto docielime zápisom do súboru .htaccess nasledovne:

AddType text/cache-manifest .appcache

V manifest súbore nakoniec špecifikujeme ktoré súbory si má prehliadač uložiť natvrdo, u ktorých má zisťovať prípadnú zmenu a ktoré použiť pri zobrazení podstránok neuložených v AppCache počas nedostupnosti internetu.

manifest.appcache

CACHE MANIFEST

# Položky ukladané natvrdo do prehliadača
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js

# Zdroje ktoré vyžadujú prístup k internetu, tj prehliadač raz za čas overí ich veľkosť a ak nesúhlasí, aktualizuje ich v AppCache
NETWORK:
*

# static.html sa zobrazí ak súbor main.py je nedostupný
# offline.jpg sa zobrazí pri všetkých fotkách v adresáry images/large/
# offline.html sa zobrazí ak je užívateľ offline a danú podstránku nenavštívil počas pripojenia na internet
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
/ /offline.html

Čo všetko máme v AppCache prehliadača zistíme zadaním tejto adresy:
- Google Chrome:
chrome://appcache-internals/
- Mozilla Firefox ich musíme nájsť na disku:
Windows Vista/7: C:\Users\<username>\AppData\Local\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache
Mac/Linux: /Users/<username>/Library/Caches/Firefox/Profiles/<salt>.<profile name>/OfflineCache

_______________________________________________________
Otestovať si to môžete napríklad na stránke https://www.psici.eu

Destroyer · 2014-11-23 02:43:56

Jeste by bylo dobre zminit podporu mezi prohlizeci
http://caniuse.com/#search=AppCache

#1 2014-11-22 17:16:07

Stránka dostupná i bez internetu

#2 2014-11-23 02:43:56

Re: Stránka dostupná i bez internetu

Zápatí