Scripts

Auto Cache Manifest

Door Johan Dam -19-07-2010 15:10 -7.510 views

Yoo Laat ik met een korte uitleg beginnen voor het geval je niet bekend met met Application Cache, Met de 'Application Cache' feature is het mogelijk de browser dmv een cache manifest te vertellen welke bestanden jij wilt dat hij in de cache opslaat, waardoor de website zelfs offline te zien is. Er is echter 1 groot nadeel, als je een van de bestanden aanpast die in de cache manifest staat maar vergeet om je cache manifest zelf aan te passen, zal de browser denken dat alles goed is en dus niet de nieuwe pagina ophalen. Dit script genereert de cache manifest voor je en zal veranderen zodra er iets veranderd is zonder dat jij je daar druk over hoeft te maken. Hoe gebruik je dit? Je zet het script ergens neer, past de array met bestanden en uri's aan, en roept het script aan in de html tag Welke browsers ondersteunen dit? Alle browsers (Firefox, Safari, Chrome, Opera) behalve Internet Explorer, Internet explorer negeert de manifest attribute en zal dus niks cachen. (Met uitzondering van de normale cache) De bijgevoegde JS is ENKEL om te controleren of het allemaal werkt of niet. Het is af te raden om bijgevoegde javascript ergens anders te gebruiken dan in je test-omgeving, De JS kan je simpel includen met

Download alle bestanden als ZIP

auto_cache_manifest.php

<?php
function cache_manifest($f, $u, $ignore = false){
	if(!count($f) == count($u) && is_array($f) && is_array($u)){
		global $_cache_error;
		$_cache_error = "ERROR: De opgegeven array's zijn niet gelijk!<br />";
	}
	
	// verplichte eerste regel
	$manifest = 'CACHE MANIFEST' . PHP_EOL;
	$error = false;
	for($i = 0; $i < count($f); $i ++){
		if(is_file($f[$i])){
			// voeg bestandsnaam toe met een enter aan het einde
			// voeg daarna de md5-waarde van het bestand toe in commentaar (de # geeft commentaar aan), waarom?
			// een browser zal pas opnieuw gaan cachen als het manifest, dit dus, veranderd is.
			// het maakt niet uit of het bestand veranderd is. 
			// Als het bestand nu veranderd is, is de hash anders, dus de manifest is anders, dus het word opnieuw gecached.
			$manifest .= $u[$i] . PHP_EOL;
			$manifest .= "#" . md5_file($f[$i]) . PHP_EOL;
		} elseif(!$ignore){
			// bestandsnaam in de array bewaren
			$error .= $f[$i] . "<br />";
		}
	}
	
	if($error){
		// Er is een fout opgetreden, sla deze op in een globale variabele zodat deze later gelezen kan worden voor debug-doeleinden
		global $_cache_error;
		$_cache_error = "ERROR: De volgende bestanden bestaan niet!<br />(Om dit te onderdrukken kan je de 'ignore' parameter zetten)<br /><br />" . $error;
		return false;
	}
	
	return $manifest;
}

/*
wat je hier NIET in moet zetten;
	dynamische pagina's die veel veranderen.
	pagina's die per se internet nodig hebben, b.v. login.php.
	bestanden die niet bestaan, ik weet niet hoe een browser hier op reageerd maar het kan niet handig zijn.
	erg grote pagina's, de cache mag max 5MB zijn, das genoeg ruimte maar ga nou niet je online mp3 verzameling hierin zetten.

wat wel?
	javascript bestanden,
	afbeeldingen,
	informatie paginas,
	enz,
*/

// misschien wil je liever een readdir() functie gebruiken, het maakt niet uit zolang je maar een array krijgt gevuld met bestandsnamen (inclusief path!)
$files = array(
	"images/afbeelding.jpg",
	"javascript/script.js",
	"files/pagina.html",
);

$uri = array(
	"http://www.site.com/images/afbeelding.jpg",
	"http://www.site.com/javascript/script.js",
	"http://www.site.com/pagina/",
);

if($manifest = cache_manifest($files, $uri)){
	// mooi, niks fout gegaan, 
	// een cache manifest moet deze header hebben, alleen zetten als alles goed gegaan is.
	header("Content-Type: text/cache-manifest");
	echo $manifest;
} else {
	// Een (of meer) van de bestanden bestaat niet, laat de foutmelding zien zodat we (en ik bedoel 'jij') kunnen debuggen
	echo $_cache_error;
}

cache_manifest.js

[code]
try {
	var appCache = window.applicationCache;
	
	function handleCacheEvent(e){
		alert('Melding: ' + e);
	}
	
	function handleCacheError(e){
		alert('Error: ' + e);
	};
	
	// Fired after the first cache of the manifest.
	appCache.addEventListener('cached', handleCacheEvent, false);
	
	// Checking for an update. Always the first event fired in the sequence.
	appCache.addEventListener('checking', handleCacheEvent, false);
	
	// An update was found. The browser is fetching resources.
	appCache.addEventListener('downloading', handleCacheEvent, false);
	
	// The manifest returns 404 or 410, the download failed,
	// or the manifest changed while the download was in progress.
	appCache.addEventListener('error', handleCacheError, false);
	
	// Fired after the first download of the manifest.
	appCache.addEventListener('noupdate', handleCacheEvent, false);
	
	// Fired if the manifest file returns a 404 or 410.
	// This results in the application cache being deleted.
	appCache.addEventListener('obsolete', handleCacheEvent, false);
	
	// Fired for each resource listed in the manifest as it is being fetched.
	appCache.addEventListener('progress', handleCacheEvent, false);
	
	// Fired when the manifest resources have been newly redownloaded.
	appCache.addEventListener('updateready', handleCacheEvent, false);
} catch(e){
	alert("Geen applicationCache ondersteuning");
}
[/code]