HTML5 Application Cache

Bom dia galera, hoje estava aqui pesquisando de como fazer o cache das páginas do site e descobri sobre o HTML5 Application Cache. Mas como que ele funciona?

Simples, na sua TAG HTML você coloca o atributo manifest

 <html manifest="site.appcache">  

O exemplo acima se ele estiver na mesma pasta do arquivo HTML ou pode ser também requisitado para uma URL, mas este segundo precisa que a URL seja do mesmo domínio.

 <html manifest="http://www.example.com/example.mf">  

Sendo a sua estrutura da seguinte forma.

CACHE MANIFEST

  • Primeirva linha obrigatória, que indica que o arquivo é um manifesto


CACHE:

  • É a seção padrão para entradas. Os arquivos listados sob esse cabeçalho (ou imediatamente após CACHE MANIFEST) serão explicitamente armazenados em cache após o primeiro download.


NETWORK:

  • Os arquivos listados nessa seção são recursos seguros que necessitam de conexão com o servidor. Todas as solicitações para esses recursos ignoram o cache, mesmo que o usuário esteja off-line. Podem ser usados caracteres curingas.


FALLBACK:

  • Uma seção opcional que especifica páginas substitutas caso um recurso não possa ser acessado. O primeiro URI é o recurso; o segundo é o substituto. Os dois URIs devem ser relativos e ter a mesma origem do arquivo de manifesto. Podem ser usados caracteres curingas.
Para melhor entendimento segue um exemplo de um arquivo:

 CACHE MANIFEST  
 # 2014-10-17:v1  
 # Informa os arquivos que ficarão em cache.  
 CACHE:  
 /favicon.ico  
 index.html  
 stylesheet.css  
 images/logo.png  
 scripts/main.js  
 # Páginas que necessitam que o usuário esteja online.  
 NETWORK:  
 login.php  
 http://api.twitter.com  
 # Se o arquivo main.py estiver inacessível o estatico.html irá ser carregado no lugar dele  
 # Se alguma imagem do caminho images/large estiver inacessível a imagemoffline.jpg irá ser carregado no lugar  
 # offline.html substituirá qualquer outro arquivo com extenção .html  
 FALLBACK:  
 /main.py /estatico.html  
 images/large/ images/offline.jpg  
 *.html /offline.html  

O simbolo "#" indica comentário e para atualizar os arquivos do cache basta alterar este arquivo, uma boa práticas que eles usam como mostrado no exemplo é adicionar a data e a versão logo abaixo do "CACHE MANIFEST", pois só trocando a versão quando fizer outra requisição ele já atualiza os arquivos.

Acrescente no .htaccess a configuração: "AddType text/cache-manifest .appcache" se estiver utilizando o APACHE.

E também nunca faça cache do manifesto, pois se não nunca será atualizado o site.

É isso ai galera, espero que tenha sido útil para vocês, assim como foi para mim, se poder compartilha e da um +1 ai, comenta ai, abração e até logo.

FONTES: http://www.html5rocks.com/pt/tutorials/appcache/beginner/ e http://sergiolopes.org/palestra-appcache-html5-offline/

Comentários

Postagens mais visitadas deste blog

Utilizando o Gulp para facilitar seu desenvolvimento front-end

Teclas de atalho(accesskey) no HTML5

Usando o gulp para fazer o deploy da sua aplicação