HTML5 Application Cache

With Application Cache, you can easily create an offline version of a web application by creating a cache manifest file.

What is Application Cache?

HTML5 introduced Application Cache, which means web applications can be cached and accessed without an internet connection.

Application caching brings three advantages to applications:

  1. Offline browsing - Users can use them when the app is offline
  2. Speed - Cached resources load faster
  3. Reduce server load - Browsers will only download updated or changed resources from the server

Browser ondersteuning

De cijfers in de tabel wijzen op de eerste browserversie die de applicatiecache volledig ondersteunt.

API
Application Cache 4.0 10.0 3.5 4.0 11.5

HTML Cache Manifest voorbeeld

Het volgende voorbeeld toont een HTML-document met een cache-manifest (voor offline-browsing):

Voorbeeld

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

Probeer het zelf

Cache Manifest basis

Om de applicatiecache in te schakelen, bevat u de manifest-eigenschap in het <html>-tag van het document:

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

Elke pagina die een manifest heeft, wordt opgeslagen in de cache wanneer de gebruiker deze bezoekt. Als de manifest-eigenschap niet is gespecificeerd, wordt de pagina niet opgeslagen in de cache (tenzij de pagina direct in het manifest-bestand is gespecificeerd).

De aanbevolen bestandsextensie voor het manifest-bestand is: ".appcache".

Let op:Het manifest-bestand moet de juiste MIME-type instellen, namelijk "text/cache-manifest". Dit moet worden geconfigureerd op de webserver.

Manifest bestand

Het manifest-bestand is een eenvoudig tekstbestand dat de browser informeert over de inhoud die wordt opgeslagen in de cache (en de inhoud die niet wordt opgeslagen).

Het manifest-bestand heeft drie delen:

  • CACHE MANIFEST - Onder deze titel vermelde bestanden worden na de eerste download opgeslagen in de cache
  • NETWORK - Onder deze titel vermelde bestanden vereisen een verbinding met de server en worden niet in de cache opgeslagen
  • FALLBACK - Onder deze titel vermelde bestanden bepalen de fallback-pagina's wanneer de pagina niet toegankelijk is (bijvoorbeeld een 404-pagina)

CACHE MANIFEST

De eerste regel, CACHE MANIFEST, is vereist:

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

Het manifest-bestand vermeldt drie bronnen: een CSS-bestand, een GIF-afbeelding en een JavaScript-bestand. Na het laden van het manifest-bestand, downloadt de browser deze drie bestanden uit de rootmap van de website. Vervolgens zijn deze bronnen beschikbaar, zelfs als de gebruiker de verbinding met het internet verliest.

NETWORK

Het NETWORK-deel bepaalt dat het bestand "login.php" nooit in de cache wordt opgeslagen en offline niet beschikbaar is:

NETWORK:
login.asp

U kunt een ster gebruiken om aan te geven dat alle andere bronnen/Bestanden een internetverbinding vereisen:

NETWORK:
*
FALLBACK

De onderstaande FALLBACK sectie bepaalt dat alle bestanden in de /html/ map worden vervangen door 'offline.html' als er geen internetverbinding kan worden opgezet:

FALLBACK:
/html/ /offline.html

Opmerking:De eerste URI is de bron, de tweede is het alternatief.

Cache bijwerken

Zodra de applicatie is gecached, blijft deze gecached totdat een van de volgende situaties optreedt:

  • Gebruiker leegt browsercache
  • manifest-bestand is bijgewerkt (zie de tips hieronder)
  • Applicatiecache bijwerken door programma

Voorbeeld - Volledige Cache Manifest bestand

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

Tip:Regels die beginnen met '#' zijn opmerkingregels, maar kunnen ook andere doeleinden vervullen. De cache van de applicatie wordt alleen bijgewerkt als het manifest-bestand verandert. Als u een afbeelding bewerkt of een JavaScript-functie wijzigt, worden deze wijzigingen niet opnieuw gecached. Het bijwerken van de datum en versienummer in de opmerkingregels is een manier om de browser te laten hercachen van de bestanden.

Opmerkingen over applicatiecaching

Let op de gecachte inhoud.

Zodra een bestand is gecached, zal de browser doorgaan met het weergeven van de gecachte versie, zelfs als u bestanden op de server hebt gewijzigd. Om ervoor te zorgen dat de browser de cache bijwerkt, moet u het manifest-bestand bijwerken.

Opmerking:De limiet van de browser voor de capaciteit van gecachte gegevens kan variëren (de limiet van sommige browsers is 5MB per site).