Obținerea accesului offline cu aplicația HTML5

Doar când credeai că ai văzut toate trăsăturile interesante ale HTML5, sunt aici să-ți aduc încă unul. Internetul nu mai este despre site-uri web; este vorba de aplicații web. Adesea, utilizatorii noștri se află pe dispozitive portabile sau mobile și nu au întotdeauna acces la o rețea. Cu cache-ul de aplicații al HTML5, le puteți furniza toate sau o parte din funcționalitatea pe care ar avea-o online, indiferent unde merg.


Full Screencast



Pasul 1: Faceți Manifestul cache-ului

Trucul aici este utilizarea unui fișier manifest cache. În forma sa cea mai de bază, este incredibil de simplu:

 CACHE MANIFEST # versiunea 0.1 index.html style.css script.js preview.jpg

Pasul 2: Serviți Manifestul corect

Acest fișier trebuie să fie difuzat cu un antet tip de conținut Text / cache-manifest; este foarte simplu să faci acest lucru cu un fișier .htaccess:

 Textul de tip AddType / manifestarea manifestului cache

Acest lucru va servi toate fișierele cu o extensie de "manifest" cu antetul corespunzător tipului de conținut.


Pasul 3: Închideți manifestul

Pentru a utiliza fișierul manifestului cache, pur și simplu adăugați o proprietate la html element:

   

Acum, data viitoare când un utilizator accesează site-ul / aplicația, browser-ul său va memora fișierele necesare. Este atât de ușor. Dacă navighează către adresa URL atunci când sunt offline, vor primi conținutul memorat în cache.


Caveat: Reîmprospătarea cache-ului

Este important să rețineți că, chiar și atunci când utilizatorul este online, browserul va merge la server pentru a obține conținut nou în trei cazuri:

  1. Utilizatorul își șterge memoria cache (eliminând în mod evident conținutul dvs.).
  2. Fișierul manifest se modifică.
  3. Cache-ul este actualizat prin JavaScript

Deci, pentru a forța toți utilizatorii să reîncarce memoria cache, puteți schimba ceva în fișierul manifest (nu fișierele legate, conținutul propriu al fișierului manifest). De cele mai multe ori, probabil veți dori doar să schimbați un comentariu și asta va fi de ajuns.

Dacă doriți, construiți actualizarea cache-ului în aplicația dvs. prin API-ul JavaScript; aceasta este dincolo de sfera de aplicare a acestui sfat rapid, dar dacă doriți să aflați mai multe, a verifica acest articol la html5rocks.com.


Suport pentru browser

Ca și multe alte caracteristici HTML5, Cache-ul de aplicații este suportat de toate browserele moderne.


Diagrama de la www.findmebyip.com

Și aceasta este Cache-ul de aplicații HTML5; este destul de cool și sunt sigur că va fi folosit de dezvoltatori, de aproape orice site, pentru a oferi o experiență grațios degradantă care îi ține pe utilizatori fericiți oriunde s-ar afla. Vă mulțumim pentru lectură!

Cod