Com cache do aplicativo é fácil fazer uma versão offline de uma aplicação web, através da criação de um arquivo de manifesto de cache.
O que é Application Cache?
HTML5 introduz cache do aplicativo, o que significa que uma aplicação web é armazenada em cache, e acessível sem uma conexão à internet.
cache de aplicativo dá uma aplicação três vantagens:
- Navegação off-line - os usuários podem usar o aplicativo quando estiver offline
- Velocidade - em cache recursos carregar mais rápido
- Reduziu a carga do servidor - o navegador só irá baixar atualizados / recursos mudaram a partir do servidor
fundo
aplicações web consistem em páginas da web que precisam ser baixado a partir de uma rede. Para que isso aconteça, deve haver uma conexão de rede. No entanto, existem muitos casos em que os usuários não podem se conectar a uma rede devido a circunstâncias além de seu controle. HTML5 fornece a capacidade de acessar o aplicativo web, mesmo sem uma conexão de rede usando o manifesto cache.
aplicações web consistem em recursos identificados por URLs. Estes podem ser HTML, CSS, JavaScript, imagens ou qualquer outra fonte que é necessário para uma aplicação Web para ser processado. Seus endereços pode ser copiado para um arquivo de manifesto, que pode ser atualizado regularmente pelo autor do aplicativo web, indicando quaisquer novos endereços da web que são adicionados ou excluídos. Ao se conectar a uma rede pela primeira vez, um navegador web irá ler o arquivo de manifesto HTML5, baixar os recursos dados e armazená-los localmente. Então, na ausência de uma conexão de rede, o navegador web se deslocará para as cópias locais vez e tornar a aplicação offline web.
Suporte navegador
Os números na tabela especificar a primeira versão do navegador que suporta totalmente cache do aplicativo.
| API | |||||
|---|---|---|---|---|---|
| Application Cache | 4.0 | 10.0 | 3,5 | 4.0 | 11,5 |
HTML cache Manifest Exemplo
O exemplo abaixo mostra um documento HTML com um manifesto de cache (for offline browsing) :
Exemplo
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html> Tente você mesmo " Cache Manifest Basics
Para que as aplicações offline para trabalhar, um arquivo de manifesto de cache deve ser criado pelo desenvolvedor web. Se a aplicação web ultrapassa mais de uma página, em seguida, cada página deve ter um atributo manifesto que aponta para o manifesto de cache. Cada página referenciando o manifesto serão armazenados localmente. O arquivo de manifesto de cache é um arquivo de texto localizada em outra parte do servidor. Deve ser servido com o tipo de conteúdo que se segue:
text/cache-manifest
Para habilitar o cache do aplicativo, incluir o manifest atributo no documento <html> tag:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
Cada página com o manifest atributo especificado serão armazenados em cache quando o usuário visita. Se o manifest atributo não for especificado, a página não serão armazenados em cache (unless the page is specified directly in the manifest file) .
A extensão de arquivo recomendado para arquivos de manifesto é: ".appcache"
Um arquivo de manifesto precisa ser servido com o correct media type , que é "text/cache-manifest" . Deve ser configurado no servidor web.
O arquivo de manifesto
O arquivo de manifesto é um arquivo de texto simples, que informa ao navegador o que para armazenar em cache (and what to never cache) .
O arquivo de manifesto tem três secções:
- CACHE MANIFEST - Arquivos listados nesta cabeçalho irá ser armazenado em cache após o download pela primeira vez
- NETWORK - arquivos listados sob este cabeçalho requerem uma conexão com o servidor, e nunca serão armazenados em cache
- FALLBACK - arquivos listados sob esse cabeçalho especifica páginas fallback se uma página é inacessível
CACHE MANIFEST
A primeira linha, CACHE MANIFEST, é necessário:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
O arquivo de manifesto acima enumera três recursos: um arquivo CSS, uma imagem GIF, e um arquivo JavaScript. Quando o arquivo de manifesto é carregado, o navegador irá baixar os três arquivos a partir do diretório raiz do site. Então, sempre que o usuário não está conectado à Internet, os recursos ainda estará disponível.
REDE
A seção NETWORK abaixo especifica que o arquivo "login.asp" nunca deve ser armazenado em cache, e não estarão disponíveis offline:
NETWORK:
login.asp
Um asterisco pode ser usado para indicar que todos os outros recursos / arquivos requerem uma conexão com a internet:
NETWORK:
*
CAIR PRA TRÁS
A seção FALLBACK abaixo especifica que "offline.html" será servido no lugar de todos os arquivos no diretório / html / catálogo, no caso de uma conexão com a internet não pode ser estabelecida:
FALLBACK:
/html/ /offline.html
Nota: O primeiro URI é o recurso, o segundo é o fallback.
Atualizando o cache
Depois que um aplicativo é armazenada em cache, ele permanece em cache até que uma das seguintes situações:
- O usuário limpar o cache do navegador
- O arquivo de manifesto é modificado (see tip below)
- O cache de aplicativo de programação é atualizada
Exemplo - cache completo arquivo de manifesto
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html
Tip: As linhas que começam com um "#" são linhas de comentário, mas também pode servir outra finalidade. de cache de um aplicativo só é atualizado quando suas mudanças arquivo de manifesto. Se você editar uma imagem ou alterar uma função JavaScript, essas alterações não serão re-cache. Atualizando a data ea versão em uma linha de comentário é uma maneira de tornar o navegador re-cache seus arquivos.
Notas sobre cache de aplicativos
Tenha cuidado com o que você armazenar em cache.
Uma vez que um arquivo é armazenado em cache, o navegador continuará a mostrar a versão em cache, mesmo se você alterar o arquivo no servidor. Para garantir o navegador atualiza o cache, você precisa alterar o arquivo de manifesto.
Nota: Os navegadores podem ter limites de tamanho diferentes para dados em cache (some browsers have a 5MB limit per site) .