Como Criar Uma Aplicação Offline Com HTML5 em 5 Passos

Com HTML5 temos a possibilidade de cachear páginas para uso offline, o pessoal do catswhocode escreveram recentemente um artigo explicando em 5 passos como criar uma aplicação usando a API offline da HTML5, abaixo segue o artigo adaptado.

1 – Adicione um doctype HTML5

A primeira coisa que precisamos criar é um arquivo HTML5 válido, para isso vamos inserir o doctype do HTML5:

[code language=”html”]
<!DOCTYPE html>
<html> …
[/code]

Crie um arquivo chamado index.html, caso tu precise toda documentação do HTML5 está disponível no site da W3C.

2 – Adicione suporte ao .htaccess

O arquivo que vamos criar para cachear nossas páginas é chamado de manifest. Antes de criar ele nós primeiro temos que adicionar a diretiva ao arquivo .htaccess (isso considerando que seu servidor é apache).  Abra o arquivo .htaccess, que está localizado na raiz do seu servidor, e adicione o seguinte código a ele: AddType text/cache-manifest .manifest Essa diretiva faz com que todo arquivo .manifest seja servido como text/cahe-manifest. Se o arquivo .htaccess não tiver essa diretiva ele não reconhecerá o arquivo .manifest fazendo com que a aplicação offline não funcione.

3 – Crie o arquivo manifest

Agora a coisa fica mais interessante vamos criar o arquivo .manifest. Crie um arquivo e salve ele como offline.manifest. Então cole o código abaixo nele, ele será explicado depois.
[code language=”html”]
CACHE MANIFEST
#This is a comment
CACHE
index.html
style.css
image.jpg
image-med.jpg
image-small.jpg
notre-dame.jpg
[/code]

A forma que o arquivo .manifest funciona é muito simples, depois da declaração CACHE tu tem uma lista com todos os arquivos que estarão disponíveis na versão offline da aplicação. Isso é suficiente para cachear uma página simples, mas o cache da HTML5 traz outras possibilidades. Por exemplo, considere o seguinte arquivo .manifest:

[code language=”html”]
CACHE MANIFEST
#Isso é um comentário

CACHE
index.html
style.css

NETWORK:
search.php
login.php

FALLBACK:
/api <strong>offline</strong>.html
[/code]

Como no exemplo anterior temos a declaração CACHE que cacheia os arquivos index.html e style.css. Mas nós também temos a declaração NETWORK, que é usada para especificar arquivos que não devem ser cacheados, como a página de login. A última declaração FALLBACK, permite direcionar o usúario para uma outra página caso algum recurso offline não esteja disponível.

4 – Link seu arquivo manifest no seu documento HTML

Agora tanto seu arquivo .manifest como html estão prontos, a única coisa que temos que fazer é linkar o arquivo .manifest no documento HTML. Para fazer isso é fácil basta adicionar o atributo manifest na tag html, como abaixo:

[code language=”html”]
<html manifest="/<strong>offline</strong>.manifest">
[/code]

5 – Teste

Se tu entrar no seu index.html com o Firefox 3.5+ tu verás um alerta como este:

Se tu testar em outros navegadores, como Chrome, Safari, Android e iPhone, tu não verás esse alerta, por esses navegadores já fazem o cache automático.

Suporte dos Navegadores

Abaixo a lista de suporte dos navegadores:

  • Firefox 3.5+
  • Safari 4.0+
  • Chrome 5.0+
  • Opera 10.6+
  • iPhone 2.1+
  • Android 2.0+
  • Internet Explorer (sem suporte)

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *