Как запланировать периодическую фоновую задачу в приложении React Native

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

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

  • Любое взаимодействие с пользовательским интерфейсом невозможно, поэтому весь выполняемый код должен существовать вне любого компонента React.
  • Минимальная продолжительность между двумя заданиями - 15 минут.
  • Точные сроки выполнения задачи непредсказуемы.
  • Для Android задачи не будут выполняться, пока приложение находится на переднем плане.
  • Для iOS фоновая выборка не будет продолжаться после того, как пользователь вручную закроет приложение.
  • Фоновые задачи не будут планироваться в симуляторе.

Давайте перейдем к коду и посмотрим, как настроить базовый рабочий процесс. Мы будем использовать библиотеку react-native-background-task для фоновых заданий.

Шаг 1. Установите пакет NPM

Выполните следующую команду, чтобы установить пакет NPM.

npm install react-native-background-task --save

При RN≥60 автоматическое связывание должно происходить, но для Android требуется дополнительный ручной шаг. Добавьте следующую строку в метод onCreate файла MainApplication.java.

import com.jamesisaac.rnbackgroundtask.BackgroundTaskPackage;
@Override
public void onCreate() {
  ...
  BackgroundTaskPackage.useContext(this);
}

Шаг 2. Реализуйте метод для фоновой задачи

Затем создайте отдельный файл, например. task.js и создайте функцию, реализующую логику вашего фонового задания. Если вам нужно использовать состояние редукции в своей работе, вы можете импортировать хранилище и получить состояние, как показано ниже.

Примечание. store - это экземпляр вашего redux-store.

Шаг 3. Определите фоновую задачу

В App.js вне компонента App определите фоновую задачу. Мы используем метод backgroundSync, который мы определили ранее, для вызова внутри задачи.

Шаг 4. Запланируйте фоновую задачу

Наконец, давайте запланируем фоновую задачу из компонента приложения. Обратите внимание, что мы не предоставляем какой-либо идентификатор для задачи (например, имя или идентификатор), поэтому мы можем определить только одну фоновую задачу с помощью этой методологии. В этом примере мы запланировали запуск задания каждые 30 минут. Минимум может быть 15 минут.

Бонус: проверьте статус фоновой задачи

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

Вот полный пример того, как ваш App.js может выглядеть после определения вышеуказанных методов.

Вот и все, теперь у вас должно быть настроено фоновое задание для вашего приложения.

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

В этом списке вы можете найти другие мои статьи о разработке на React Native.

Больше контента на plainenglish.io