Offline toegang krijgen met HTML5-applicatie

Net toen je dacht dat je alle leuke functies van HTML5 had gezien, ben ik er om je nog een andere te bieden. Het internet gaat niet langer alleen over websites; het gaat over webapplicaties. Onze gebruikers zijn vaak op draagbare of mobiele apparaten en hebben niet altijd toegang tot een netwerk. Met de toepassingscache van HTML5 kunt u hen voorzien van alle of een deel van de functionaliteit die ze online zouden hebben, waar ze ook naartoe gaan.


Volledige screencast



Stap 1: Maak het Cache-manifest

De truc hier is het gebruiken van een cache manifest-bestand. In de meest eenvoudige vorm is het ongelooflijk eenvoudig:

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

Stap 2: Serveer het gemanifesteerde goed

Dit bestand moet worden bediend met een header van het inhoudstype van text / cache-manifest; het is heel eenvoudig om dit te doen met een .htaccess-bestand:

 AddType tekst / cache-manifest manifest

Dit zal alle bestanden bedienen met een extensie van "manifest" met de juiste header van het content-type.


Stap 3: Haak de Manifest in

Als u het cachemanifestbestand wilt gebruiken, voegt u eenvoudig een eigenschap toe aan de html element:

   

De volgende keer dat een gebruiker uw site / app bezoekt, slaat hun browser de vereiste bestanden in de cache op. Het is zo makkelijk. Als ze naar uw URL bladeren wanneer ze offline zijn, krijgen ze de inhoud in de cache.


Waarschuwing: De cache vernieuwen

Het is belangrijk om te weten dat zelfs als de gebruiker online is, de browser alleen in drie gevallen naar de server gaat om nieuwe inhoud te krijgen:

  1. De gebruiker wist zijn cache (uiteraard het verwijderen van uw inhoud).
  2. Het manifestbestand verandert.
  3. De cache wordt bijgewerkt via JavaScript

Dus om al uw gebruikers te dwingen hun cache opnieuw te laden, kunt u iets in het manifestbestand wijzigen (niet de bestanden waarnaar is gelinkt, de daadwerkelijke inhoud van het manifestbestand). Meestal wilt u waarschijnlijk een opmerking wijzigen en dat is voldoende.

Als u dat wilt, bouw dan cache-updates bij in uw app via de JavaScript-API; dat is buiten het bereik van deze snelle tip, maar als je meer wilt weten, lees dan dit artikel op html5rocks.com.


Browserondersteuning

Net als veel andere HTML5-functies wordt de Application Cache ondersteund door alle moderne browsers.


Grafiek van www.findmebyip.com

En dat is de Application Cache van HTML5; het is best gaaf en ik weet zeker dat het door ontwikkelaars, van bijna elke site, zal worden gebruikt om een ​​sierlijk vernederende ervaring te bieden die hun gebruikers tevreden houdt, waar ze ook zijn. Bedankt voor het lezen!