Pular para o conteúdo principal

HTML5 - Armazenamento Offline




Off-line e de armazenamentoWeb Apps pode começar a trabalhar mais rápido e mesmo se não houver conexão com a internet, graças ao cache App HTML5, bem como o armazenamento local, DB indexado, e as especificações API de arquivos.
O HTML5, portanto, especifica algumas novas API webs, dentre elas a que iremos abordar neste trabalho são as que trabalham com os dados offline. As API’s definidas, atualmente, pelo HTML5 são: localStorage, IndexDB e File API. Já houve uma proposta, trazida pela Apple, de uma API denominada Web SQL, mas a mesma foi retirada da especificações da HTML 5, portanto não há como garantir quais dessas API’s estarão disponíveis no próximo ano. E também temos o App Cache, que é um cache otimizado no HTML5, e a primeira parte deste trabalho.

Application Cache
É um novo padrão apresentado pelo HTML5, já é aceito pelos principais browsers do mercado, com exceção do IE (até a versão 9). Ele é baseado em um arquivo de manifesto, definido como parâmetro na TAG HTML. Sua declaração é bem simples, vejamos:
Aqui estamos informando ao nosso browser que nosso cache seguirá o manifesto no arquivo cache.appcache. Quanto a este arquivo duas observações: ele pode ter qualquer extensão (mas recomenda-se usar .appcache) a extensão utilizada deve ser reconhecida como o MIME type text/cache-manifest.

Um arquivo de manifesto de cache possui três sessões, a saber:
CACHE: são os arquivos que queremos explicitamente colocar em cache no cliente;
NETWORK: são os arquivos que não desejamos que sejam cacheados, os arquivos aqui listados sempre são buscados da web, todos os arquivos que vem de suas aplicações deveriam ser listados aqui, o uso do * é aceito nesta sessão
FALLBACK: arquivos alternativos aos arquivos em NETWORK, o uso do * é aceito nesta sessão.

Uma última observação sobre o arquivo de manifesto: ele precisa ser atualizado para ser reconhecido pelo browser como tendo novos conteúdos para baixar, então se você atualizou o conteúdo de arquivos cacheados, faça uma alteração no arquivo .appcache, normalmente em uma linha de comentário (iniciada por #).

Vejamos, então um exemplo deste arquivo:

Todo arquivo de manifesto do App Cache deve começar com CACHE MANIFEST, as linhas de 2 a 4 possuem os comentários para atualização dos dados nos clientes. A linha 6 trás o identificador da sessão CACHE, que possui dois arquivos marcados explicitamente para que sejam armazenados em cache, o index.html e o leia-me.html. Nas linhas 10 a 12 temos os arquivos que sempre virão da rede e, finalmente, temos por ultimo a declaração de um arquivo padrão offline.html, para quaisquer arquivos que necessitem serem recuperados da rede, mas a mesma não esteja disponível.

E se tiverem mais arquivos neste site? Eles terão seu armazenamento gerenciado pela política padrão do browser.

Além do arquivo de manifesto o HTML5 especifica a API para o App Cache, esta API prevê um objeto incorporado ao window, de forma que podemos manipular algumas coisas via javascript.



LocalStorage
É a API offline mais difundida entre as atualmente previstas no HTML5. Ela trabalha no padrão chave:valor, então você precisa criar um mecanismo para trabalhar com suas chaves para guarda e recuperação dos valores. Seu funcionamento pode lembrar bastante o suo de cookies, contudo o mesmo é mais sofisticado e não faz requisições de cabeçalhos html enormes. Apesar de armazenar apenas string a localStorage pode armazenar objetos JSON tranquilamente, já que seu espaço de armazenamento é de 2.5MB a 5MB.

A API localStorage nos dá dois objetos para trabalharmos com os dados offline. o localStorage: que é acessível por todas as sessões do servidor no browser utilizado, e o sessionStorage, que é disponível apenas por sessão no browser. Os dois nos permite três métodos:
getItem(key): que retorna o value associado à chave key;
setItem(key, value): que armazena o value associado à chave key;
removeItem(key): que apaga o chave e o value associados a key.

Comentários

Postagens mais visitadas deste blog

Temperamento - Decubra seu Perfil Profissional

Pergunta Sim Não 1: Gosta de conversar? 2: Gosta de atividade, ação? 3: Emociona-se com facilidade? 4: “Explode” facilmente? 5: Está sempre atualizado nos mais diversos assuntos(cultura geral)? 6: É imaginativo? 7: Tem inclinação para a crítica e para ironia? 8: Tem tendência a mudar de opinião se apresentarem argumentos válidos? 9: Quando lhe pedem desculpas,reconcilia-se com facilidade? 10: Tem dificuldade em perdoar/esquecer? 11: Gosta de fazer o bem sempre que pode? 12: Aflige-se facilmente com os males do próximo? 13: É mais optimista do que pessimista? 14: Ri com facilidade quando há motivo? 15: É uma pessoa inconstante,pouco perseverante? 16: Prefere que sejam outros a resolver os problemas? 17: Aceita facilmente novas ordens que lhe são dadas? 18: Gosta de novidades? 19: Gosta de andar elegante, bem vestido? 20: Gosta de ser admirado/elogiado pelos outros? Pergunta Sim Não

Downloads no iTunes U chegam a 300 milhões

A Apple anunciou nessa terça que nada menos que 300 milhões de downloads de conteúdos educacionais foram feitos por meio do ITunes. A iniciativa permite que estudantes do mundo inteiro baixem programas de áudio e de vídeo produzidos por mais de 800 universidades, entre elas Harvard , Cambridge , Oxford e o MIT .
PDF Converter Precisa converter algum arquivo em PDF, mas não tem algum programa que faça isso? O site PDF Converter faz o serviço em poucos cliques. Vá ao botão Browse, escolha o documento que quer converter, digite o e-mail de destino e clique em Convert Your File Google Tradutor Se você tem dificuldades em ler textos em outras línguas, o Google Tradutor é uma boa opção. Para utilizá-lo, escolha o idioma, digite o texto e, depois, selecione para qual idioma quer traduzir. Colar um endereço de página (URL) na caixa de texto e clicar em Traduzir também funciona HearNames O HearNames mostra como se pronuncia corretamente um nome. Para usar o serviço, digite o nome na caixa de texto e clique em Search. Após isso, clique no ícone de alto-falante que aparecerá para ouvir como se fala SuperLame Útil para quem não sabe mexer em programas de edição, o SuperLame executa uma função simples: inserir balões de diálogo em imagens. O procedimento é simples: faça o upload de uma imagem