浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】アプリがバックグラウンドにある時に一定時間毎に指定した処理を行う

今回は React Native アプリのバックグラウンド処理についてです。
アプリがバックグラウンドにある時に、一定時間ごとに指定した処理を定期的に実行する、という処理を実装する方法についてです。
使用したライブラリは「react-native-background-fetch」です。
GitHub のページはこちらです。

GitHub – transistorsoft/react-native-background-fetch: Periodic callbacks in the background for both IOS and Android
https://github.com/transistorsoft/react-native-background-fetch

 

ライブラリのインストールは下記のコマンドで行います。

npm install --save react-native-background-fetch

上記実行後、Android と iOS でそれぞれ追加の設定があります。
下記のページにある通りに追加してください。

Android: Android Auto-linking Setup
iOS: iOS Auto-linking Setup

上記を追加したら、コードを追加していきます。
サンプルコードは下記の通りです。
下記の initBackgroundFetch 関数を、componentDidMount() 内で呼び出します。

async initBackgroundFetch() {
  const onEvent = async (taskId) => {
    // 一定時間ごとに実行したい処理を追加
    BackgroundFetch.finish(taskId);
  }

  const onTimeout = async (taskId) => {
    // タイムアウト時の処理を追加
    BackgroundFetch.finish(taskId);
  }

  const status = await BackgroundFetch.configure({
    minimumFetchInterval: 15,
    requiredNetworkType: BackgroundFetch.NETWORK_TYPE_ANY,
  }, onEvent, onTimeout);
  console.log(status);
}

2行目からの onEvent に一定時間ごとに実行したい処理を追加してください。
なお、onEventonTimeout では、処理の最後に必ず BackgroundFetch.finish(taskId); を実行するようにしてください。
サンプルコードは以上です。

なお、Android で実行したところ、問題なく動作しましたが、iOS の Simulator では onEvent が呼ばれませんでした。
iPhone の実機で試したところ、今度は onEvent が呼び出されたのですが、指定していた API 通信が失敗しました…。
現在、原因を調査中です…。
分かり次第、また記事にまとめたいと思います。

 

以上、React Native アプリで、「react-native-background-fetch」ライブラリを使ってアプリがバックグラウンドにある時に、一定時間ごとに指定した処理を実行させる方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)