アプリがバックグラウンドに入るとJSのタイマーが止まってしまう

前回の記事ではJavaScriptでタイマーを実装しましたが、それだとユーザーが端末のホームボタンを押して、iOSアプリがバックグラウンドに入るとタイマーが止まってしまいました。

上記のiOSアプリの前提としては、UIBackgroundModesの設定がONになっていて、バックグラウンドで音源を再生し続ける機能を持っています。（その条件なら）iOSネイティブのNSTimerを使えばタイマーがバックグラウンドで動作し続けるのですが、せっかくなのでReact Nativeのライブラリがないか探してみました。

今回はreact-native-background-timerというライブラリを見つけたので、それを使ってみました。

react-native-background-timer

react-native-background-timerのiOSの実装を見たところ、beginBackgroundTaskWithNameを使ってバックグラウンドタスクを登録するようです。

iOSの仕様上、UIBackgroundModesの一部のモード以外ではOSが長時間のバックグラウンド処理を止めてしまうということになっています。このライブラリを導入する際は、ネイティブ側も適切に設定する必要がありそうです（iOSのドキュメントやIssuesを参考）。

ライブラリ導入前

JavaScriptのタイマーを動かしていました。

index.ios.js

let timer = null;

index.ios.js

  runPauseTimer(sec) {
    clearTimeout(timer);
    timer = setInterval(()=> {
      // 略
    }, 1000)

index.ios.js

   stopPauseTimer() {
    clearTimeout(timer);
     // 略
   }

ライブラリ導入後

react-native-background-timerを導入します。
元の記述と殆ど変わっていませんが、BackgroundTimerのclearTimeoutやsetIntervalを使います。

index.ios.js

import BackgroundTimer from 'react-native-background-timer';
let timer = null;

index.ios.js

  runPauseTimer(sec) {
    BackgroundTimer.clearTimeout(timer);
    timer = BackgroundTimer.setInterval(()=> {
      // 略
    }, 1000)

index.ios.js

   stopPauseTimer() {
     BackgroundTimer.clearTimeout(timer);
     // 略
   }

これで、アプリがバックグラウンドに入ってもタイマーが動作し続けるようになりました。

タイマー以外のバックグラウンドタスク系ライブラリ

余談ですが、Locationやbackground fetchなど、用途によっていくつかあるようです。

[React Native] iOSアプリがバックグラウンドに入ってもタイマーを動かす

アプリがバックグラウンドに入るとJSのタイマーが止まってしまう

react-native-background-timer

ライブラリ導入前

ライブラリ導入後

タイマー以外のバックグラウンドタスク系ライブラリ

参考