O acesso offline está se tornando cada vez mais importante para aplicativos baseados na Web. Embora todos os navegadores tenham mecanismos de cache, eles não são confiáveis e nem sempre desempenham o papel esperado. O HTML5 usa a interface ApplicationCache para resolver alguns dos problemas causados pelo uso offline.
O uso de uma interface de cache pode trazer os três benefícios a seguir para o seu aplicativo :Navegação offline - os usuários podem navegar seu site completo enquanto offline
Velocidade - O recurso em cache é um recurso local, por isso carrega mais rápido.
Carga do servidor Menos - o navegador apenas baixa recursos do servidor que mudou.
O App Cache (também conhecido como AppCache) permite que os desenvolvedores especifiquem quais arquivos o navegador deve cache para os usuários offline acessarem. Seu aplicativo carregará e executará normalmente, mesmo que o usuário pressione o botão de atualização quando está offline.
Arquivo de manifesto de cache
Um arquivo de manifesto de cache é um arquivo de texto simples que lista os recursos que o navegador deve armazenar em cache para o acesso offline.
Arquivo de manifesto de referência
Para ativar o cache do aplicativo para um aplicativo, adicione o atributo de manifesto na tag HTML do documento:
<html manifest = "exemplo.appcache">
...
</html>
Você deve adicionar a propriedade Manifest em cada página do aplicativo da web que deseja armazenar em cache. Se a página não conter o atributo manifesto, o navegador não cache a página (a menos que esteja explicitamente listada no arquivo de manifesto). Isso significa que todas as páginas da web que o usuário navega com o manifesto serão implicitamente adicionadas ao cache do aplicativo. Portanto, você não precisa listar cada página da lista.
A propriedade Manifest pode apontar para um URL absoluto ou um caminho relativo, mas o URL absoluto deve ser o mesmo que o aplicativo de rede correspondente. O arquivo de manifesto pode usar qualquer extensão de arquivo, mas deve receber o tipo MIME correto (veja abaixo).
<html manifest = "http://www.example.com/example.mf">
...
</html>
O arquivo de manifesto deve ser fornecido no tipo MIME Text/Cache-manifest. Pode ser necessário adicionar um tipo de arquivo personalizado ao seu servidor da web ou configuração .htaccess.
Por exemplo, para fornecer esse tipo MIME no Apache, adicione a seguinte linha ao seu arquivo de configuração:
ADDTYPE TEXTO/CACHE-MANIFEST .AppCache para fornecer esse tipo MIME no arquivo App.yaml do mecanismo do Google App, adicione o seguinte:
- url: /mystaticdir/(.*/.appcache)
static_files: mystaticdir // 1
MIME_TYPE: Texto/Cache-manifest
Upload: mystaticdir /(.*/. Appcache) Manifesto Estrutura de arquivo
O formato da lista simples é o seguinte:
Manifesto de cache
index.html
Stylesheet.css
imagens/logo.png
scripts/main.js Este exemplo armazena em cache quatro arquivos na página da web que especificam esse arquivo de manifesto.
Os seguintes pontos em que você precisa prestar atenção:
A sequência de manifesto do cache deve estar na primeira linha e é essencial.
A quantidade de dados em cache no 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 ilimitar as restrições.
Se o arquivo de manifesto ou o recurso especificado nele não puder ser baixado, todo o processo de atualização do cache não poderá ser executado. Nesse caso, o navegador continuará a usar o cache de aplicativo original.
Vamos dar uma olhada em exemplos mais complexos:
Manifesto de cache
# 2010-06-18: v2
# Explicitamente em cache em "entradas mestre" explicitamente.
Cache :/favicon.ico
index.html
Stylesheet.css
imagens/logo.png
scripts/main.js
# Recursos que exigem que o usuário esteja online.
REDE :login.php
/myapi
http://api.twitter.com
# static.html será servido se main.py for inacessível
# offline.jpg será servido no lugar de todas as imagens em imagens/grande//
# offline.html será servido no lugar de todos os outros arquivos .html
CAIR PRA TRÁS :/Main.py /static.html
imagens/grande/imagens/offline.jpg
*.html /offline.html linhas que começam com # são linhas de comentários, mas também podem ser usadas para outros fins. O cache do aplicativo é atualizado apenas se seu arquivo manifesto for alterado. Por exemplo, se você modificar um recurso de imagem ou alterar uma função JavaScript, essas alterações não serão recuperadas. Você deve modificar o próprio arquivo de manifesto para que o navegador atualize o arquivo em cache. Crie linhas de comentários com números de versão gerados, valores de hash de arquivo ou registro de data e hora para garantir que os usuários obtenham a versão mais recente do seu software. Você também pode atualizar programaticamente o cache após a exibição de uma nova versão, conforme descrito na seção de cache de atualização.
A lista pode incluir três partes diferentes: cache, rede e fallback.
Cache :Esta é a parte padrão da entrada. Os arquivos listados neste cabeçalho são explicitamente armazenados em cache pela primeira vez (ou arquivos imediatamente após o manifesto do cache).
REDE :Os arquivos listados nesta seção são recursos da lista de permissões que precisam ser conectados ao servidor. Todas as solicitações a esses recursos ignoram o cache, independentemente de o usuário estar offline ou não. Os curingas podem ser usados.
CAIR PRA TRÁS :Esta seção é opcional e é usada para especificar a página Fallback quando o recurso não estiver acessível. O primeiro URI representa o recurso e o segundo representa a página da web de backup. Ambos os URIs devem estar relacionados e devem ser da mesma origem que o arquivo manifesto. Os curingas podem ser usados.
Observação: essas seções podem ser organizadas em qualquer ordem e cada seção pode ser repetida na mesma lista.
A lista a seguir define a página abrangente da web (offline.html) exibida quando um usuário tenta acessar a raiz de um site offline e também indica que todos os outros recursos (como recursos em um site remoto) exigem uma conexão com a Internet.
Manifesto de cache
# 2010-06-18: v3
# Entradas explicitamente armazenadas em cache
index.html
css/style.css
# offline.html será exibido se o usuário estiver offline
CAIR PRA TRÁS:
//offline.html
# Todos os outros recursos (por exemplo, sites) exigem que o usuário esteja online.
REDE:
*
# Recursos adicionais para cache
Cache:
imagens/logo1.png
imagens/logo2.png
Observe que imagens/logo3.png: o sistema cache automaticamente o arquivo HTML que faz referência ao arquivo de manifesto. Portanto, você não precisa adicioná -lo à lista, mas recomendamos que você faça isso.
Nota : Os cabeçalhos de cache HTTP e as restrições de cache definidas para páginas da Web fornecidas via SSL serão substituídas por manifestos de cache. Portanto, a página da web fornecida pelo HTTPS pode ser executada offline. Atualize o cacheO aplicativo permanece em cache após offline, a menos que ocorra um dos seguintes:
O usuário limpa o armazenamento de dados do navegador em seu site.
O arquivo de manifesto foi modificado. Observação: atualizar um arquivo listado no manifesto não significa que o navegador irá recolher novamente o recurso. O próprio arquivo de manifesto deve ser alterado.
O cache do aplicativo é atualizado programaticamente.
Status do cacheO objeto Window.ApplicationCache é um método de acesso programático para o cache do aplicativo do navegador. Seu atributo de status pode ser usado para visualizar o status atual do cache:
var appcache = window.applicationCache;
Switch (appcache.status) {
case Appcache.uncached: // Uncached == 0
retornar 'não acrescentado';
quebrar;
case appcache.idle: // indle == 1
retornar 'ocioso';
quebrar;
case appcache.checking: // checking == 2
retornar 'verificação';
quebrar;
case appcache.downloading: // download == 3
retornar 'download';
quebrar;
case appcache.updateready: // uptateready == 4
retornar 'atualizador';
quebrar;
case appcache.obsolete: // obsolete == 5
retornar 'obsoleto';
quebrar;
padrão:
retornar 'Uknow Cache Status';
quebrar;
};
Para atualizar programaticamente o cache, ligue para o ApplicationCache.Update () primeiro. Isso tentará atualizar o cache do usuário (desde que o arquivo de manifesto tenha sido alterado). Finalmente, quando o ApplicationCache.status estiver no estado de atualização, ligue para o ApplicationCache.swapcache () para substituir o cache original pelo novo cache.
var appcache = window.applicationCache;
appcache.update (); // tentam atualizar o cache do usuário.
...
if (appcache.status == window.applicationcache.updateready) {
appcache.swapcache (); // A busca foi bem -sucedida, trocar no novo cache.
}
Observação : usando update () e swapcache () dessa maneira não fornecerão recursos atualizados ao usuário. Esse processo simplesmente permite que o navegador verifique se há novos manifestos, faça o download de atualizações especificadas e reabasteça o cache do aplicativo. Portanto, a página da web precisa ser recarregada duas vezes antes que um novo conteúdo seja fornecido ao usuário, o primeiro é obter um novo cache de aplicativos e o segundo é atualizar o conteúdo da página da web.A boa notícia é que você pode evitar o incômodo de recarregar duas vezes. Para atualizar os usuários para a versão mais recente do site, configure um ouvinte para monitorar eventos de atualização quando a página da web estiver carregando:
// Verifique se um novo cache está disponível no carregamento da página.
window.addeventListener ('load', função (e) {
Window.ApplicationCache.addeventListener ('UPDATEADY', function (e) {
if (window.applicationcache.status == window.applicationcache.updateready) {
// navegador baixou um novo cache de aplicativos.
// Troque -o e recarregue a página para obter a nova gostosura.
window.applicationCache.swapcache ();
if (confirm ('Uma nova versão deste site está disponível. Carregue -o?')) {
window.Location.Reload ();
}
} outro {
// manifesto não mudou. Nada novo no servidor.
}
}, false);
}, false);
Evento AppcacheComo esperava, eventos adicionais são usados para ouvir o estado do cache. O navegador acionará eventos correspondentes para download de progresso, atualizações de cache do aplicativo e status de erro. O snippet de código a seguir configura um ouvinte de eventos para cada tipo de evento de cache:
função handlecacheevent (e) {
// ...
}
função handlecacheerror (e) {
Alert ('Erro: o cache falhou ao atualizar!');
};
// disparou após o primeiro cache do manifesto.
appcache.addeventListener ('cache', handlecacheevent, falso);
// verificando uma atualização. Sempre o primeiro evento disparou na sequência.
appcache.addeventListener ('verificação', handlecacheevent, false);
// Uma atualização foi encontrada. O navegador está buscando recursos.
appcache.addeventListener ('download', handlecacheevent, false);
// O manifesto retorna 404 ou 410, o download falhou,
// ou o manifesto mudou enquanto o download estava em andamento.
appcache.addeventListener ('erro', handlecacheerror, false);
// disparou após o primeiro download do manifesto.
appcache.addeventListener ('noupdate', handlecacheevent, false);
// disparado se o arquivo manifesto retornar um 404 ou 410.
// Isso resulta no cache do aplicativo sendo excluído.
appcache.addeventListener ('obsolete', handlecacheevent, false);
// disparado para cada recurso listado no manifesto à medida que está sendo buscado.
appcache.addeventListener ('Progress', handlecacheevent, false);
// disparado quando os recursos manifestos foram recém -reduzidos.
appcache.addeventListener ('updateArty', handlecacheevent, false);
Se o arquivo de manifesto ou o recurso especificado nele não puder ser baixado, a atualização inteira falhará. Nesse caso, o navegador continuará a usar o cache de aplicativo original