Capítulo 10

Application cache

Para efeito de demonstração, está página estará disponível offline sem as estilizações padrão.
Será aplicado um fundo preto com textos em branco.

JavaScript

<script>
if (!Modernizr.applicationcache) {alert('Lamento, seu navegador não suporta navegação offline')}	
var appCache = window.applicationCache;
	window.addEventListener('load', function(e) {
		appCache.addEventListener('updateready', function(e) {
			if (appCache.status == appCache.UPDATEREADY) {
				appCache.swapCache();
			if (confirm('Existem atualizações para este site. Deseja carregar as atualizações?') {
				window.location.reload();
			}
			} else {
      	alert('Você optou por usar arquivos desatualizados neste site.')
		}
	}, false);
}, false)
</script>

CSS

body {
	background-color:black;
	color:white;
	}

HTML

<!DOCTYPE html>
<html manifest="exemplo.manifest" lang="pt-br">
<head>
<meta charset="utf-8">
<title>Livro HTML5 do Maujor</title>
<link href="../estilos/main.css" rel="stylesheet" type="text/css">
<!-- code highlighter -->
... 
<!-- fim code highlighter -->
</head>
<body>
<div id="tudo">
	<header>
		<h1>Capítulo 10</h1>
		<h2>Application cache</h2>
	</header>
	<section>
		...
	</section>
	<footer>
	...
</footer>
</div>
</body>
</html>

MANIFESTO

CACHE MANIFEST
#05/04/2011:v1

CACHE:
index.html
offline.css

NETWORK:
../estilos/main.css 

FALLBACK:
../estilos/main.css offline.css;