HTML5 Application Cache

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

What is application caching?

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

Application caching brings three advantages to the app:

  1. Offline browsing - users can use them when the app is offline
  2. Speed - cached resources load faster
  3. Reducer server load - browsers will only download updated or changed resources from the server

Browserunderstøttelse

Tallene i tabellen indikerer den første browserversion, der fuldt ud understøtter applikationscaching.

API
Applikation Cache 4.0 10.0 3.5 4.0 11.5

HTML Cache Manifest Eksempel

Følgende eksempel viser et HTML-dokument med cache-manifest (til offline-browsing):

Eksempel

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

Prøv det selv

Cache Manifest Grundlæggende

For at aktivere applikationscaching skal du inkludere manifest-attributten i <html>-tagget i dokumentet:

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

Hver side, der har en manifest specificeret, caches, når brugeren besøger den. Hvis manifest-attributten ikke er specificeret, caches siden ikke (medmindre siden direkte specificeres i manifest-filen).

Manifest-filens anbefalede filudvidelse er: ".appcache".

Bemærk:Manifest-filen skal have den korrekte MIME-type, nemlig "text/cache-manifest" og skal konfigureres på webserveren.

Manifest-fil

Manifest-filen er en simpel tekstfil, der informerer browseren om, hvilke indhold der skal caches (og hvilket indhold der ikke skal caches).

Manifest-filen har tre dele:

  • CACHE MANIFEST - Filerne nævnt under denne titel caches efter første download
  • NETWORK - Filerne nævnt under denne titel kræver forbindelse til serveren og caches ikke
  • FALLBACK - Filerne nævnt under denne titel bestemmer hvilke tilbagefaldssider der skal vises, når siden ikke kan tilgås (f.eks. 404-sider)

CACHE MANIFEST

Første linje, CACHE MANIFEST, er obligatorisk:

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

Den ovenstående manifest-fil nævner tre ressourcer: en CSS-fil, en GIF-billede og en JavaScript-fil. Når manifest-filen er indlæst, downloader browseren disse tre filer fra hjemmesidens rodmappe. Derefter er disse ressourcer stadig tilgængelige, selvom brugeren afbryder forbindelsen til internettet.

NETWORK

NEDERSTÅENDE NETWORK-sektionen definerer filen "login.php" som aldrig skal caches og er utilgængelig offline:

NETWORK:
login.asp

You can use an asterisk to indicate that all other resources/files require an internet connection:

NETWORK:
*
FALLBACK

The FALLBACK section below specifies that if an internet connection cannot be established, "offline.html" will replace all files in the /html/ directory:

FALLBACK:
/html/ /offline.html

Note:The first URI is the resource, the second is the substitute.

Update Cache

Once an application is cached, it will remain cached until one of the following occurs:

  • User clears browser cache
  • Manifest file has been modified (see the tips below)
  • Application Cache Updated by Program

Example - Complete Cache Manifest File

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

Tip:Lines starting with "#" are comment lines, but can also serve other purposes. The application's cache will only be updated when its manifest file changes. If you edit an image or modify a JavaScript function, these changes will not be recached. Updating the date and version number in the comment line is a way to make the browser recache the files.

Considerations for Application Caching

Please be aware of the cached content.

Once a file is cached, the browser will continue to display the cached version even if you modify the file on the server. To ensure that the browser updates the cache, you need to update the manifest file.

Note:Browsers may have different limits on the capacity of cached data (some browsers limit each site to 5MB).