Há muitos motivos para considerar a criação de um aplicativo React Native off-line primeiro. Você precisa pensar em fazer isso antes mesmo de criar seu aplicativo, porque se esperar até que ele receba análises críticas por estar lento ou sem resposta, pode ser tarde demais.
Mas primeiro off-line não é um solução única para todos. Existem várias maneiras de implementar primeiro off-line e, dependendo da estrutura do seu aplicativo, alguns métodos funcionarão sem ter que alterar a arquitetura do aplicativo, enquanto outros não. Neste artigo, vamos cobrir cinco maneiras de implementar um aplicativo offline primeiro no React Native.
O que é offline primeiro?
Offline primeiro significa que você constrói seu React Aplicativo nativo para funcionar com ou sem conexão à Internet. Você pode fazer isso de várias maneiras, mas vamos ver por que gostaríamos de usar um aplicativo off-line primeiro.
O motivo mais óbvio é que seu aplicativo pode ser acessado em locais com intermitência ou sem serviço de celular, e é por isso que comecei a criar um aplicativo off-line primeiro. Meu aplicativo estava recebendo avaliações negativas por causa de uma conexão perdida. Implementar offline primeiro resolveria esse problema, mas há outro motivo para usá-lo: salvar dados localmente é simplesmente mais rápido.
Não importa o tipo de conexão móvel que você tenha, haverá latência que afetará o experiência de usuário. Ao salvar os dados localmente primeiro e, em seguida, sincronizá-los com os serviços em segundo plano, os indicadores de carregamento gastam menos tempo na IU e os usuários podem ir para a próxima tarefa mais rápido.
Usar primeiro off-line em seu aplicativo móvel significa os usuários obtêm a mesma IU responsiva quer tenham 3G, 4G, 5G ou nenhuma conexão.
Implementação de métodos offline primeiro
Implementação offline primeiro em um aplicativo existente isn não é fácil, mas até começar a me aprofundar nele, não percebi que havia tantas opções, ainda mais do que listamos aqui, porque todo mundo cria um aplicativo React Native de maneira um pouco diferente.
Este artigo começou como uma pesquisa para implementar primeiro offline em um aplicativo React Native existente. Se você está iniciando um aplicativo do zero, qualquer uma dessas opções pode funcionar para você. Se você estiver usando um aplicativo existente, talvez seja necessário fazer algumas alterações.
Usando react-native-offline e Redux para funcionalidade local-first
Os dois primeiros métodos nós’Cobriremos que ambos usam Redux para lidar com a funcionalidade local-first. Isso faz sentido se todas as partes do seu aplicativo usam Redux e ele se conecta a serviços remotos para salvar dados. Você não terá que escrever métodos de sincronização ou garantir que seu banco de dados local seja do mesmo tipo que seu banco de dados remoto.
O pacote react-native-offline é um canivete suíço de ferramentas projetado especificamente para aplicativos React Native. Queremos um aplicativo que faça tudo offline que pode fazer online, bem como sincronize as alterações quando encontrar uma conexão.
Para começar com react-native-offline, adicione o redutor de rede que react-native-offline fornece ao seu redutor de raiz:
import {createStore, combineReducers} from’redux’; importar {redutor como rede} de’react-native-offline’; const rootReducer=combineReducers ({//… seus outros redutores aqui… rede,}); const store=createStore (rootReducer); armazenamento padrão de exportação;
Agora você tem duas opções. Você pode usar o ReduxNetworkProvider como um descendente do seu provedor Redux para que ele possa acessar a loja, da seguinte forma:
import store from’./reduxStore’; import React from’react’; import {Provider} from’react-redux’; importar {ReduxNetworkProvider} de’react-native-offline’; const Root=()=> (
A outra opção é bifurcar o networkSaga de sua saga root se seu aplicativo usar Redux sagas. Este método funciona sem ter que envolver seus componentes com funcionalidade extra.
import {all} from’redux-saga/effects’; importar saga1 de’./saga1′; importar {networkSaga} de’react-native-offline’; função padrão de exportação * rootSaga (): Generator *, *, *> {yield all ([fork (saga1), fork (networkSaga, {pingInterval: 30000}),]); }
Então, por meio do uso do middleware Redux fornecido por react-native-offline, você pode determinar se o aplicativo está online antes de fazer uma chamada de API. Se estiver online, tudo funciona conforme o esperado.
Se o aplicativo estiver offline, a ação despachada é armazenada em uma fila onde pode ser reenviada assim que o aplicativo estiver online novamente, o que será o suficiente se o seu telefone ficar offline apenas quando o aplicativo estiver em execução.
Para ter a funcionalidade offline primeiro quando o aplicativo for iniciado e não houver conexão, você precisará adicionar redux-persist para seu aplicativo. Isso permite que ele armazene um instantâneo do estado do seu aplicativo na memória do dispositivo e reidrate o estado quando o aplicativo é iniciado.
Habilitando offline primeiro com redux-offline
O O pacote npm redux-offline é semelhante ao react-native-offline porque usa Redux para lidar a funcionalidade online versus offline, mas é um pouco diferente. Primeiro, você adiciona o redux-offline store enhancer para seu redutor de raiz.
import {applyMiddleware, createStore, compose} from’redux’; importar {offline} de’@ redux-offline/redux-offline’; import offlineConfig de’@ redux-offline/redux-offline/lib/defaults’; const store=createStore (redutor, compor (applyMiddleware (middleware), offline (offlineConfig)));
A seguir, decore suas ações Redux com metadados offline:
const saveData=data=> ({type:’SAVE_DATA’, payload: {data}, meta: {offline: {//a ação de rede a ser executada: efeito: {url:’/api/save-data’, método:’POST’, json: {data}},//ação a despachar quando o efeito for bem-sucedido: commit: {type:’SAVE_DATA_COMMIT’, meta: {data }},//ação a despachar se a ação da rede falhar permanentemente: rollback: {type:’SAVE_DATA_ROLLBACK’, meta: {data}}}}});
Se uma chamada de API for concluída, a ação de confirmação será chamada. Se o aplicativo não estiver online, o redux-offline irá esperar até que a conexão seja restaurada e tentar salvar novamente os dados que não foram confirmados.
Se a ação falhar permanentemente, a ação de rollback será chamada, o que irá reverter o estado do aplicativo para o estado anterior à chamada da ação. Aqui você pode especificar uma ação a ser chamada quando isso ocorrer. Por exemplo, notificar o usuário de que suas alterações não foram salvas e que ele terá que tentar novamente quando tiver conexão de rede.
Redux-offline usa redux-persist por padrão, então você não precisa preocupe-se em escrever sua implementação como faria com react-native-offline. Mas redux-offline também usa a não confiável API NetInfo para verificar a conexão. A API NetInfo pressupõe que, se você tiver um endereço IP público, está conectado à Internet, o que nem sempre é o caso, pois o aplicativo pode perder a conexão após receber um endereço IP. Você pode querer substituir o método detectNetwork em reduxOfflineConfig por um método de ping em seu próprio back-end para verificar a conexão.
Usando WatermelonDB para aplicativos React Native complexos e offline primeiro
Se o seu O aplicativo React Native é simples e você usa serviços remotos para armazenar seus dados em um banco de dados e Redux em todo o aplicativo, então qualquer um dos dois pacotes npm acima funcionará para você.
Mas para aplicativos que são dados-intensivo, esses métodos podem tornar seu aplicativo lento. Usar Redux onde é desnecessário é suficiente para criar tempos de carregamento mais lentos, e ambos os pacotes requerem Redux para lidar com quaisquer dados online e offline.
Para aplicativos mais complexos que são apoiados por um banco de dados SQL, WatermelonDB é uma boa opção . Com o WatermelonDB, todos os dados são salvos e acessados localmente em um banco de dados SQLite usando um thread nativo separado. A melancia também é preguiçosa. Ele carrega dados apenas quando são necessários, então as consultas são resolvidas rapidamente.
O WatermelonDB é apenas um banco de dados local, mas também fornece primitivos de sincronização e adaptadores de sincronização que você pode usar para sincronizar dados locais com seu banco de dados remoto. Para usar o WatermelonDB para sincronizar seus dados, você precisa criar dois endpoints de API em seu back-end-um para enviar mudanças e outro para extrair mudanças. Você também terá que criar sua própria lógica para determinar quando sincronizar esses dados. Para obter mais informações sobre como isso funciona, verifique como usar WatermelonDB para sincronização de dados offline .
Usando MongoDB Realm para aplicativos com muitos dados
Se o seu aplicativo com muitos dados usa dados não relacionais, então o WatermelonDB pode não ser a melhor solução. MongoDB Realm pode ser uma solução melhor . O banco de dados Realm é um banco de dados NoSQL local que você pode usar em seu aplicativo React Native. Ele pode ser integrado ao MongoDB Atlas.
Se você escolher usar o Realm, criar um aplicativo React Native é relativamente simples usando o MongoDB Realm React Native SDK . O Realm possui gerenciamento de usuário integrado que permite a criação e autenticação do usuário em dispositivos usando uma variedade de provedores de autenticação, incluindo e-mail/senha, JWT, Facebook, Google e Apple. Se você optar por sincronizar seus dados com um MongoDB hospedado na nuvem, esse recurso também será integrado ao SDK.
SQLite e armazenamento em nuvem
Esta é uma boa opção para projetos paralelos e aplicativos de hobby. É também uma maneira simples de criar o protótipo de um aplicativo React Native. É um conceito muito básico: basta armazenar dados localmente usando SQLite e, em seguida, usar um serviço de nuvem como o Dropbox para sincronizar o banco de dados com a nuvem.
Para o SQLite peça do quebra-cabeça, você vai querer usar a pacote npm react-native-sqlite-storage . Para obter mais detalhes sobre isso, consulte este artigo em usando SQLite com React Native .
A próxima etapa é adicionar o DropBox ou outro provedor de armazenamento em nuvem. Você terá que ir para a página de desenvolvedores do Dropbox para criar seu aplicativo. Em seguida, você precisará criar um método para autorizar o DropBox e um método para sincronizar o arquivo de banco de dados .
Conclusão
Off-line primeiro pode alterar a forma como os usuários reagem ao seu aplicativo React Native, especialmente se ele é usado no campo onde as conexões de rede podem ser irregulares. Mas não existe uma solução única que sirva para todos.
Eu nem abordei todas as soluções potenciais neste artigo. Se você está começando do zero, pode usar qualquer uma dessas opções. Com um aplicativo existente, no entanto, é provável que você tenha que fazer algumas mudanças arquitetônicas, a menos que já use o Redux para lidar com todo o seu estado. Boa programação!
