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