În ziua de astăzi, dispozitivele mobile au din ce în ce mai mulți fani, iar browsingul de pe acestea este de cele mai multe ori o plăcere. Însă, conexiunile de date ale acestora sunt de cele mai multe ori limitate. De aceea este bine ca site-urile mobile realizate de voi să aibă în vedere și acest aspect și paginile lor să poată fi stocate pe dispozitiv, pentru o utilizare offline sau pentru o accesare mai rapidă la revizitarea site-ului.
HTML5 face posibilă interacțiunea cu un site, chiar dacă nu există o conexiune la internet. Secretul constă în cache-ingul fișierelor cheie. Chiar dacă browserele salvează fișierele vizitate recent, cu HTML5 acestea pot fi instruite să descarce fișierele necesare în avans! De asemenea se poate specifica ce fișier să fie afișat dacă utilizatorul este offline (de exemplu, dacă cineva accesează www.exemplu.ro/index.html și este offline, browserul îi poate servi index_offline.html dacă este instruit corespunzător).
Cum funcționează?
Pentru a realiza un site care să fie disponibil offline (aplicație web offline), așa cum apare în specificațiile HTML5, trebuie făcut un fișier manifest. Acesta este o listă cu fișierele pe care browserul trebuie să le descarce și să le stocheze în cache-ul aplicației respective. Prima dată când vizitatorul vizitează site-ul, browserul verifică fișierul manifest și descarcă fișierele listate în acesta pentru o utilizare ulterioară offline. La o nouă vizită a site-ului, fișierul manifest este verificat din nou, iar dacă sunt sesizate modificări, toate fișierele sunt descărcate din nou.
Browsere compatibile
Așa cum era de așteptat, familia de browsere Internet Explorer nu permit salvarea de fișiere pentru utilizare offline. Celelalte browsere au implementată această opțiune în ultimele versiuni ale lor: Firefox, Chrome, Safari, Opera. Firefox este singurul care afișează un mesaj de avertizare atunci când un site dorește să salveze paginile local pentru acces offline și permite utilizatorului să anuleze această acțiune.
Crearea unui manifest
Fișierul manifest este un fișier text simplu, care trebuie salvat cu extensia .manifest. Nu este important locul unde acest fișier este salvat, dar logic este să fie plasat în rădăcina site-ului web. Prima linie a acestui fișier ar trebui să arate exact așa:
CACHE MANIFEST
După această linie, urmează lista cu fișiere, care sunt grupate în 3 secțiuni, după cum vrem să fie tratate în mod offline:
- secțiunea explicită, unde sunt trecute toate fișierele ce vor fi descărcate și salvate local, chiar dacă nu vor fi folosite de pagina curentă
- secțiunea cu fișiere online, unde sunt precizate fișierele care întotdeauna vor fi accesate online
- secțiunea fallback, unde vor fi precizate fișierele ce vor fi folosite în modul offline, când nu pot fi accesate fișierele ce trebuiesc folosite în modul online. Exemplu:
FALLBACK: index.html indexoffline.html
În fișierul manifest se pot include și fișiere css, js, imagini, fonturi și alte fișiere folosite. Liniile goale sunt permise în interiorul fișierului manifest, la fel și comentariile, care încep cu #. Cele 3 secțiuni pot fi scrie în orice ordine.
Servirea manifestului
Pentru a atașa un manifest unei pagini web HTML5, se adaugă atributul manifest tag-ului html în fiecare pagină care se dorește a fi disponibilă offline:
<html manifest="site.manifest">
Este important ca acest fișier manifest să fie servit cu MIME type-ul corespunzător: text/cache-manifest. Pentru a seta MIME type-ul corespunzător, se adaugă în fișierul .htaccess linia:
AddType text/cache-manifest .manifest
Lazy manifest
Specificațiile HTML5 includ în exemple și un model de manifest, numit lazy manifest, care, în loc să descarce toate paginile imediat, browserul stochează numai pagina de fallback și paginile care sunt vizitate în mod online:
CACHE MANIFEST FALLBACK: / /offline.html NETWORK: *
Actualizarea cache-ului
De fiecare dată când o pagină este actualizată, trebuie actualizat și cache-ul vizitatorilor. Pentru asta, trebuie editat fișierul manifest. O practică des întâlnită este aceea de a pune în fișierul manifest un număr de versiune, iar acesta să fie modificat la fiecare editare a paginilor. Astfel, la o noua vizită, browserele vor detecta modificările efectuate în fișierul manifest și vor descărca din nou toate fișierele din acesta.
Exemplu
Mai jos, un exemplu de manifest de pe site-ul StarDesigns.ro
CACHE MANIFEST # version 2 - 15 august 2011 index.html webdesign.html software.html apps.html error.html app_iploiesti.html favicon.ico css/layout.css css/style.css js/html5.js js/jquery.easing.js js/jquery-1.6.js js/jsslide.js media/apps_01.jpg media/apps_02.jpg media/apps_03.jpg media/error.jpg media/index_01.jpg media/index_02.jpg media/index_03.jpg media/index_04.jpg media/ipl.jpg media/jsSlideShow_left.png media/jsSlideShow_left_hover.png media/jsSlideShow_right.png media/jsSlideShow_right_hover.png media/software_01.jpg media/software_02.jpg media/webdesign_01.jpg media/webdesign_02.jpg NETWORK: contact.html support.html FALLBACK: / /error.html
