При создании мобильного приложения разумно ожидать, что пользователь в какой-то момент будет использовать ваше приложение без подключения к Интернету. Как ваше собственное приложение реагирует на эту ситуацию? Он сидит на загрузочном спиннере? Показать им сообщение об ошибке? Подарить им полезный опыт? Или полностью функциональный?
Я стремлюсь к «полезному опыту». Все может работать не на 100%, но все равно что-то делать. Это также означает, что если кто-то использует мое приложение и временно теряет подключение к Интернету, он может продолжать делать то, что делал, без какого-либо (или, по крайней мере, минимального) негативного воздействия.
Стратегия
Итак, как мы можем этого добиться? Допустим, у нас есть приложение со списком контактов. Вы можете вводить, редактировать и удалять контакты, но приложение также будет получать дополнительную информацию об этом контакте, который вы только что добавили. Это означает, что ваш контакт может получить новую информацию, когда вы в следующий раз воспользуетесь приложением.
Но теперь давайте подумаем об автономном режиме. Что делать, если кто-то собирается пойти на встречу и хочет получить некоторую информацию о человеке, с которым собирается встретиться (например, как долго они проработали в своей нынешней компании, спасибо LinkedIn), но они этого не делают есть подключение к Интернету?
Чтобы решить эту проблему, мы могли бы сохранить список контактов на диск в последний раз, когда наш пользователь использовал приложение. Это означает, что у пользователя будут некоторые данные, хотя и не самые свежие, о человеке, с которым он собирается встретиться. Полезный, но не обязательно полный опыт.
Еще мы хотели бы рассмотреть некоторые действия, к которым пользователь, возможно, привык (добавление контакта, поиск контактов), должны работать в автономном режиме. Их реализация выгодна по двум направлениям: во-первых, пользователь может выполнять стандартные действия в автономном режиме, во-вторых) даже когда они находятся в сети, вы можете сделать их взаимодействие «мгновенным», поскольку у вас есть оптимистичные обновления.
Redux-persist
Примечание. Использование redux-persist предполагает, что вы используете redux в своем приложении. Вы могли бы сделать аналогичные вещи, используя AsyncStorage напрямую, хотя это было бы гораздо более ручным.
Я обнаружил, что как только вы дойдете до этой точки создания своего приложения, вы, вероятно, внедрили в свое приложение redux, по крайней мере, в некоторой степени. Как только вы это сделаете, вы можете использовать отличный пакет redux-persist для сохранения данных в AsyncStorage (или localStorage в веб-браузере). Вы можете не только сохранить данные, но и упростить регидратацию вашего магазина этими данными. Опять же, это приносит две победы.
- Автономный опыт. Вы можете заполнить магазин последним набором данных - он может быть не идеальным, но функциональным.
- Мгновенная загрузка. Вы можете загружать кэшированные данные в свой магазин и получать новые данные «за кулисами», что позволяет пользователю мгновенно начать использовать приложение, а не ждать несколько секунд загрузки новых данных.
Так как же нам это реализовать?
Прежде всего нам нужно настроить наше хранилище redux.
Теперь нам нужно реализовать redux-persist. Сейчас мы настроим и сохранение на диск, и автоматическую регидратацию.
Так что же происходит в этом коде? Интересные части начинаются в строке 10, где мы экспортируем функцию, а не само хранилище. Это связано с тем, что регидратация хранилища является асинхронной операцией - это может занять некоторое время, чтобы мы могли вызвать эту функцию из нашего компонента (будет показано ниже), и как только она будет правильно регидратирована, мы сможем отрендерить наше приложение. В строке 11 мы обновляем магазин данными, если они существуют. Это ничего не сделает, если ничего не будет найдено, если предыдущее состояние не найдено. Наконец, в строке 12 мы настраиваем логику для сохранения нашего хранилища на диске. Следует отметить, что мы сообщаем приложению об AsyncStorage в качестве нашего механизма хранения (поскольку вы можете использовать redux-persist в разных средах).
Теперь, как нам использовать этот код?
Изучив приведенный выше код, вы увидите, что мы инициализируем и обновим магазин, как только приложение запустится. Пока магазин не будет успешно увлажнен, мы ничего не будем показывать - не волнуйтесь, я обнаружил, что увлажнение относительно больших магазинов занимает минимум времени, я никогда этого не замечал.
Это действительно все, что вам нужно сделать, чтобы сохранить хранилище на диске, чтобы у пользователя был хоть какой-то полезный опыт в автономном режиме.
Соображения
Сохранение вашего хранилища redux может быть действительно выгодным как для вашего пользователя, так и для вас, разработчика. Но вы должны принять во внимание несколько вещей.
- Подумайте о форме ваших данных. После того, как вы сохраните хранилище на диске, изменения в форме вашего дерева состояний редукции могут вызвать непредвиденные проблемы. Вы можете перенести свой магазин, но проще просто потратить время и спланировать заранее, чтобы вам не приходилось его изменять.
- Подумайте, как часто вы записываете данные о своем магазине на диск. В приложении, над которым я работал, мы получаем обратно много данных с разных конечных точек за небольшой промежуток времени. Мы обнаружили, что при записи на диск после каждого ответа у пользователя в этом случае будут проблемы с прокруткой. Решение? Используйте опцию debounce, чтобы записывать данные только каждые 500 миллисекунд. Это небольшое изменение сильно повлияло на работу наших пользователей.
Мыслительные упражнения
В заключение я хотел задать вам вопрос. Как вы будете обрабатывать действия, предпринимаемые в автономном режиме, и синхронизировать их с сервером, когда пользователь в следующий раз воспользуется приложением и будет в сети? Вот мой ответ.
Хотите углубиться в тему создания автономных приложений React Native? Ознакомьтесь с моим курсом React Native to Production - в нем есть целый модуль, посвященный тому, чтобы сделать ваше приложение доступным в автономном режиме (а также множество других замечательных вещей).
