Sobes.tech
Ajuda para Entrevistas
Recursos
Preparação para a Entrevista
Recursos
Procura de Emprego
Recursos
Jurídico
Voltar às perguntas
Middle

O que é o cache de aplicação em HTML5?

sobes.tech IA

Resposta da IA

A cache de aplicações (Application Cache) em HTML5 é um mecanismo que permite a uma aplicação web funcionar offline, fornecendo um conjunto de recursos (páginas HTML, CSS, JavaScript, imagens) que o navegador armazena em cache localmente.

Para usar a cache de aplicações, é necessário um arquivo de manifesto com extensão .appcache, ligado à página HTML através do atributo manifest na tag <html>:

<html manifest="manifest.appcache">
...
</html>

O arquivo de manifesto tem a seguinte estrutura:

CACHE MANIFEST
# Versão do manifesto (opcional, para atualizar a cache)
# v1.0

CACHE:
# Recursos explicitamente em cache
/css/style.css
/js/script.js
/images/logo.png

FALLBACK:
# Recursos de reserva em caso de ausência de ligação
/offline.html /

NETWORK:
# Recursos que devem sempre ser solicitados a partir da rede
*

As principais secções do arquivo de manifesto são:

  • CACHE:: Os recursos listados nesta secção serão armazenados em cache após o carregamento da primeira página com o manifesto especificado.
  • FALLBACK:: Define recursos de reserva. Se uma requisição de rede para um recurso principal falhar, o navegador carregará o recurso de reserva indicado. Formato: recurso_principal recurso_de_reserva.
  • NETWORK:: Recursos listados nesta secção nunca serão armazenados em cache e serão sempre solicitados à rede. O símbolo * significa que todos os recursos não listados noutras secções serão sempre solicitados à rede.

A atualização da cache de aplicações ocorre quando o arquivo de manifesto muda. O navegador descarrega o manifesto atualizado, compara-o com o atual e descarrega os recursos novos ou alterados. Os ficheiros novos só ficam disponíveis após recarregar a página.

Eventos relacionados com a cache de aplicações:

  • checking: O navegador verifica se há uma nova versão do manifesto.
  • downloading: O navegador descarrega os recursos indicados na nova versão do manifesto.
  • progress: Progresso do descarregamento de recursos.
  • updateready: A nova versão da cache está pronta a ser usada. É necessário recarregar a página.
  • cached: Os recursos foram armazenados em cache com sucesso na primeira vez.
  • noupdate: O manifesto não mudou.
  • error: Ocorreu um erro ao descarregar ou atualizar a cache.

A API da cache de aplicações está disponível através de window.applicationCache.

// Verificar o estado da cache
console.log(window.applicationCache.status);

// Lidar com o evento updateready
window.applicationCache.addEventListener('updateready', function() {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    // Aplicar a nova versão da cache e recarregar a página
    window.applicationCache.swapCache();
    window.location.reload();
  }
}, false);

Embora a cache de aplicações fornecesse funcionalidades offline, o seu uso não é recomendado em novos projetos devido à complexidade de gestão, problemas com atualizações e falta de flexibilidade. Como abordagem moderna para acesso offline e outras funcionalidades de aplicações web progressivas (PWA), usam-se os Service Workers.

AnteriorPróximo