HTML5 Tutoriais Básicos

HTML5 API

HTML5 Mídia

HTML5 Gráficos

HTML5 Web Workers HTML 5 Banco de Dados Local

HTML5 Cache de Aplicativo

Usando HTML5, ao criar um arquivo de manifesto de cache, é possível criar facilmente uma versão offline de aplicativos web, introduzindo o cache de aplicativo, o que significa que os aplicativos web podem ser armazenados em cache no cliente e acessados offline sem conexão de rede.

O que é Cache de Aplicativo (Application Cache)

HTML5 Fornecer um mecanismo de cache de aplicativo, permitindo que os aplicativos baseados na web funcionem offline. Os desenvolvedores podem usar a interface Application Cache (AppCache) para definir os recursos que o navegador deve armazenar em cache e torná-los disponíveis para usuários offline. Quando o aplicativo estiver em estado offline, mesmo que o usuário clique no botão de recarregar, o aplicativo ainda pode carregar e funcionar normalmente.

O cache de aplicativo traz três vantagens para o aplicativo:

Navegação offline - Os usuários podem usá-los quando o aplicativo estiver offline
Velocidade - Os recursos armazenados em cache são carregados mais rapidamente
Reduza a carga do servidor - Os navegadores baixarão apenas os recursos atualizados ou alterados do servidor.

Quais navegadores suportam

Internet Explorer 10, Firefox, Chrome, Safari e Opera suportam cache de aplicativos.

HTML5 　Exemplo de Manifesto de Cache

O seguinte exemplo mostra um documento HTML com manifest de cache (para navegação offline):

Exemplo online

Exemplo

<!DOCTYPE HTML>
<html manifest="demo.appcache">
	<body>
	Conteúdo do documento......
	</body>
	</html>

Teste e veja ‹/›

Fundamentos do Cache Manifesto

Para ativar o cache de aplicativo, inclua o atributo manifest na tag <html> do documento:

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

Cada página que especifica um Manifesto será armazenada no cache quando o usuário acessá-la. Se não for especificado o atributo Manifesto, a página não será armazenada no cache (a menos que a página seja especificamente indicada no arquivo Manifesto).

A extensão de arquivo recomendada para o arquivo Manifesto é: ".appcache".

Observe que o arquivo Manifesto precisa ser configurado com o MIME correto-type, ou seja, "text/cache-"manifest" deve ser configurado no servidor web.

Arquivo Manifesto

O arquivo Manifesto é um arquivo de texto simples que informa ao navegador o conteúdo armazenado no cache (e o conteúdo que não deve ser armazenado no cache).

O arquivo Manifesto pode ser dividido em três partes:

CACHE MANIFEST - Os arquivos listados abaixo, sob este título, serão armazenados no cache após o primeiro download
NETWORK - Os arquivos listados abaixo, sob este título, precisam de conexão com o servidor e não serão armazenados no cache
FALLBACK - Os arquivos listados abaixo, sob este título, determinam a página de fallback quando a página não puder ser acessada (por exemplo 404 página)

CACHE MANIFEST

A primeira linha, CACHE MANIFEST, é necessária:

MANIFESTO DE CACHE
/style.css
/logo.png
/main.js

O arquivo Manifesto acima lista três recursos: um arquivo CSS, uma imagem GIF e um arquivo JavaScript. Após o carregamento do arquivo Manifesto, o navegador baixará esses três arquivos a partir do diretório raiz do site. Em seguida, esses recursos continuarão a estar disponíveis, independentemente de o usuário estar ou não conectado à internet.

NETWORK

A seção NETWORK abaixo define que o arquivo "login.php" nunca será armazenado no cache e não estará disponível offline:

NETWORK:
login.php

Pode ser usado o asterisco para indicar todos os outros recursos/Todos os arquivos precisam de conexão com a internet:

NETWORK:
*FALLBACK

A seção FALLBACK abaixo define que, se não for possível estabelecer uma conexão de rede, o "offline.html" será substituído /html5/ Todos os arquivos no diretório:

FALLBACK:
/html/　/index.html

Atenção: O primeiro URI é o recurso, o segundo é o substituto.

Atualizar cache

A partir do momento em que o aplicativo é armazenado no cache, ele permanecerá no cache até que ocorra uma das seguintes situações:

O usuário limpa o cache do navegador
O arquivo Manifesto é modificado (ver as dicas a seguir)
O aplicativo atualiza o cache

Exemplo completo de arquivo Manifesto

MANIFESTO DE CACHE
#　2018-02-21　v1.1.1
/style.css
/logo.png
/main.js
NETWORK:
login.php
FALLBACK:
/html/　/index.html

Dica:Linhas que começam com "#" são linhas de comentário, mas também podem ser usadas para outros propósitos. O cache da aplicação será atualizado quando o arquivo manifest mudar. Se você editar uma imagem ou modificar uma função JavaScript, essas mudanças não serão recarregadas no cache. Atualizar a data e a versão no comentário é uma maneira de fazer o navegador recarregar o arquivo.

Descrição sobre o Cache de Aplicação

Atenção para o conteúdo em cache.

Uma vez que o arquivo seja armazenado em cache, o navegador continuará a exibir a versão em cache, mesmo que você modifique o arquivo no servidor. Para garantir que o navegador atualize o cache, você precisa atualizar o arquivo manifest.

Atenção: A capacidade de armazenamento de dados em cache pode variar entre os navegadores (alguns navegadores configuram limites de cada site) 5MB).