HTML5 - Predmemorija aplikacije


Šta je predmemorija aplikacija?

Većina web aplikacija zasnovan je na rad samo ako ste na mreži. Ali HTML5 uvodi mehanizam predmemorije aplikacija koji omogućava pretraživaču da automatski spremi HTML datoteku i sve ostale resurse koji trebaju da se pravilno prikažu na lokalnom računaru, tako da pretraživač i dalje može pristupiti web stranici i njenim resursima bez internetske veze. Evo nekoliko prednosti korištenja funkcije predmemorije HTML5 aplikacije:


  • Pregledavanje van mreže (Offline browsing) - korisnici mogu koristiti aplikaciju čak i kada su van mreže ili postoje neočekivani poremećaji u mrežnoj vezi.

  • Poboljšajte performanse (Improve performance) - Predmemorisani resursi učitavaju se direktno sa korisničkog računara, a ne sa udaljenog servera, pa se web stranice brže učitavaju i rade bolje.

  • Smanjite HTTP zahtjev i opterećenje servera (Reduce HTTP request and server load) - Pretraživač će s udaljenog servera morati preuzeti samo ažurirane/promijenjene resurse koji minimiziraju HTTP zahtjeve i štede dragocjenu propusnost, kao i smanjiti opterećenje web servera.


Keširanje datoteka manifestom

Da biste predmemorisali datoteke za izvanmrežnu upotrebu, morate izvršiti sljedeće korake:


Korak 1: Stvorite datoteku manifesta predmemorije

Manifest je posebna tekstualna datoteka koja pretraživačima govori koje datoteke treba pohraniti, koje datoteke ne pohraniti i koje datoteke zamijeniti nečim drugim. Datoteka manifesta uvijek započinje riječima CACHE MANIFEST (velikim slovom). Evo primjera jednostavne manifestne datoteke:

CACHE MANIFEST
# v1.0 : 10-08-2014
 
CACHE:
# pages
index.html
 
# styles & scripts
css/theme.css
js/jquery.min.js
js/default.js
 
# images
/favicon.ico
images/logo.png
 
NETWORK:
login.php
 
FALLBACK:
/ /offline.html

Objašnjenje koda

Možete pomisliti o čemu se radi u tom kodu. OK, idemo pravo u to. Datoteka manifesta može imati tri različita dijela: CACHE, NETWORK, i FALLBACK.

  • Datoteke navedene u zaglavlju dijela CACHE: (ili neposredno nakon reda CACHE MANIFEST) izričito se keširaju nakon što se preuzmu prvi put.

  • Datoteke navedene u zaglavlju dijela NETWORK: su resursi s bijele liste koji se nikada ne spremaju u keš i nisu dostupni van mreže. To znači da korisnici mogu pristupiti stranici login.php samo kada su na mreži.

  • Dio FALLBACK: navodi rezervne stranice koje bi pretraživač trebao koristiti u slučaju da se veza sa serverom ne može uspostaviti. Svaki unos u ovom dijelu navodi dva URI-ja - prvi je primarni resurs, drugi rezervni. Na primjer, u našem slučaju će se prikazati stranica offline.html ako je korisnik van mreže. Također, oba URI-a moraju biti istog porijekla kao i datoteka manifesta.

  • Redovi koji počinju s hash simbolom (#) su linije komentara.

Korak 2: Korištenje vaše datoteke manifesta predmemorije

Nakon kreiranja, prenesite svoju datoteku manifesta predmemorije na web server - provjerite da li je web poslužitelj konfigurisan da poslužuje datoteke manifesta s MIME tipom text/cache-manifest. Sada da biste primijenili manifest predmemorije na snazi, trebate ga omogućiti na svojim web stranicama dodavanjem atributa manifesta korijenskom elementu <html>, kao što je prikazano u sljedećem primjeru:

<!DOCTYPE html>
<html lang="en" manifest="example.appcache">
<head>
    <title>Korištenje predmemorije aplikacija</title>
</head>
<body>
    <!--Sadržaj dokumenta biće umetnut ovdje-->
</body>
</html>