Página Inicial>Tutorial de web design>Tutorial HTML

Exemplo de código para cache offline de manifesto HTML5

Autor：Eve Cole Data da Última Atualização：2025-02-13 15:12:01
Introdução

O acesso offline é cada vez mais importante para aplicativos baseados na web. Embora todos os navegadores possuam mecanismos de cache, eles não são confiáveis ​​e nem sempre funcionam conforme o esperado. HTML5 usa a interface ApplicationCache para resolver alguns dos problemas causados ​​pelo offline.

Usar a interface de cache traz três vantagens para sua aplicação:

  1. Navegação off-line - os usuários podem navegar em todo o site enquanto estão off-line
  2. Velocidade – Os recursos armazenados em cache são locais e, portanto, carregam mais rapidamente.
  3. Menos carga do servidor – o navegador baixa apenas recursos de servidores que foram alterados.

O Cache de Aplicativo (também conhecido como AppCache) permite que os desenvolvedores especifiquem quais arquivos devem ser armazenados em cache pelo navegador para acesso de usuários offline. Mesmo que o usuário pressione o botão Atualizar enquanto estiver off-line, seu aplicativo será carregado e executado normalmente.

Arquivo de manifesto de referência

Para ativar o cache de um aplicativo, adicione o atributo manifesto à tag html do documento:

O atributo manifesto pode apontar para uma URL absoluta ou um caminho relativo, mas as URLs absolutas devem ter a mesma origem que o aplicativo Web correspondente. O arquivo de manifesto pode usar qualquer extensão de arquivo, mas deve ser servido com o tipo MIME correto (veja abaixo). 

 <html manifest=/cache.manifest> ...</html>

ou 

 <html manifesto=http://www.example.com/example.mf> ...</html>

Você deve adicionar o atributo manifesto em cada página do seu aplicativo da web que deseja armazenar em cache. Se uma página da web não contiver um atributo de manifesto, o navegador não armazenará a página em cache (a menos que o atributo esteja explicitamente listado no arquivo de manifesto).

Isso significa que cada página da web que o usuário navega e que contém um manifesto será adicionada implicitamente ao cache do aplicativo. Portanto, você não precisa listar todas as páginas do seu inventário.

Os arquivos de manifesto devem ser fornecidos como tipo MIME de texto/manifesto de cache. O nome do sufixo do arquivo pode ser personalizado (recomenda-se .manifest), portanto, precisamos declarar o tipo de arquivo com o sufixo .manifest como text/cache-manifest no lado do servidor.

Tomando o apache como exemplo, precisamos adicionar: AddType text/cache-manifest .manifest ao httpd.conf

Estrutura do arquivo de manifesto

Um formato de lista simples é o seguinte: 

 CACHE MANIFESTindex.htmlstylesheet.cssimages/logo.pngscripts/main.js

Este exemplo armazenará em cache quatro arquivos na página da Web que especifica esse arquivo de manifesto.

Você precisa prestar atenção aos seguintes pontos:

  1. A string CACHE MANIFEST deve estar na primeira linha e é obrigatória.
  2. O tamanho dos dados em cache do site não deve exceder 5 MB. No entanto, se você estiver escrevendo um aplicativo para a Chrome Web Store, poderá usar o UnlimitedStorage para remover essa limitação.
  3. Se o arquivo de manifesto ou os recursos especificados nele não puderem ser baixados, todo o processo de atualização do cache não poderá prosseguir. Nesse caso, o navegador continuará usando o cache original do aplicativo.

Vejamos um exemplo mais complexo: 

 CACHE MANIFEST# 2010-06-18:v2# 'Entradas mestres' armazenadas explicitamente em cache.CACHE:/favicon.icoindex.htmlstylesheet.cssimages/logo.pngscripts/main.js# Recursos que exigem que o usuário esteja online.NETWORK:login. php/myapihttp://api.twitter.com# static.html será veiculado se main.py estiver inacessível# offline.jpg será veiculado no lugar de todas as imagens em images/large/# offline.html será veiculado no lugar de todos os outros arquivos .htmlFALLBACK:/main.py /static.htmlimages/large/ images/offline.jpg*.html /offline.html

As linhas que começam com # são linhas de comentários, mas também podem ser usadas para outros fins. Por exemplo, atualizar cache

O cache do aplicativo só é atualizado quando o arquivo de manifesto é alterado. Por exemplo, se você modificar um recurso de imagem ou alterar uma função JavaScript, essas alterações não serão armazenadas em cache novamente. Você deve modificar o próprio arquivo de manifesto para permitir que o navegador atualize o arquivo de cache. A criação de linhas de comentários com números de versão gerados, hashes de arquivo ou carimbos de data/hora garante que os usuários tenham a versão mais recente do seu software.

Você também pode atualizar programaticamente o cache quando uma nova versão estiver disponível, conforme descrito na seção Atualizando o Cache.

Se a página apresentar um arquivo de manifesto de cache, então o arquivo de manifesto deverá conter todos os arquivos (css, js, imagem...) exigidos pela página atual, caso contrário ela não será carregada, exceto para arquivos que precisam ser armazenados em cache , é recomendado adicionar NETWORK no arquivo. Adicione um asterisco * a um item para indicar todos os outros arquivos.

Um manifesto pode incluir três seções diferentes: CACHE, NETWORK e FALLBACK.

CACHE:

Esta é a parte padrão da entrada. Os arquivos listados neste cabeçalho (ou os arquivos imediatamente após o CACHE MANIFEST) são explicitamente armazenados em cache após serem baixados pela primeira vez.

REDE:

Os arquivos listados nesta seção são recursos permitidos que são necessários para conectar-se ao servidor. Todas as solicitações para esses recursos ignoram o cache, independentemente de o usuário estar offline. Curingas podem ser usados.

CAIR PRA TRÁS:

Esta seção é opcional e especifica uma página substituta se o recurso não puder ser acessado. O primeiro URI representa o recurso e o segundo representa a página de apoio. Os dois URIs devem estar relacionados e ter a mesma origem do arquivo de manifesto. Curingas podem ser usados.

Nota: As seções podem ser organizadas em qualquer ordem e cada seção pode aparecer repetidamente na mesma lista.

A lista a seguir define a página da Web abrangente (offline.html) exibida quando um usuário tenta acessar a raiz do site off-line e também indica que todos os outros recursos (como aqueles em sites remotos) exigem uma conexão com a Internet. 

 CACHE MANIFEST# 2010-06-18:v3# Entradas explicitamente armazenadas em cacheindex.htmlcss/style.css# offline.html serão exibidas se o usuário estiver offlineFALLBACK:/// /offline.html# Todos os outros recursos (por exemplo, sites) requerem o usuário estará online.NETWORK:*# Recursos adicionais para cacheCACHE:images/logo1.pngimages/logo2.pngimages/logo3.png

Observação: os arquivos HTML que fazem referência a arquivos de manifesto são automaticamente armazenados em cache. Portanto, você não precisa adicioná-lo à sua lista, mas recomendamos que o faça.

Observação: os cabeçalhos de cache HTTP e os limites de cache definidos nas páginas veiculadas por SSL serão substituídos por manifestos de cache. Portanto, as páginas da web veiculadas por https podem ser executadas offline.

Atualizar cache

Os aplicativos permanecerão armazenados em cache enquanto estiverem off-line, a menos que ocorra uma das seguintes condições:

  1. O usuário limpou o armazenamento de dados do navegador do seu site.
  2. O arquivo de manifesto foi modificado. Observação: atualizar um arquivo listado no manifesto não significa que o navegador armazenará novamente o recurso em cache. O próprio arquivo de manifesto deve ser alterado.
  3. O cache do aplicativo é atualizado programaticamente.

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.

Artigos Relacionados