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 nås 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 användning (för avancerad användning):

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 dokumentets <html>-tagg:

!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 filändelsen för manifest-filen är: ".appcache".

Observera:Manifest-filen behöver korrekt MIME-type, dvs. "text/cache-manifest" och måste konfigureras på webbservern.

Manifest-fil

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

Manifest-filen har tre delar:

  • CACHE MANIFEST - I denna rubrik listade filer kommer att cachas efter första nedladdningen
  • NETWORK - I denna rubrik listade filer behöver en anslutning till servern och kommer inte att cachas
  • FALLBACK - I 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

Det 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, laddar webbläsaren dessa tre filer från webbplatsens rotkatalog. Därefter är dessa resurser fortfarande tillgängliga oavsett när användaren kopplar bort från internet.

NETWORK

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

NETWORK:
login.asp

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

NETWORK:
*
FALLBACK

Nedanstående FALLBACK-del anger att om det inte går att etablera 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 applikationen har cachats, kommer den att förbli i cachen tills följande inträffar:

  • Användaren tömmer webbläsarens cache
  • Manifestfilen 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 kommentarsrader, men kan också användas till andra ändamål. Applikationens cache uppdateras endast när dess manifestfil ändras. Om du redigerar en bild eller ändrar en JavaScript-funktion, kommer dessa ändringar inte att cachas igen. Att uppdatera datum och versionsnummer i kommentarsraderna är ett sätt att få webbläsaren att uppdatera cachen.

Viktiga punkter om applikationens cache

Vänligen uppmärksamma innehållet i cachen.

När en fil har cachats, kommer webbläsaren att fortsätta visa 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 manifestfilen.

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