【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」ライブラリを使ってアプリがバックグラウンドにある時に、一定時間ごとに指定した処理を実行させる方法についてでした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG