Sua Aplicação Offline

SUA APLICAÇÃO. OFFLINE DANIEL FILHO danielfilho.info @daniel!lho

@danielfilho

ig.com.br front-end developer

zofe.com.br co-host

danielﬁlho.github.com eternal apprentice

AGENDA

AGENDA appCache Como usar Estrutura do arquivo de manifesto Cache
States Checando status da conexão Links Referências

IMPORTANTE appCache: tecnologia manifest : arquivo físico

APPCACHE

APPCACHE ERA UMA VEZ... Cookies Flash Storage Google Gears {...}

APPCACHE VANTAGENS Disponibilidade Mobilidade Otimização da banda

APPCACHE O QUE É POSSÍVEL? Gravar dados em texto Gravar
dados binários Sincronizar dados com o servidor Melhorar a performance da aplicação

APPCACHE COMO FUNCIONA?

example.com/page.html é digitado na barra de endereços carrega página, arquivos
do cache e arquivo manifest carrega página da web a página já está no appCache? sim não baixa o arquivo manifest baixa e guarda em cache os arquivos apontados pelo manifest dispara evento ‘cached’ verifica manifest mudou não mudou 404 apagar todos os arquivos cacheados antes baixar e guardar todos os arquivos do manifest dispara evento ‘updateready’ dispara evento ‘obsolete’ dispara evento ‘noupdate’ Louis-Rémi: Offline Web Applications, we’re not there yet

COMO USAR?

COMO USAR? APACHE SERVER text/cache-manifest appcache mime-type

COMO USAR? .HTACCESS AddType text/cache-manifest appcache mime-type

COMO USAR? EXEMPLO DE CÓDIGO <!DOCTYPE html> <html manifest="manifest.appcache"> ...

ANATOMIA DO ARQUIVO MANIFEST.APPCACHE

MANIFEST.APPCACHE Cache Network Fallback

EXEMPLO DE MANIFEST.APPCACHE

CACHE MANIFEST # version 1.3 CACHE: #images /images/sprite.png /images/photo.png #pages
/pages/page1.html /pages/page2.html {...} {...} #CSS /style/style.css #scripts /js/script.js FALLBACK: / /offline.html NETWORK: /join/signup.html /app/updateInfo.pl

CACHE MANIFEST: DECLARANDO

Todo arquivo .appcache necessita começar com a linha CACHE MANIFEST,
validando a finalidade do arquivo para o servidor.

CACHE MANIFEST: COMENTÁRIOS • Os comentários iniciam com o char
“#” • É uma boa prática versionar o arquivo para certificar que o mesmo seja alterado enquanto desenvolve

CACHE MANIFEST CACHE:

CACHE: #images /images/sprite.png /images/photo.png #pages /pages/page1.html /pages/page2.html #CSS /style/style.css #scripts
/js/script.js

CACHE: • CACHE: define início da declaração dos arquivos que
devem ser armazenados. • #images define o começo da declaração de imagens que serão armazenadas. • /images/image1.png mostra o caminho relativo para o arquivo

CACHE MANIFEST NETWORK:

NETWORK: signup.html updateInfo.pl

NETWORK: • NETWORK: define a área que nunca deve ser
armazenada. • O arquivo signup.html deve ser apenas acessado quando online.

NETWORK: • É possível utilizar wildcards como /dynamic/*, assim, tudo
que tentar ser acessado na pasta / dynamic/ estará disponível apenas quando conectado.

ATENÇÃO Caso haja um erro 404 na seção NETWORK, todo
o cache será ignorado.

CACHE MANIFEST FALLBACK:

FALLBACK: / /offline.html /users.pl /users.html

FALLBACK: • FALLBACK: é usado para dar caminhos diferentes ao
usuário quando ele está offline. • A primeira parte (no caso “/”) define o caminho ou arquivo a ser testado. • Separado por espaço, logo em seguida vem o arquivo ou caminho que deve ser carregado (no caso “/offline.html”)

CACHE STATES

CACHE STATES UNCACHED IDLE CHECKING DOWNLOADING UPDATEREADY OBSOLETE

CACHE STATES Todos esses cache states são retornados através do
window.applicationCache

CACHE STATES: UNCACHED Indica quando um objeto do cache da
aplicação não foi totalmente inicializado.

CACHE STATES: IDLE O cache da aplicação está ocupado, em
processo de atualização.

CACHE STATES: CHECKING O arquivo .manifest está sendo obtido e/ou
verificando se existe atualizações.

CACHE STATES: DOWNLOADING Os recursos estão sendo carregados para serem
incluidos no cache, devido a alteração no manifest.

CACHE STATES: UPDATEREADY Indica a existência de uma nova versão
do cache que já está pronta para ser usada.

CACHE STATES: OBSOLETE O cache atual da aplicação tornou-se obsoleto.

var appCache = window.applicationCache; switch (appCache.status) { case appCache.UNCACHED: //
UNCACHED == 0 return 'UNCACHED'; break; case appCache.IDLE: // IDLE == 1 return 'IDLE'; break; case appCache.CHECKING: // CHECKING == 2 return 'CHECKING'; break; case appCache.DOWNLOADING: // DOWNLOADING == 3 return 'DOWNLOADING'; break; case appCache.UPDATEREADY: // UPDATEREADY == 4 return 'UPDATEREADY'; break; case appCache.OBSOLETE: // OBSOLETE == 5 return 'OBSOLETE'; break; default: return 'UKNOWN CACHE STATUS'; break; };

EVENTOS

ATENÇÃO Se o appcache for atualizado, o navegador não irá
atualizar os itens ou a página carregada.

if (window.applicationCache) { applicationCache.addEventListener('updateready', function() { if (confirm('Esta página foi
atualizada. Deseja atualizar?')) { window.location.reload(); } }); }

“E COMO SABER QUANDO A APLICAÇÃO ESTÁ ONLINE?“

CHECANDO O STATUS DA CONEXÃO

Ou seja: navigator.onLine navigator.onLine ? alert("ONLINE") : alert("OFFLINE"); Simples. Usa-se:
Retorna true ou false.

LINKS ÚTEIS Can I Use? caniuse.com Cache Manifest Validator manifest-validator.com

DANIEL FILHO danielfilho.info danielfilho.info/@ danielfilho.info/+ danielfilho.info/g danielfilho.info/in Zone Of Front
Enders zofe.com.br

Sua Aplicação Offline

Sua Aplicação Offline

More Decks by Daniel Filho

Other Decks in Technology

Featured

Transcript