Weboldalak kliens oldali gyorsítótárazása, azaz HTML5 Appcache

2017.02.13. legyes Weboldal készítés, Weboldal készítés 0

Korábban csak a HTML fejlécek módosítgatásával lehetett jelezni egy böngészőnek, hogy gyorsítótárazható a tartalom. Ezekkel lehetett csalni kicsit a webszerverben is, vagy az oldalt generáló scriptben is. A HTML5-ben viszont megjelent az úgynevezett „Application cache”, ami a weboldal offline (Internet kapcsolat nélküli) módjához ad egy leírót a böngésző számára, amit online módon is előnyünkre fordíthatunk.

Egy nagyon jól egyszerűsített leírás található meg róla a w3schools oldalán, aki ért angolul, érdemes elolvasni. A lényeg:

Webszerver MIME típus támogatás

Én nginx-szet használok, mert nincs jó kapcsolatom a memóriagyárosokkal, akik az Apache2-t szponzorálják, ezért ahhoz tudok adni biztosan működő leírást, ami végtelenül egyszerű:

Nyissuk meg a /etc/nginx/mime.types fájlt és adjuk hozzá a .manifest kiterjesztést:

text/cache.manifest                 manifest;

Forráskód módosítása

Szerencsére itt is kevés a tennivaló, a <html> tag-et egészítsük ki a manifest fájl elérési útjával a következőképpen:

<html manifest="page.manifest">

A manifest fájl létrehozása

A manifest fájl tartalmazza azt, hogy mi az amit offline módban is elérhetővé kell tenni, mi az, amit mindenképpen online módon kell elérni. Ahhoz, hogy a kliens oldali appcache-t frissítésre bírjuk, módosítani kell a manifest fájl tartalmát. Amit általában úgy tesznek meg, hogy megjegyzésben ( # karakterrel kezdődő sor) átírják a dátumot.

Figyelem! Az összes mappának tartalmaznia kell ilyen fájlt, ha a <html> tagben relatív URL van! Ez akkor is igaz, ha „baráti” URL-eket használunk, mert a böngésző ott is keresi. Így érdemes pl . manifest="/page.manifest" formában megadni. Az appcache működése hatással van a dinamikus oldalak kezelésére, ami pl. a PHP-val generált tartalomban is komoly gubancot okozhat, mert a felhasználó a gyorsítóttárazott tartalmat láthatja! Modern böngészőt igényel, csak kváziszabvány, a Mozilla pl. már temeti.

Példa egy page.manifest fájl tartalmára:

CACHE MANIFEST
# 2017-02-01:v1

# A fajlok, amik soha nem valtoznak
js/jquery.min.js
js/jquery.timers.min.js
js/jquery.watermark.min.js
images/logo.png
css/boostrap.min.css

# A fajlok, amiket mindig cache nélkül kell elérni
# (minden egyeb, ami nincs meghatarozva a korrabiakban)
NETWORK:
*

# Ha az user offline, akkor ezt kell betolteni
FALLBACK:
/ /offline.html

# Egyeb gyorsitotarazando fajlok
CACHE:
#

A legjobb tudomásom szerint nincs lehetőség mappa megadására rekurzívan, ezért minden egyes fájlt fel kell sorolni manuálisan, vagy scripttel generálva. 

Törlési kliens oldalon pl. Chrome alatt: chrome://appcache-internals/

A működése a modern böngészők fejlesztőeszközeiben könnyen ellenőrizhető:

 

Egyéb hasznos linkek:

https://www.sitepoint.com/common-pitfalls-avoid-using-html5-application-cache/

HTML5 Application Cache How To


http://alistapart.com/article/application-cache-is-a-douchebag