Сначала офлайн – это подход к мобильным приложениям, который работает одинаково независимо от подключения к Интернету. Чтобы применить эту технику в React Native, нам нужно использовать некоторые инструменты.

Давайте выясним, как мы можем обеспечить работу пользователей без подключения к Интернету.

Как это работает

Прежде чем мы перейдем к практической части, нам нужно понять, как этот подход работает внутри:

  • При запуске приложение проверяет, есть ли у пользователя доступ в Интернет;
  • Не имея доступа, все действия пользователя сохраняются в автономной базе данных. Эта база данных не используется другими пользователями приложения;
  • Как только пользователь получает доступ к Интернету, эта база данных синхронизируется с онлайн-базой данных. Таким образом, вся информация отправляется другим пользователям приложения;

Посмотрите на изображение ниже, которое показывает этот поток:

Почему вы должны рассмотреть этот подход?

Разработка приложения, обеспечивающего постоянное подключение пользователя к Интернету, является большой ошибкой.

Прежде чем продолжить, проведите следующий тест:

  • Отключите интернет-соединение
  • Посетите приложение, например Spotify, Netflix или Uber.
  • Убедитесь, что поведение похоже на то, что было бы при подключении к Интернету.
  • В этом заключается сила мышления в автономном режиме. 🚀

В некоторых случаях, таких как Spotify, пользователь по-прежнему может загружать песни для прослушивания в автономном режиме. Такое поведение также наблюдается в Netflix для фильмов или сериалов.

Ставка на эту архитектуру, безусловно, важна для обеспечения удобства использования вашего приложения.

Что делает ваше приложение, когда какой-либо пользователь не имеет подключения к Интернету?

Если пользователь не может перемещаться и заставить его работать должным образом, вы можете многое потерять при этом, поэтому давайте узнаем о некоторых методах и инструментах для преодоления этого поведения и применим подход Offline First в React Native.

Использование в приложении React Native

React Native предлагает несколько альтернатив для использования мышления Offline First.

Во-первых, нам нужно позаботиться о том, где сохранять данные, когда пользователь не в сети, для этого я рекомендую использовать RealmDB или WatermelonDB. Тем не менее, если вы хотите, вы можете без проблем использовать AsyncStorage, единственное ограничение заключается в том, что в этом случае вы не сможете выполнять какие-либо фильтры или запросы к данным, записанным в автономном режиме.

Теперь, когда у нас есть, куда записывать данные, нам нужно выяснить, находится ли пользователь в сети или нет. React Native предоставляет собственный API NetInfo, который предоставляет нам эту информацию.

Использование WatermelonDB для сложных данных

Если ваше приложение React Native простое и вы используете удаленные сервисы для хранения своих данных в базе данных и Redux во всем приложении, то вам подойдут react-native-offline и redux-persist.

Но для приложений, интенсивно использующих данные, эти методы могут замедлить работу вашего приложения. Использование Redux там, где это не нужно, достаточно для замедления времени загрузки, и оба этих пакета требуют Redux для обработки любых данных как онлайн, так и офлайн.

Для более сложных приложений, которые поддерживаются базой данных SQL, WatermelonDB — хороший вариант. С WatermelonDB все данные сохраняются и доступны локально в базе данных SQLite с использованием отдельного собственного потока. Арбуз тоже ленивый. Он загружает данные только тогда, когда это необходимо, поэтому запросы решаются быстро.

WatermelonDB — это просто локальная база данных, но она также предоставляет примитивы синхронизации и адаптеры синхронизации, которые можно использовать для синхронизации локальных данных с удаленной базой данных.

Чтобы использовать WatermelonDB для синхронизации ваших данных, вам нужно создать две конечные точки API на вашем бэкэнде — одну для отправки изменений и одну для получения изменений. Вам также придется создать собственную логику, чтобы определить, когда синхронизировать эти данные.

Использование MongoDB Realm для приложений, интенсивно использующих данные

Если ваше приложение, интенсивно использующее данные, использует нереляционные данные, то WatermelonDB может быть не лучшим решением. MongoDB Realm может быть лучшим решением. База данных Realm — это локальная база данных NoSQL, которую вы можете использовать в своем приложении React Native. Его можно интегрировать с MongoDB Atlas.

Если вы решите использовать Realm, то создать приложение React Native будет относительно просто с помощью MongoDB Realm React Native SDK. Realm имеет встроенное управление пользователями, которое позволяет создавать пользователей и аутентифицировать их на устройствах с использованием различных поставщиков аутентификации, включая электронную почту/пароль, JWT, Facebook, Google и Apple. Если вы решите синхронизировать свои данные с MongoDB, размещенной в облаке, эта функция также будет встроена в SDK.

Заключение

Создавать приложение, не думая о его автономном использовании, очень вредно. Этот подход очень помогает в настоящее время.
Используя методы и инструменты, упомянутые в этом посте, вы, вероятно, получите необходимое поведение в своем приложении.

Спасибо за внимание. Если у вас есть какие-либо мысли или предложения, не стесняйтесь оставлять комментарии ниже.

Вы можете следить за мной в Twitter, Github и LinkedIn.

Увидимся! 👋