SQLite offline em dispositivos móveis com HTML5

O HTML5 de fato contém adicionais altamente interessantes para o desenvolvimento, e a criação e interação com  banco de dados offline certamente é uma delas.
E tudo isto sem nenhuma linguagem back-end, apenas sendo realizado via Javascript, responsável por criar a tabela e realizar as querys de CRUD – (Create – Retrieve – Update – Delete), bem como ter suas funções de tratamento de erros e atualizações de status.

Sendo assim uma boa solução para quando suas WebApps necessitam, por algum motivo, de ter um banco de dados local e de acesso offline.

Esta funcionalidade é permitida em navegadores que suportam HTML5 e SQLite, cujo script JS detecta e exibe esta possibilidade logo ao iniciar sua execução.

Este mesmo exemplo foi testado nos navegadores:
Google Chrome;
Safari Mobile (iPad/iPhone/iPod Touch) – Lembrando que para estes por default o limite é de 5MB de cache.

Abaixo a visualização do banco criado utilizando o Google Chrome:

Tudo que precisamos são apenas 3 estruturas:

  • HTML – (index.html);
  • Javascript – (offlinedatabase.manifest);
  • Manifest – (offlinedatabaseJS.js).

Respectivamente e objetivamente: HTML a inteface para o usuário, Javascript com toda criação do banco bem como suas funções de CRUD, tratamento e atualizações de status e o arquivo manifest responsável por “salvar” o arquivo com as funções para uso offline.

Como uma imagem vale mais do que mil palavras, abaixo a representação desta estrutura:

Vamos ao código, parte HTML:

Abaixo a parte Javascript, onde temos as funções CRUD para criação da tabela (função ao iniciar a aplicação), manipulação dos dados, tratamento de erros e atualizações de status.:

O arquivo .manifest possui apenas o nome do arquivo de Javascript para que seja armazenado no cache com fins de ser acessado offline.

DEMODOWNLOAD

Espero que tenham gostado do post, em casos de dúvidas bastam comentar ou entrar em contato via email.
Forte abraço e excelente resto de semana.