HTML5 applikationens cache

Med applikationens cache kan du enkelt skapa en offline-version av en webbapplikation genom att skapa en cache-manifestfil.

Vad är applikationens cache?

HTML5 introducerade applikationens cache (Application Cache), vilket innebär att webbapplikationer kan cachas och åtkommas utan internetanslutning.

Applikationens cache ger tre fördelar för applikationen:

  1. Offline-bläddring - Användare kan använda dem när applikationen är offline
  2. Hastighet - Cachade resurser laddas snabbare
  3. Minska serverns belastning - webbläsaren laddar endast uppdaterade eller ändrade resurser från servern

Webbläsarstöd

Numrerna i tabellen indikerar den första webbläsarversionen som fullständigt stöder applikationscachning.

API
Applikation Cachning 4.0 10.0 3.5 4.0 11.5

HTML Cache Manifest Exempel

Nedan visas ett HTML-dokument med cache-manifest för avancerad offline-läsning:

Exempel

!DOCTYPE HTML
<html manifest="demo.appcache">
<body>
Dokumentinnehåll ...
</body>
</html>

Prova själv

Cache Manifest Grund

För att aktivera applikationscachning, inkludera manifest-attributet i <html>-taggen i dokumentet:

!DOCTYPE HTML
<html manifest="demo.appcache">
...
</html>

Varje sida som specificerar en manifest cachas när användaren besöker den. Om manifest-attributet inte är specificerat, cachas sidan inte (utom om sidan direkt specificeras i manifest-filen).

Det rekommenderade filnamnsändelsen för manifest-filen är: ".appcache".

Observera:Manifest-filen måste ha rätt MIME-type, dvs. "text/cache-manifest". Det måste konfigureras på webbservern.

Manifest-fil

Manifest-filen är en enkel textfil som informerar webbläsaren om vilket innehåll som ska cachas (och vilket som inte ska cachas).

Manifest-filen har tre delar:

  • CACHE MANIFEST - Under denna rubrik listade filer kommer att cachas efter första nedladdningen
  • NETWORK - Under denna rubrik listade filer behöver en anslutning till servern och kommer inte att cachas
  • FALLBACK - Under denna rubrik listade filer specificerar vilka sidor som används som fallback när sidan inte kan nås (t.ex. 404-sidor)

CACHE MANIFEST

Första raden, CACHE MANIFEST, är nödvändig:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

Översta manifest-filen listar tre resurser: en CSS-fil, en GIF-bild och en JavaScript-fil. När manifest-filen laddas ner, hämtar webbläsaren dessa tre filer från webbplatsens rotkatalog. Därefter är dessa resurser fortfarande tillgängliga, oavsett när användaren kopplas från internet.

NETWORK

Nedanstående NETWORK-del bestämmer att filen "login.php" aldrig kommer att cachas och är inte tillgänglig när man är offline:

NETWORK:
login.asp

Man kan använda stjärnan för att indikera att alla andra resurser/filer behöver en internetanslutning:

NETWORK:
*
FALLBACK

FALLBACK-delarna nedan specificerar att om det inte kan etableras en internetanslutning, används "offline.html" för att ersätta alla filer i katalogen /html/:

FALLBACK:
/html/ /offline.html

Kommentar:Den första URI:en är resursen, den andra är alternativet.

Uppdatera cache

När en applikation har cachats, kommer den att förbli i cachen tills följande inträffar:

  • Användaren tömmer webbläsarens cache
  • Manifest-filen har ändrats (se nedanstående tips)
  • Uppdatera applikationens cache med programvara

Exempel - Fullständig Cache Manifest-fil

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html

Tips:Rader som börjar med '#' är kommentarlinjer, men kan också användas till andra ändamål. Applikationens cache uppdateras endast när dess manifest-fil ändras. Om du redigerar en bild eller ändrar en JavaScript-funktion, kommer dessa ändringar inte att cachas igen. Att uppdatera datum och versionsnummer i kommentarlinjerna är ett sätt att få webbläsaren att uppdatera cachen.

Några saker att tänka på angående applikationens cache

Observera innehållet i cachen.

När en fil har cachats, visar webbläsaren fortfarande den cachade versionen, även om du ändrar filen på servern. För att säkerställa att webbläsaren uppdaterar cachen behöver du uppdatera manifest-filen.

Kommentar:Webbläsarens kapacitetsbegränsningar för cachade data kan variera (vissa webbläsare begränsar varje webbplats till 5MB).