Погружение в React Native: навигация, работа оффлайн, пуш нотификации

Навигация

Правильный выбор навигации - залог хорошего проектирования приложений на React Native. От этого зависит не только структура проекта, но и его производительность. На данный момент существует два вида навигации:

1. Нативная

Она реализованная с помощью нативных элементов в iOS и Android и представлена двумя библиотеками:

• Native navigation от airbnb
• React Native Navigation от wix

Их преимущество - быстродействие и отображение специфичных для каждой платформы эелементов навигации.

2. javascript-реализация

Здесь можно потеряться в выборе и даже написать свою версию с помощью redux'а. Но самой популярной и часто используемой всё же является:

• React Navigation

Она достаточно проста в использовании, предоставляет основной набор навигации: Stack, Tabs и Drawer, а также возможность создавать вложенные навигаторы. Из недостатков - все анимации просчитываются с помощью javascript'а, и возможны утечки памяти при неправильном проектировании приложения. Так, например, если используется сложная навигации, то переход по навигатору из одной ветки через родителя в другую ветку осуществляется порождением новой компоненты для скрина, а не перерисовыванием старой. Нужно избегать подобных переходов и всегда следить за состоянием структуры роута.

Работа приложения оффлайн

Так же хорошо, как принцип "Mobile first" работает для web'а, в мобильном приложении главенствует принцип "Offline first".

Достигается это следующими способами:

1. Заданием начального состояния приложения

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

2. Использованием локального хранилища

В React Native это будет AsyncStorage. Здесь можно хранить те данные, которые должны быть доступны оффлайн, например, токен авторизованного пользователя, что позволит при следующем открытии приложения избежать повторногого логина.
Доступ к хранилищу можно либо огранизовать самому, либо воспользоваться библиотекой Redux Persist.

3. Следить за состоянием сети в помощью NetInfo

В этом случае важно определиться как реагировать приложению на отсутствие сети:

• самый простой способ уведомить пользователя - показать ему сообщение:
  react-native-dropdownalert - плагин, реализующий алерт для вывода различного рода уведомлений: не только о потере соединения, но и о новых сообщениях в чате, сообщениях о любых успешно или неуспешно завершенных операциях.

• react-native-offline - универсальная утилита для работы приложения в режиме онлайн/оффлайн. Основные ее особености: проверка наличия доступа в сеть пингом указанного сайта с заданной частотой (в отличие от NetInfo, которая показыват только наличие сети, не заботясь о том, что доступ в интернет все еще не доступен), использование этой проверки в рендере для выбора компоненты, добавление состояния сети в стейт,  блокировка запросов при отсутствии сети в редаксе или сагах, построение и управление очередью запросов при отсутствии соединения. В целом ну оочень богатая на функционал библиотека.

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

Push notification

Самое сложное в работе с нотификациями - это определиться с тем, как ваше приложение должно на них реагировать. Всего можно выделить 3 варианта обработки нотификации в зависимости от состояния приложения:

1. Приложение закрыто. Самый простой вариант, так как при открытии приложения обычно запускаются все процессы, но в этом случае (в отличие от нижеприведенных вариантов) мы можем обработать нотификацию, только если пользователь перешел по ней, при этом прочие уведомления игнорируются.
2. Приложение в трее/свернуто/неактивно. В этом случае мы можем обработать все входящие нотификации и, например, обновлять счетчик новых входящих без запроса к серверу.
3. Приложение открыто. Здесь мы скорее всего начинаем учитывать экран, на котором в данный момент находится пользователь. Например, при нотификации о новом сообщении для чата могут быть варианты: пользователь находится на странице чата или же на другой странице. В первом случае можно просто добавить сообщение в чат, во втором же - нужно обновить счетчик непрочитанных сообщений.

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