¶ Offline first
| Data de elaboração | 17/07/2024 |
|---|---|
| Responsável pelo estudo | Vinicius da Rosa Pereira |
| Equipe do estudo | Liderança Técnica |
| Alvo | Futuro sistema de cadastro de pessoas com deficiência |
| Origem | Implementação: Estudo que verifica a viabilidade técnica para o desenvolvimento de uma aplicação web offline. |
| Objetivo | Verificar a viabilidade técnica para o desenvolvimento de uma aplicação web offline |
Esse estudo se baseia na proposta de um produto para cadastro de pessoas especiais, com o objetivo de abranger todos os cenários, foi solicitado uma aplicação que rode de forma offline para possibilitar o mapeamento de unidade rural e ribeirinha.
Dado o desafio e a complexidade do produto, foram levantado algumas soluções tecnológicas, com isso em comum acordo é mister que será criado o produto em um fluxo que é chamado de offline first.
Offline First é uma abordagem de desenvolvimento que garante o funcionamento do app sem internet, armazenando dados localmente e sincronizando-os com o servidor quando a conexão é restabelecida, proporcionando uma melhor experiência em áreas com conectividade instável.
¶ Banco de dados
O IndexedDB é uma API de armazenamento de dados no navegador que permite o armazenamento de grandes quantidades de informações de forma estruturada e persistente no lado do cliente, ou seja, diretamente no dispositivo do usuário. Ao contrário do localStorage, que é mais simples e limitado, o IndexedDB é um banco de dados NoSQL que permite o armazenamento de objetos complexos, como coleções de dados, imagens ou arquivos.
Ele funciona de maneira assíncrona, o que significa que as operações de leitura e gravação no banco de dados não bloqueiam o funcionamento do aplicativo, garantindo uma melhor performance. O IndexedDB é especialmente útil em aplicações Offline First, pois permite que os dados sejam armazenados e manipulados localmente, mesmo quando não há conexão com a internet, sincronizando as alterações quando a conectividade é restaurada.
Principais características do IndexedDB:
Suporte a grandes volumes de dados;
Armazenamento de dados complexos (objetos, arrays, etc.);
Operações assíncronas para melhor performance;
Suporte a transações, garantindo a consistência dos dados;
Segurança baseada nas permissões do navegador, garantindo que somente o site que criou os dados possa acessá-los.
Com essas vantagens, o IndexedDB é uma ferramenta fundamental para o desenvolvimento de aplicativos modernos que precisam gerenciar dados localmente e garantir uma boa experiência de usuário, mesmo offline.
¶ LocalStorage
O LocalStorage é uma API de armazenamento do navegador que permite salvar dados no formato de pares chave-valor diretamente no navegador do usuário. Ele é usado principalmente para armazenar dados de forma persistente, ou seja, os dados permanecem salvos mesmo após o fechamento do navegador ou o recarregamento da página. A API é sincronamente acessível e suporta apenas strings como valores.
¶ Características e Abrangência
- Persistência Longa:
Os dados salvos no LocalStorage não expiram, permanecendo disponíveis até que sejam explicitamente removidos pelo site ou pelo usuário.
Ideal para armazenar preferências de usuário, como temas, configurações de layout, ou pequenos estados da interface.
- Escopo por Domínio:
Cada domínio tem seu próprio espaço de armazenamento. Um site não pode acessar o LocalStorage de outro domínio.
O escopo pode ser compartilhado entre subdomínios (ex.: app.exemplo.com e www.exemplo.com), dependendo da implementação.
- Capacidade de Armazenamento:
- A capacidade típica é de 5MB por domínio em navegadores modernos, embora isso possa variar de acordo com o navegador e dispositivo.
- Compatibilidade com Navegadores:
Suportado pela maioria dos navegadores modernos (Chrome, Firefox, Safari, Edge, etc.).
Disponível tanto em aplicações web padrão quanto em PWAs (Progressive Web Apps)
¶ PWA
Progressive Web App (PWA) é um tipo de aplicação web que utiliza tecnologias modernas para oferecer uma experiência similar à de um aplicativo nativo, mas acessível diretamente pelo navegador. PWAs combinam o melhor dos sites e dos aplicativos nativos, proporcionando uma interface responsiva e rápida, ao mesmo tempo que oferecem funcionalidades típicas de apps, como notificações push e a capacidade de trabalhar offline.
¶ Principais benefícios do PWA:
Instalação opcional: Embora possa ser instalado na tela inicial do dispositivo, não é necessário passar por uma loja de aplicativos como a Google Play ou a App Store. O usuário pode instalar o app diretamente do navegador.
Funcionalidade offline: Utilizando Service Workers, os PWAs podem funcionar offline ou em condições de conectividade limitada, armazenando recursos e dados no dispositivo.
Desempenho rápido: PWAs são projetados para serem rápidos, tanto no carregamento inicial quanto durante o uso, graças ao cache eficiente dos recursos essenciais.
Atualizações automáticas: O PWA atualiza-se automaticamente sempre que uma nova versão é lançada, sem a necessidade de intervenção do usuário.
Compatibilidade entre dispositivos: O PWA é responsivo, adaptando-se a qualquer dispositivo (desktop, smartphone, tablet), oferecendo uma experiência uniforme.
Notificações push: Assim como aplicativos nativos, os PWAs podem enviar notificações push para engajar o usuário, informando sobre atualizações ou eventos importantes.
Economia de dados e armazenamento: PWAs costumam ser mais leves em comparação aos aplicativos nativos, ocupando menos espaço no dispositivo e economizando dados ao carregar de forma otimizada.
Acesso a APIs de hardware: PWAs têm acesso a várias APIs que permitem funcionalidades como GPS, câmera, microfone, notificações, entre outras, embora com algumas limitações dependendo da plataforma.
¶ Suporte às plataformas:
Os PWAs são suportados por todos os principais navegadores e sistemas operacionais:
Android: Excelente suporte. PWAs podem ser instalados diretamente no dispositivo Android através do Google Chrome, e outros navegadores também oferecem suporte.
iOS: O suporte é mais limitado, mas existe. PWAs podem ser instalados no iOS (via Safari) e funcionar offline, porém, há algumas restrições em relação a notificações push e ao uso de certas APIs de hardware.
Windows: No Windows, PWAs podem ser instalados tanto pelo Microsoft Edge quanto pelo Google Chrome. Eles podem ser integrados ao sistema como qualquer outro aplicativo, aparecendo no menu Iniciar e podendo ser fixados na barra de tarefas.
macOS: PWAs são suportados pelo Safari e outros navegadores como o Chrome. Eles podem ser adicionados à tela inicial ou ao dock, como qualquer outro aplicativo.
Fluxo de sistema
Segue o processo de registro de entrevistas no ambiente web, diferenciando os caminhos que o sistema deve seguir dependendo da disponibilidade de conexão com a internet.
Início: O fluxo começa com o ponto «Start».
Processo de cadastro de entrevista: O primeiro passo após o início envolve o «Processo de cadastro de entrevista», onde o sistema coleta as informações necessárias.
Salvar dados: Em seguida, os dados da entrevista são salvos.
Verificação de internet:
O sistema verifica se há conexão com a internet.
Caso sim, o fluxo segue para:
Envia para API: Os dados são enviados para a API.
Salva informações de pessoas na API pessoa: As informações são salvas em um serviço externo (API de pessoa).
Salva dados do formulário no banco do projeto: O formulário completo é salvo no banco de dados do projeto.
O fluxo termina com «End».
Caso não haja internet, o fluxo segue para:
Interpreta o formulário: O formulário é interpretado localmente.
Salva no LocalStorage: Os dados são salvos localmente no navegador usando o LocalStorage.
O fluxo também termina com «End».
¶ Diagrama de atividade do fluxo de cadastro online
Este fluxo ilustra o processo de interação de um usuário com um sistema de cadastro online, desde a inserção de dados até o armazenamento final no banco de dados. Cada etapa do processo depende da verificação da conexão com a internet e do envio dos dados por APIs, garantindo que as informações sejam armazenadas de forma correta e organizada no banco de dados.
¶ Diagrama de Atividade do fluxo de cadastro offline
Este fluxo mostra como o sistema lida com a falta de conexão à internet durante o processo de cadastro, permitindo que o usuário continue inserindo dados e salvando localmente. O sistema armazena as informações de forma temporária até que a conexão seja restabelecida, quando então poderá enviar os dados para o servidor remoto.
Modelo de banco de dados
Este modelo de banco de dados descreve a estrutura de tabelas e relacionamentos usados para armazenar dados de um formulário, suas perguntas e as respectivas respostas.
¶ 1. Tabela: Formulário
ID: Identificador único do formulário.
pessoa_id: Referência à pessoa que preencheu o formulário, associando o formulário a um indivíduo específico.
Data de criação: Data em que o formulário foi criado.
Data de atualização: Data da última atualização do formulário.
¶ 2. Tabela: Resposta
formulario_id: Relaciona a resposta ao formulário correspondente, indicando a qual formulário a resposta pertence.
pergunta_id: Referência à pergunta respondida, ligando a resposta a uma pergunta específica.
resposta: O campo que armazena a resposta dada pelo usuário à pergunta.
anexo: Possibilidade de um campo para anexos relacionados à resposta, como arquivos, imagens ou documentos.
¶ 3. Tabela: Pergunta
id: Identificador único da pergunta.
texto: O texto da pergunta.
tipo_do_questionario: Identifica o tipo de questionário em que essa pergunta está inserida, possivelmente classificando diferentes tipos de formulários.
ordem_da_pergunta: A ordem em que a pergunta deve aparecer no questionário.
¶ Relacionamentos
A tabela formulário está relacionada à tabela resposta através do campo formulario_id, que permite que várias respostas sejam associadas a um único formulário.
A tabela pergunta também se relaciona com a tabela resposta por meio do campo pergunta_id, indicando qual pergunta foi respondida.
Conclusão
Com base no estudo e na criação do protótipo, foi possível concluir que a implementação do projeto em PWA (Progressive Web App) é viável, especialmente com o suporte à funcionalidade offline em caso de perda de conexão com a internet. No entanto, embora o IndexedDB tenha se mostrado uma tecnologia utilizável, sua compatibilidade com todos os navegadores de dispositivos móveis não foi ideal. Dessa forma, o LocalStorage se apresentou como uma solução mais prática e confiável para armazenamento de dados em dispositivos móveis, garantindo uma maior usabilidade do sistema.