Manifesto de cache em HTML5

Extensão de nome de arquivo
.appcache
tipo de mídia da Internet
texto/cache-manifesto
Desenvolvido porConsórcio World Wide Web
PadrãoHTML5
Formato aberto ?Sim
Local na rede Internethtml.spec.whatwg.org/multipage/browsers.html#offline

O manifesto de cache em HTML5 era um recurso de armazenamento de software que fornecia a capacidade de acessar um aplicativo da web mesmo sem uma conexão de rede. Tornou-se parte da Recomendação do W3C em 28 de outubro de 2014. [1]

Desde 2021, essa tecnologia não está mais amplamente disponível. Ele foi removido do Firefox 85, [2] e desativado por padrão no Chrome 84 e removido no Chrome 95. [3] O uso de qualquer um dos recursos de aplicativos da Web offline no momento é altamente desencorajado e o uso de service workers é recomendado. [4] Os manifestos de cache são diferentes dos manifestos de aplicativos da web , um formato de arquivo baseado em JSON que faz parte da tecnologia progressiva de aplicativos da web e, a partir de 2023, está atualmente ativo e passando pelo processo de padronização no W3C . [5]

Fundo

Os aplicativos da Web consistem em páginas da Web que precisam ser baixadas de uma rede. Para que isso aconteça, deve haver uma conexão de rede. No entanto, há muitos casos em que os usuários não conseguem se conectar a uma rede devido a circunstâncias fora de seu controle. O HTML5 fornece a capacidade de acessar o aplicativo da Web mesmo sem uma conexão de rede usando o cache manifest.

Os aplicativos da Web consistem em recursos identificados por URLs . Podem ser HTML , CSS , JavaScript , imagens ou qualquer outra fonte necessária para que um aplicativo da Web seja renderizado. Seus endereços podem ser copiados em um arquivo de manifesto , que pode ser atualizado regularmente pelo autor do aplicativo da Web, indicando quaisquer novos endereços da Web adicionados ou excluídos. Ao se conectar a uma rede pela primeira vez, um navegador da Web lerá o arquivo de manifesto HTML5, baixará os recursos fornecidos e os armazenará localmente. Então, na ausência de uma conexão de rede, o navegador da web mudará para as cópias locais e renderizará o aplicativo da web offline.

Fundamentos

Para que os aplicativos off-line funcionem, um arquivo de manifesto de cache deve ser criado pelo desenvolvedor da web. Se o aplicativo da Web exceder mais de uma página, cada página deverá ter um atributo de manifesto que aponte para o manifesto do cache. Todas as páginas que fazem referência ao manifesto serão armazenadas localmente. [6] O arquivo de cache manifest é um arquivo de texto localizado em outra parte do servidor. Deve ser servido com tipo de conteúdo text/cache-manifest[7]

O atributo manifest="<path>"deve ser adicionado ao elemento html para que o arquivo de cache manifest funcione. [7] Exemplo:

<!DOCTYPE HTML> 
< html  manifest = "cache.appcache" > 
  < body >
  </ corpo > 
</ html >

O argumento para o atributo de manifesto é um caminho relativo ou absoluto para o arquivo de manifesto.

Considere o arquivo HTML fornecido abaixo. O elemento <html> indica que um arquivo chamado cache.appcache conterá a lista de recursos (ou seja, test.js, test.css) necessários para que esta página da Web funcione offline. Nomes comuns para este arquivo são cache.manifest e manifest.appcache.

<!—- test.html --> 
<!DOCTYPE HTML> 
< html  manifest = "cache.appcache" > 
< head > 
  < title > Teste </ title > 
  < script  src = "test.js" ></ script > 
  < link  rel = "stylesheet"  href = "test.css" > 
</ head > 
< body >
  Testando o arquivo de manifesto.
</ corpo > 
</ html >

Sintaxe

O arquivo de manifesto deve começar com a linha CACHE MANIFEST. Os comentários começam com um #, os espaços e as linhas em branco são ignorados. [8]

Abaixo está um exemplo de um arquivo de manifesto de cache.

Exemplo 1:

MANIFESTO DE CACHE
/test.css
/test.js
/teste.png

Este arquivo de manifesto lista três recursos: um arquivo CSS, um arquivo JavaScript e uma imagem PNG. Quando o arquivo acima for carregado, o navegador baixará os arquivos test.css, test.js e test.png do diretório raiz no servidor web. [7] Como resultado, sempre que a rede de alguém não estiver conectada, os recursos estarão disponíveis offline.

Os manifestos de cache também podem usar caminhos relativos ou até mesmo URLs absolutos, conforme mostrado abaixo. [8] [9] [10]

Exemplo 2:

MANIFESTO DE CACHE
/main/features.js
/main/settings/index.css
http://files/images/scene.jpg
http://files/images/world.jpg

Cabeçalhos de arquivo

O arquivo de manifesto do cache consiste em três cabeçalhos de seção. [7]

  1. Seção explícita com o cabeçalho CACHE.
  2. Seção de lista branca online com o cabeçalho NETWORK.
  3. Seção Fallback com o cabeçalho FALLBACK.

Observação: o exemplo 1 e o exemplo 2 acima não indicam nenhum cabeçalho de seção e, portanto, são considerados uma seção explícita por padrão.

Seção de lista de permissões on-line com o cabeçalho REDE

Exemplo 3:

MANIFESTO DE CACHE
REDE:
/checking.cgi
CACHE:
/test.css
/test.js
/teste.png

Este exemplo consiste em cabeçalhos. A linha, NETWORK: é o início da seção "lista branca online". Os recursos listados nesta seção nunca são armazenados em cache e não estão disponíveis offline. [7] Como resultado, ocorrerá um erro quando for feita uma tentativa offline de carregar o recurso.

Há uma mudança para a seção explícita do cabeçalho CACHE: e os recursos (a folha de estilo CSS, JavaScript e o arquivo de imagem) podem ser baixados e usados ​​offline.

Seção Fallback com o cabeçalho FALLBACK

A seção de fallback em um arquivo de manifesto de cache pode ser usada para substituir recursos online que não podem ser armazenados em cache ou não foram armazenados em cache com êxito. [7]

Exemplo 4:

MANIFESTO DE CACHE
CAIR PRA TRÁS:
//offline.html
REDE:

No Exemplo 4, a seção de fallback consiste em uma única linha. ou seja, //offline.html . O único caractere ( / ) antes de 'offline' corresponderá a qualquer padrão de URL no site. [7] Caso o navegador não encontre a página no appcache, o aplicativo exibirá a página /offline.html.

fluxo de eventos

Os eventos estão sob o ApplicationCacheobjeto JavaScript.

Se o navegador visitar uma página da Web, NÃO tiver visto a página da Web antes e, como resultado, não reconhecer o arquivo de manifesto, ocorrerão os seguintes eventos. [8]

  • CheckingEvento - ocorre quando o navegador visita uma página da Web e lê o atributo manifest no elemento <html>.
  • DownloadingEvento - fará o download de todos os recursos fornecidos no arquivo de manifesto.
  • ProgressEvento - contém informações de quantos arquivos foram baixados e quantos arquivos ainda precisam ser baixados.
  • CachedEvento - ocorre uma vez que todos os arquivos foram baixados e o aplicativo da web offline está equipado para ser usado offline.

Se o navegador tiver visitado a página da Web antes e reconhecer o arquivo de manifesto, ocorrerão os seguintes eventos. [8]

  • NoupdateEvento - ocorrerá se o manifesto do cache não tiver sido alterado.
  • DownloadingEvento - se o manifesto do cache tiver alterado os recursos, os arquivos serão baixados novamente.
  • ProgressEvento - contém informações de quantos arquivos foram baixados e quantos arquivos ainda precisam ser baixados.
  • UpdatereadyEvento - após a conclusão do novo download, este evento é acionado, indicando que a nova versão offline está pronta para ser usada.

Se ocorrer um erro em qualquer instância dos eventos acima, o navegador acionará um evento de erro e interromperá o processo. Abaixo estão alguns erros que podem ocorrer ao baixar novamente os recursos. [9]

  • Página não encontrada ( erro HTTP 404 ) ou página permanentemente desaparecida (erro HTTP 410).
  • Falha ao baixar a página HTML que apontava para o manifesto. [7]
  • O manifesto do cache foi alterado durante a atualização. [7]
  • O manifesto do cache foi alterado, mas o navegador não baixou um recurso no manifesto. [7]

Veja também

Referências

  1. ^ "Cache de aplicativos como parte da recomendação do W3C" . 28 de outubro de 2014 . Acesso em 30 de maio de 2016 .
  2. ^ "Usando o cache do aplicativo - HTML: HyperText Markup Language | MDN". developer.mozilla.org . Arquivado do original em 15/02/2019 . Recuperado 2021-04-11 .
  3. ^ "Preparando-se para a remoção do AppCache" . web.dev . Arquivado do original em 2020-05-20 . Recuperado 2021-09-02 .
  4. ^ "Window.applicationCache". MDN Web Docs . Mozilla . Recuperado 2020-12-29 .
  5. ^ "Manifesto de aplicativo da Web" . www.w3.org . Recuperado 2023-04-09 .
  6. ^ Bidelman, Eric (29 de outubro de 2013). "Um guia para iniciantes sobre como usar o cache do aplicativo" . Acesso em 23 de abril de 2014 .
  7. ^ abcdefghij Pilgrim, Mark (2010). HTML5 instalado e funcionando. O'Reilley. Arquivado do original em 2011-10-03 . Recuperado 2018-11-16 .
  8. ^ abcd "Manifestos W3 HTML5" . HTML5 . Arquivado do original em 24 de dezembro de 2010 . Consultado em 3 de abril de 2011 .
  9. ^ ab "Dev.Opera". HTML5 . Consultado em 3 de abril de 2011 .
  10. ^ "O QUÊ". HTML5 . Arquivado do original em 14 de abril de 2011 . Consultado em 3 de abril de 2011 .

links externos

  • Usando o cache do aplicativo - HTML | MDN arquivado 2019-02-15 na Wayback Machine
  • HTML5: Cache de Aplicativos Offline
  • Rochas HTML5
  • Alistapart: Cache de aplicativos