Latest web development tutorials

HTML5 cache de aplicativos

Use HTML5, através da criação de um arquivo de manifesto cache, você pode facilmente criar versões offline de aplicações web.

Qual é o cache de aplicações (Application Cache)?

HTML5 introduz cache do aplicativo, o que significa que os aplicativos da web podem ser armazenadas em cache, e pode ser acessado sem uma conexão à Internet.

aplicação cache do aplicativo traz três vantagens:

  1. navegação off-line - os usuários podem usá-los na aplicação off-line
  2. Velocidade - em cache recursos carregar mais rápido
  3. Reduzir a carga do servidor - o navegador só vai transferir recursos atualizados ou alterados a partir do servidor.

Suporte a navegadores

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, Chrome, Safari e Opera apoiar o cache do aplicativo.

exemplos HTML5 Cache Manifest

O exemplo a seguir mostra o documento HTML com um manifesto de cache (para visualização off-line):

Exemplos

<!DOCTYPE HTML>
<html manifest="demo .appcache ">

<body>
文档内容......
</body>

</html>

tente »

base Cache Manifest

Para habilitar o cache do aplicativo, o rótulo contém o atributo manifesto no documento <html>:

<!DOCTYPE HTML>
<html manifest="demo .appcache ">
...
</html>

Cada manifestar página especificada quando os usuários acessam o seu serão armazenados em cache. Se o atributo manifesto não for especificado, a página não será armazenada em cache (a menos que especificar diretamente a página no arquivo de manifesto).

Sugeriu extensão de arquivo de manifesto: ". AppCache".

observação Por favor note, arquivos de manifesto necessário configurar o tipo MIME correto, ou seja, "text / cache-manifest". Você deve ser configurado no servidor web.

arquivo de manifesto

arquivo de manifesto é um arquivo de texto simples que informa o conteúdo do navegador do cache (e não armazena em cache de conteúdo).

arquivos de manifesto pode ser dividido em três partes:

  • CACHE MANIFESTO - no título deste documento será armazenado em cache após o primeiro download
  • REDE - Neste título os seguintes documentos precisam se conectar ao servidor, e não serão armazenados em cache
  • FALLBACK - Neste listados sob as páginas documentos de título de reversão (por exemplo, página 404) quando a 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 três arquivos do diretório raiz do seu site. Então, sempre que o usuário desconecta da Internet, estes recursos ainda estão disponíveis.

REDE

As seguintes disposições do ficheiro subseções REDE "login.php" nunca é armazenado em cache e disponível off-line não está disponível:

NETWORK:
login.php

Você pode usar um asterisco para indicar todos os outros outros recursos / arquivos requerem uma conexão com a Internet:

NETWORK:
*

FALLBACK

seções fallback definidos abaixo Se não é possível estabelecer uma ligação à Internet, com o "offline.html" alternativo / html5 / diretório de todos os arquivos:

FALLBACK:
/html/ /offline.html

Nota: O primeiro é o recurso URI, o segundo é um substituto.

Atualizar cache

Uma vez que o aplicativo é armazenada em cache, ele permanecerá em cache até que ocorra o seguinte:

  • Usuários Limpe o cache do navegador
  • arquivo de manifesto é modificado (veja dicas abaixo)
  • Pelo programa para atualizar o cache do aplicativo

Exemplo - Completar arquivo de manifesto

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

observaçãoTip: A "#" no início da linha de comentário, mas também para satisfazer outros fins.aplicação armazenamento em cache será atualizado quando suas mudanças arquivo de manifesto. Se você editar uma imagem, ou modificar uma função JavaScript, essas alterações não serão re-cache. Atualização linha de comentário é uma data e número da versão do navegador para re-cache abordagem arquivo.

Sobre instruções de cache de aplicativos

Por favor, preste atenção para o conteúdo do cache.

Depois que os arquivos são armazenados em cache, o navegador continuará a exibir a versão em cache, mesmo se você editar o arquivo no servidor. Para se certificar de seu navegador para atualizar o cache, você precisa atualizar o arquivo de manifesto.

Nota: O limite de capacidade navegador para dados em cache pode não ser o mesmo (algumas configurações restrições do navegador é que cada local de 5MB).