今回は 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
に一定時間ごとに実行したい処理を追加してください。
なお、onEvent
と onTimeout
では、処理の最後に必ず BackgroundFetch.finish(taskId);
を実行するようにしてください。
サンプルコードは以上です。
なお、Android で実行したところ、問題なく動作しましたが、iOS の Simulator では onEvent
が呼ばれませんでした。
iPhone の実機で試したところ、今度は onEvent
が呼び出されたのですが、指定していた API 通信が失敗しました…。
現在、原因を調査中です…。
分かり次第、また記事にまとめたいと思います。
以上、React Native アプリで、「react-native-background-fetch」ライブラリを使ってアプリがバックグラウンドにある時に、一定時間ごとに指定した処理を実行させる方法についてでした。
ご参考になれば幸いです。