Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@danielfilho

Slide 3

Slide 3 text

ig.com.br front-end developer

Slide 4

Slide 4 text

zofe.com.br co-host

Slide 5

Slide 5 text

danielfilho.github.com eternal apprentice

Slide 6

Slide 6 text

AGENDA

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

IMPORTANTE appCache: tecnologia manifest : arquivo físico

Slide 11

Slide 11 text

APPCACHE

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

APPCACHE VANTAGENS Disponibilidade Mobilidade Otimização da banda

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

APPCACHE COMO FUNCIONA?

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

COMO USAR?

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

COMO USAR? EXEMPLO DE CÓDIGO ...

Slide 22

Slide 22 text

ANATOMIA DO ARQUIVO MANIFEST.APPCACHE

Slide 23

Slide 23 text

MANIFEST.APPCACHE Cache Network Fallback

Slide 24

Slide 24 text

EXEMPLO DE MANIFEST.APPCACHE

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

CACHE MANIFEST: DECLARANDO

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

CACHE MANIFEST CACHE:

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

CACHE MANIFEST NETWORK:

Slide 33

Slide 33 text

NETWORK: signup.html updateInfo.pl

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

CACHE MANIFEST FALLBACK:

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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”)

Slide 40

Slide 40 text

CACHE STATES

Slide 41

Slide 41 text

CACHE STATES UNCACHED IDLE CHECKING DOWNLOADING UPDATEREADY OBSOLETE

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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; };

Slide 50

Slide 50 text

EVENTOS

Slide 51

Slide 51 text

var appCache = window.appCache; appCache.addEventListener('cached', function(){...}, false); appCache.addEventListener('checking', function(){...}, false); appCache.addEventListener('downloading', function(){...}, false); appCache.addEventListener('error', function(){...}, false); appCache.addEventListener('noupdate', function(){...}, false); appCache.addEventListener('obsolete', function(){...}, false); appCache.addEventListener('progress', function(){...}, false); appCache.addEventListener('updateready', function(){...}, false);

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

CHECANDO O STATUS DA CONEXÃO

Slide 57

Slide 57 text

DEMO

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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