Met de introductie van HTML 5 is het ook mogelijk om bestanden offline op te slaan.

 

Om offline caching toe te passen moet een manifest attribuut aan de html tag toegevoegd worden.



...

 

Structuur en voorbeeld manifest bestand

CACHE MANIFEST

CACHE:
index.html
stylesheet.css
javascript.js

NETWORK:
login.php

FALLBACK:
images/large/ images/offline.jpg

 

CACHE MANIFEST:

Deze moet altijd bovenaan op de eerste regel in de manifest te staan.

 

CACHE:

Hier staan de bestanden welke offline opgeslagen dienen te worden.

 

NETWORK:

Deze bestanden mogen alleen aangeroepen worden wanneer de gebruiker online is.

 

FALLBACK:

Als een bestand/map niet bereikbaar is zal een gespecificeerd bestand weergegeven worden. In het voorbeeld hierboven zou offline.jpg worden weergegeven wanneer de map images/large niet beschikbaar is.

 

Cache status


De status van de cache is te bereiken met window.applicationCache.status.

var appCache = window.applicationCache;

switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return ’UNCACHED’;
break;
case appCache.IDLE: // IDLE == 1
return ’IDLE’;
break;
case appCache.CHECKING: // CHECKING == 2
return ’CHECKING’;
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return ’DOWNLOADING’;
break;
case appCache.UPDATEREADY:  // UPDATEREADY == 4
return ’UPDATEREADY’;
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return ’OBSOLETE’;
break;
default:
return ’UKNOWN CACHE STATUS’;
break;
};

 

Appcache events

function handleCacheEvent(e) {
//...
}

function handleCacheError(e) {
alert(’Error’);
};

// Getriggerd wanneer bestanden gecached zijn
appCache.addEventListener(’cached’, handleCacheEvent, false);

// Bekijkt of dat er nieuwe bestanden zijn
appCache.addEventListener(’checking’, handleCacheEvent, false);

// Update van bestanden is gevonden
appCache.addEventListener(’downloading’, handleCacheEvent, false);

// Manifest retourneerd 404 of 410, cache mislukt
appCache.addEventListener(’error’, handleCacheError, false);

// Getriggerd na de eerste download van manifest
appCache.addEventListener(’noupdate’, handleCacheEvent, false);

// Getriggerd wanneer manifest een 404 of 410 code terug stuurt
// Offline bestanden worden verwijderd
appCache.addEventListener(’obsolete’, handleCacheEvent, false);

// Bezig met cachen van van bestanden
appCache.addEventListener(’progress’, handleCacheEvent, false);

// Word getriggerd wanneer offline bestanden opnieuw gedownload zijn
appCache.addEventListener(’updateready’, handleCacheEvent, false);

Kijk op http://www.whatwg.org/specs/web-apps/current-work/#applicationcache voor een volledig overzicht van de mogelijkheden met applicationCache.

Bent u nieuwsgierig, of wilt u meer weten?

Neem contact met ons op of vraag geheel vrijblijvend een offerte aanOfferte

Volg ons op social media: