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 introduces Application Cache, which means web applications can be cached and accessed without an internet connection.

Application caching brings three advantages to the application:

  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

Browserondersteuning

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 uit

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 gecached wanneer de gebruiker deze bezoekt. Als de manifest-eigenschap niet is gespecificeerd, wordt de pagina niet gecached (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 gecachte inhoud (en de inhoud die niet wordt gecached).

Het manifest-bestand heeft drie delen:

  • CACHE MANIFEST - Onder deze titel worden de bestanden vermeld die na de eerste download worden gecached
  • NETWORK - Onder deze titel worden de bestanden vermeld die een verbinding met de server vereisen en niet worden gecached
  • FALLBACK - Onder deze titel worden de bestanden vermeld die de fallback-pagina's (bijvoorbeeld de 404-pagina) bepalen wanneer de pagina niet bereikbaar is

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. Wanneer het manifest-bestand wordt geladen, downloadt de browser deze drie bestanden uit de rootmap van de website. Vervolgens zijn deze bronnen nog steeds beschikbaar, zelfs als de gebruiker de verbinding met het internet verliest.

NETWORK

Het NETWORK-deel van de specificatie bepaalt dat het bestand "login.php" nooit wordt gecached 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规定 als er geen internetverbinding kan worden opgezet, vervangt "offline.html" alle bestanden in de /html/ map:

FALLBACK:
/html/ /offline.html

Opmerking:De eerste URI is de bron, de tweede is de vervanger.

Cache bijwerken

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

  • Gebruiker leegt browsercache
  • Manifest-bestand is gewijzigd (zie onderstaande tip)
  • Applicatiecache bijwerken door programma

Voorbeeld - Volledig 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 annotatieën, 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 opgeslagen in de cache. Het bijwerken van de datum en versienummer in de annotatie-regels is een manier om de browser te laten hercachen van de bestanden.

Opmerkingen over applicatiecaching

Let op de inhoud van de cache.

Zodra een bestand in de cache is opgeslagen, zal de browser voortdurend de opgeslagen versie weergeven, 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 capaciteit van de browser om gegevens op te slaan in de cache kan variëren (de beperking van sommige browsers is 5MB per site).