HTML5 applikationens cache

Med applikationens cache kan du let oprette en offline-version af web-applikationen ved at oprette en cache-manifest-fil.

Hvad er applikationens cache?

HTML5 har introduceret applikationens cache (Application Cache), hvilket betyder, at web-applikationer kan caches og kan tilgås uden internetforbindelse.

Applikationens cache bringer tre fordele til applikationen:

  1. Offline-browsing - brugere kan bruge dem, når applikationen er offline
  2. Hastighed - Allerede cachede ressourcer indlæses hurtigere
  3. Reducere serverbelastning - browseren vil kun downloade opdaterede eller ændrede ressourcer fra serveren

Browserunderstøttelse

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

API
Application 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, caches når brugeren besøger den. Hvis manifest-attributten ikke er specificeret, caches siden ikke (medmindre siden direkte specificeres i manifest-filen).

Anbefalet filudvidelse for manifest-filen 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 definerer tilbagefaldssider (f.eks. 404-sider) når siden ikke kan tilgås

CACHE MANIFEST

Første linje, CACHE MANIFEST, er obligatorisk:

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

Den ovenstående manifest-fil opsummerer 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. Herefter er disse ressourcer stadig tilgængelige, uanset når 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, use "offline.html" to replace all files in the /html/ directory:

FALLBACK:
/html/ /offline.html

Note:The first URI is the resource, and 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
  • The manifest file has been modified (see the tips below)
  • Updating Application Cache 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 they 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 re-cached. Updating the date and version number in the comment line is a way to make the browser re-cache the files.

Considerations about Application Caching

Please note the content of the cache.

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).