funmachine

HTML5 – Aplicações Offline: AppCache

Deixe um comentário

Antes de começar este artigo, podem fazer download deste projecto. É uma simples aplicação HTML5 que funciona de modo offline e serve para poderem seguir o artigo. No entanto, não precisam de usar o projecto para perceber o que a seguir vamos falar, apenas serve como uma referência e é um ponto de partida para fazerem as vossas aplicações offline.

O que é a AppCache

AppCache é um mecanismo do HTML5 que permite que o programador indique explicitamente ao browser quais os recursos da sua aplicação web que devem ser guardados persistentemente em cache, de forma que a aplicação funcione mesmo sem acesso à internet, isto é, que funcione em modo offline.
O processo para tornar uma aplicação offline é na sua essência bastante simples:

  1. Criar um ficheiro manifest .appcache onde indicamos os recursos que devem ser mantidos na appcache.
  2. Certificarmos que o servidor consegue servir documentos do tipo .appcache
  3. Incluir um ficheiro .appcache em cada página da aplicação, usando o atributo manifest da tag html.

O ficheiro manifest

O ficheiro manifest deve conter então todos os recursos que queremos colocar em cache, segue um exemplo:

CACHE MANIFEST
# ficheiros a colocar em cache
script.js
style.css
img/logo.png

Neste caso indicamos ao browser que script.js, style.css e img/logo.png são recursos que queremos disponíveis offline.
Podemos no entanto indicar outro tipo de regras no ficheiro com os seguintes headers:
CACHE: ficheiros a colocar em cache
NETWORK: ficheiros que nunca devem ficar em cache. O browser lança um erro se tentar carregar estes ficheiros em modo offline.
FALLBACK: Que ficheiro carregar não caso o browser em modo offline não encontre a página na appcache.

Se não indicarmos nenhum header no ficheiro manifest, como o exemplo acima, é considerada uma secção explícita, isto é, o header CACHE.

Vejamos então o seguinte exemplo:
CACHE MANIFEST
CACHE:
script.js
style.css
img/logo.png

NETWORK:
check.php

FALLBACK:
/ /offline.html

Neste caso, acontece o seguinte:

  • script.js, style.css e img/logo.png são enviados para a appcache, e dessa forma, disponíveis offline.
  • O script check.php não fica em appcache, deve ser sempre carregado da rede.
  • Caso o browser não consiga carregar a página em modo offline, é mostrada a página offline.html. A “/” antes de offline faz com que qualquer URL pattern corresponda ao procurar o ficheiro offline.html.

Criar ficheiro appcache para uma aplicação estática é trivial, mas a maior parte das vezes queremos que estes sejam dinâmicos, ou seja, dependendo da página que estamos a servir, os recursos que queremos offline podem variar, e podem ser tantos (p.e. a pasta de imagens) que se torna demorado escrever este ficheiros à mão. Para isso existem algumas ferramentas que criam ficheiros .appcache de forma automática. Por exemplo, esta ferramenta cria o ficheiro manifest baseado na página que estámos a visualizar no browser.

Adicionar o ficheiro manifest

Depois de criar o ficheiro manifest precisamos incluir em cada página que quisermos servir. Isto é importante, não podemos simplesmente incluir o manifest na nossa “Home Page” e não incluir nas restantes, pois nesse caso apenas a “Home Page” ficava em cache.
Para incluir o ficheiro manifest numa página, inserimos o seguinte na tag html da página:
<html manifest=”app.appcache”>

Servir ficheiros manifest

Agora precisamos por fim certificar que o nosso servidor consegue servir estes ficheiros com extensão .appcache. Uma forma simples de o fazer é criar um ficheiro .htaccess e adicionar a seguinte linha:

AddType text/cache-manifest .appcache

E é isto, agora o nosso servidor Apache consegue servir ficheiros .appcache. Atenção que se não se certificarem que os ficheiros .appcache estão a ser servidos, a nossa aplicação nunca vai funcionar offline.

Testar aplicações offline pode tornar-se frustrante porque assim que o browser coloca recursos em cache, eles não voltam a ser carregar do servidor, mesmo em modo online.
Existem apenas três caso em que browser tenta carregar novamente recursos que estão em cache:

  1. O utilizador limpou a cache.
  2. O ficheiro manifest foi alterado.
  3. A cache foi alterada via javascript.

Portanto, já testar alterações nos ficheiros em cache existe uma solução simples, alterar o ficheiro manifest! Basta uma pequena alteração como adicionar/editar um comentário.

 

 

AppCache Debug

Existem algumas formas para fazer debug da appcache:
No chrome, utilizar o “Resources Panel”, lá encontram informação sobre o estado da Application Cache.

No chrome, navegar até chrome://appcache-internals/, podemos então ver quais as aplicações que estão a utilizar appcache e até remover da cache.

No entanto fazer debug da appcache não é fácil, os recursos são muito limitado.
Existem também problemas com a appcache em si. Tem uma API muito limitada que não permite fazer muito, não existe forma, por exemplo, de saber se determinado recurso que estamos a trabalhar está em cache ou não, assim como não existe forma de limpar a cache programaticamente.
A appcache tem uma natureza transacional, isto é, ou está completamente carregada ou completamente vazia, desta forma é impossível parar o download e resumir, não existe controlo sobre o estado do download do recursos.
Outro problema é o facto de se utilizar um ficheiro manifest por página, sendo impossível criar grupos de recursos para colocar em appcache. (Existem alguns hacks no entanto, usando iframes)

Existe ainda muito mais para falar sobre appcache, como alterar a cache com javascript ou detectar suporte appcache nos browsers, mas para já ficamos por esta introdução base. Assim que houver mais assuntos para falar este artigos será actualizado!

Para testarem um exemplo podem fazer download deste projecto.

Anúncios

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s