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
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.
Sendo a sua estrutura da seguinte forma.
CACHE MANIFEST
CACHE:
NETWORK:
FALLBACK:
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/
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
Postar um comentário