A maioria dos aplicativos baseados na Web funciona somente se você estiver on-line, o que torna um certo tipo de sentido. Mas HTML5 tem um mecanismo para forçar parte de uma página web e seus recursos para ser armazenado na máquina local para que você possa visualizá-lo enquanto estiver offline. Você pode ter uma página de identificar-se para este comportamento e tentar salvar uma cópia no automatically- máquina local, por exemplo:

Video: Etiqueta head en html5 (cabecera) y configurar charset utf-8

Armazenamento offline de demonstração
Video: Parte 4 - Configurando uma página HTML e resolvendo o erro na acentuação na página

Embora extremamente simples, esta página consegue tirar recursos de vários arquivos diferentes. Claro, ele requer a imagem pot.jpg, mas também usa um arquivo javascript externo (offline.js) E uma folha de estilo externa (offline.css). HTML5 oferece um mecanismo que permite que o navegador para salvar automaticamente não só o arquivo HTML, mas todos os outros recursos de que necessita para exibir corretamente.

Você não iria construir uma página tão simples com tantas dependências externas, mas esse é o ponto deste exercício particular.

O segredo está em um arquivo especial chamado cache.manifest. Este arquivo especial é simplesmente um arquivo de texto que indica que outros arquivos são necessários pela página. Aqui está o conteúdo de cache.manifest para este exemplo particular:

Video: HTML5 - Aula 06 - Página 2 - Parte 1

CACHE MANIFESToffline.cssoffline.jspot.jpg

O arquivo deve começar com a frase CACHE MANIFEST (Tudo em maiúsculas). Cada linha subseqüente deve conter o nome de um arquivo necessário para completar a página. É mais fácil se todos os arquivos estão no mesmo diretório, mas referências relativas são aceitáveis.

Siga estes passos para configurar uma página para o cache off-line:

1. Configurar seu servidor para gerenciar caches.

   O mecanismo de cache usa a text / manifesto Tipo de MIME. O servidor não pode ainda ser configurado para este tipo de dados. Se você estiver usando Apache, isso é fácil de corrigir. Procurar (ou criar) um arquivo de texto chamado .htaccess no diretório raiz do seu servidor web. Adicione a seguinte linha para este arquivo:

   AddType text / manifest cache-manifesto

   Se você não tem permissão para adicionar ou modificar .htaccess ou você estiver usando outro servidor, você pode ter que pedir o administrador do servidor para adicionar este tipo MIME.

2. Crie o seu arquivo de manifesto pela construção de um arquivo de texto chamado cache.manifest no mesmo diretório do seu projeto.

   Faça a primeira linha de ler CACHE MANIFEST. Em cada linha subseqüente, listar um dos ativos a sua página irá precisar. Você pode precisar de olhar através de seu código-fonte para encontrar os vários elementos (normalmente imagens, CSS e arquivos javascript) que sua página vai precisar.

3. 
   
   
   

   Criar a página de uma forma normal.

   Mantenha o controle de todos os recursos externos que você pode precisar.

4. Indicam que sua página vai solicitar armazenamento local adicionando o manifesto atribuir ao tag e um link para o seu cache.manifest Arquivo.

5. Carregar a página.

   Obviamente, você não pode testar o cache em uma máquina local (a menos que você estiver executando o seu próprio servidor web e teste através do http: // localhost endereço). Você precisa carregar seus arquivos para um servidor. A primeira vez que você tentar acessar a página, o navegador provavelmente pedirá permissão para salvar dados localmente. Conceder permissão para fazê-lo.

6. Teste offline.

   Para ver se a página funciona, desconectar da Internet (por desligar o wireless ou desconectar o cabo de rede). Tente carregar a página novamente. Se você for bem sucedido, a página inteira será carregado.

Browsers já tem uma forma de cache que armazena automaticamente as páginas que o usuário visitou, mas este tipo de cache é uma forma diferente, mais intencional de cache.

Note que você não pode colocar links para os ativos do lado do servidor no cache. A cache local não pode armazenar um programa PHP ou banco de dados. No entanto, você pode armazenar todos os dados que você precisa sobre o cliente para que o seu projeto ainda irá funcionar sem uma conexão de servidor.

Se você mudar de cache.manifest arquivo e reteste, o navegador não irá atualizar imediatamente. Isso porque os navegadores são ajustados para manter o cache atual para um par de horas. Se você testar novamente depois de um par de horas, você verá as alterações refletidas. Durante o teste, você pode transformar o cache do navegador automática off adicionando estas linhas ao seu .htaccess Arquivo:

ExpiresActive OnExpiresDefault "Acesso"

Ela só faz sentido para desligar o cache do navegador em um servidor de teste. Deixe o comportamento de cache em seu nível padrão para um servidor de produção.

Se um dos arquivos de mudanças, mas o cache.manifest arquivo não, o navegador não sabe para recarregar o arquivo alterado. Se você quiser desencadear uma recarga de arquivos, você precisa mudar pelo menos um caractere na cache.manifest Arquivo. Isso pode ser um comentário, assim você pode simplesmente adicionar um número de versão como esta:

#Version 3

Alterar o número da versão irá desencadear o mecanismo de recarga da próxima vez que estiver online, então a versão offline será atualizado.