お気持ちの表明

思考を雑に外出していきます

ReactNativeのアプリをバックグラウンドにするとJSのコードが動作しない(Android)

ReactNativeで書いたコードが、アプリをバックグラウンドにした時、動作しないと気づいた。

ネイティブコードで非同期処理をして、その結果を こんなかんじで JS側にイベント投げて、stateの更新を行うみたいなことをしていたときに、アプリがバックグラウンドになってるとイベントのキャッチができてなくて、stateが更新されず、はあ...?となっていた。

テキトーなコードを書いてみたところ、バックグラウンド時にはJSのコードが動いていない様子だった(0.44.0と0.49.3で確認した)。

例えば、以下のようなコード。
1秒ごとに「wei」とログを吐き続けるウェイなアプリを作ったとする。
フォアグラウンドのときは動作するが、バックグラウンドにしたあと、ウェイしてくれなくなる...。

App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Text,
} from 'react-native';

export default class App extends Component<{}> {
  componentWillMount() {
    console.log('App.js: componentWillMount()');

    setInterval(
    () => { console.log('App.js: wei') }
    , 1000);
  }

  render() {
    console.log('App.js: render()');
    return (
      <Text>Wei</Text>
    );
  }

  componentDidMount() {
    console.log('App.js: componentDidMount()');
  }

  componentWillUnmount() {
    console.log('App.js: componentWillUnmount()');
  }
}

index.js

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('CheckBackground', () => App);

以下がその時のログ

バックグラウンドにするとウェイウェイしてくれなくなった

// フォアグラウンドのとき

10-22 22:31:41.910 30529-30578/com.checkbackground I/ReactNativeJS: App.js: componentWillMount()
10-22 22:31:41.914 30529-30578/com.checkbackground I/ReactNativeJS: App.js: render()
10-22 22:31:41.948 30529-30578/com.checkbackground I/ReactNativeJS: App.js: componentDidMount()
10-22 22:31:42.925 30529-30578/com.checkbackground I/ReactNativeJS: App.js: wei
10-22 22:31:43.940 30529-30578/com.checkbackground I/ReactNativeJS: App.js: wei
10-22 22:31:45.031 30529-30578/com.checkbackground I/ReactNativeJS: App.js: wei
10-22 22:31:45.975 30529-30578/com.checkbackground I/ReactNativeJS: App.js: wei
10-22 22:31:46.989 30529-30578/com.checkbackground I/ReactNativeJS: App.js: wei
10-22 22:31:48.010 30529-30578/com.checkbackground I/ReactNativeJS: App.js: wei
10-22 22:31:49.031 30529-30578/com.checkbackground I/ReactNativeJS: App.js: wei

// ここでバックグラウンドにした ウェイしてくれなくなる

ドキュメント等できちんとしたエビデンスが得られていないが、バックグラウンド時には、JSコードは動作しなくなる的なコメントがStackOverFlowにあった でもこれ2年前近いコメントなんだよな...。挙動的に今もそうなってるぽいけど...。

There is a limitation in React Native wherein when the app is in the background the js bridge stops getting messages. This means if you are trying to send the data from js then you won't be able to count on the data making it. Alternatively you could write the code to send the updates in native code and that should do the trick javascript - How can I run background tasks in React Native? - Stack Overflow

認識が間違ってたり、ドキュメント等をご存知でしたら、コメントで教えてもらえると泣いて喜びます