Tudo em torno do HTML5 é muito promissor e excitante.
Umas das coisas que acho mais legal é a possibilidade “Offline”.
Estranho pensar nisso logo em 2011, com a evolução que temos, com cada vez mais serviços na Internet, Cloud, etc., não é?
A resposta é NÃO.
HTML5 Offline é muito mais do que apenas trabalhar Offline, são várias possibilidades que antes só eram possíveis com workarounds, ou impossíveis.
Hoje vou falar sobre uma dessas possibilidades: o AppCache.
| Chrome | Firefox | Safari | Opera | IE | iOS Safari | Android | Opera Mini | Opera Mobile |
|---|---|---|---|---|---|---|---|---|
| Data courtesy of caniuse.com and Chrome Platform Status | ||||||||
| 4+ | 4+ | 4+ | 11+ | 10 | 5+ | 3+ | — | 11+ |
Esta é a tabela de compatibilidade dos Browsers.
Ou seja, já é possível, desenvolver aplicações web utilizando esta feature.
E notem que os principais browsers mobile também estão na lista.
Sobre o IE, bom… somente na versão 10. Mas nem perderei tempo falando sobre isso.
- Um arquivo manifest
Precisamos entregar um arquivo com o MIME type text/cache-manifest
Por convenção, a extenção do arquivo é .appcache
O manifest tem 3 seções opcionais:
CACHE – Todos os arquivos que devem ser armazenados no cache
NETWORK – Todas URLs que precisam ser acessadas pela Internet
FALLBACK – Lista de URLs que devem ser usadas caso a Internet esteja indisponível - Um atributo na tag HTML
Na tag <html> basta indicar onde esta o seu manifest:
<html manifest=”manifest.appcache”> - Um pouco de JavaScript
Temos um objeto para tratar o cache, ele é o window.applicationCache
Com este objeto é possível monitorar o estado do cache
Eventos: cached,checking,downloading,error,noupdate,obsolete,progress,updateready
* Os arquivos listados no manifest não estão sobre a regra de same origin policy, ou seja, podemos listar URLs Crossdomain.
Mas… isso não vale para SSL, ou seja, se estiver utilizando HTTPS, os arquivos listados no manifest devem obedecer a regra same origin policy.
Mas… O Google Chrome ignora esta especificação, ou seja, independente de estar utilizando SSL ou não, é possível adicionar URLs Cross-Domain.
* O Browser só irá atualizar o cache caso o manifest tenha sido modificado.
Por convenção, utiliza-se um comentário com a versão no manifest.
Detalhe importante:
Após a detecção de que o cache deve ser atualizado, o browser precisa buscar os novos arquivos.
Ou seja, o usuário precisa atualizar a página 2 vezes.
Para isso, se utiliza uma técnica JavaScript que detecta se existe uma nova versão, e então decide se quer baixar esta nova versão.
&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt; // Check if a new cache is available on page load.&lt;br /&gt;window.addEventListener('load', function(e) {&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt; window.applicationCache.addEventListener('updateready', function(e) {&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt; if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt; // Browser downloaded a new app cache.&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt; // Swap it in and reload the page to get the new hotness.&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt; window.applicationCache.swapCache();&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt; if (confirm('A new version of this site is available. Load it?')) {&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt; window.location.reload();&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt; }&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt; } else {&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt; // Manifest didn't changed. Nothing new to server.&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt; }&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt; }, false);&lt;br /&gt;&lt;br /&gt;}, false);&lt;br /&gt;&lt;br /&gt;
* A página onde esta definido que a aplicação utilizará o manifest, mesmo não estando listada no manifest, será armazenada no cache.
Isso pode gerar alguns problemas, dependendo do tipo de cache sua aplicação precisa. Para isso, existe na especificação uma regra que diz que arquivos com a diretiva “no-store” definida no HEADER http sobrescreverá o cache local.
(Obrigado ao @miketaylr que me passou essa especificação)
Offline eh mto foda!!! Otimo artigo!
Coloca o link da tua palestra sobre Storage aqui para quem quiser se aventurar mais um pouco.
Seria um ótimo assunto para a desconferencia né?
Verdade, esse assunto rende muito, é uma mar de novidades.
Com certeza é muito bom, mas cuidado na hora de utilizar isso junto com o mod de apache do Pagespeed, da uma zica desgraçada com arquivos cacheados, principalmente os css e js.
Tudo ainda é muito novo, e isso é o mais legal.
Enfrentei varios problemas ao utilizar o AppCache, mas a grande dificuldade é realmente o “novo”.
Ja existe bastante material para pesquisa, mas nao se compara com o que estamos acostumados.