ReactNative Android のUserAgent を変更する

やりたいこと

React Native で作成した Android アプリからのリクエストの UserAgent を確認すると、 okhttp/3.4.1 などとなっていて、OSのバージョンやデバイスの情報がわかりませんでした。

アプリからのリクエストというのは、 React Native が提供している Fetch API で呼び出したHTTP のリクエストです。

なので、UserAgent を変更して色々な端末情報を含めるようにしたい。

端末情報は、UserAgent としてではなく、別の方法でサーバへ送っても良いですが、大抵アクセスログのフィールドの一つとして UserAgent は収集されていることが多いと思うので、都合がよさそうです。

方法

MainActivity.java をすこしオーバーライドします。

react-native: 0.39.2 で動作を確認しました。

MainActivity.java

public class MainActivity extends ReactActivity {
  ...
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    attachInterceptor();
  }

  private void attachInterceptor() {
    final String agentString = "YOUR HTTP AGENT";

    OkHttpClient replacementClient = OkHttpClientProvider.getOkHttpClient().newBuilder().addNetworkInterceptor(new Interceptor() {
      @Override
      public Response intercept(Interceptor.Chain chain) throws IOException {
        Request originalRequest = chain.request();
        Request requestWithUserAgent = originalRequest.newBuilder()
                .removeHeader("User-Agent")
                .addHeader("User-Agent", agentString)
                .build();

        return chain.proceed(requestWithUserAgent);
      }
    }).build();
    OkHttpClientProvider.replaceOkHttpClient(replacementClient);
  }
  ...
}

UserAgent に設定する文字列は、必要な情報を取得して生成すれば良いと思いますが、 System.getProperty("http.agent") で取得すると見慣れたフォーマットの文字列が取得できるようです。

おそらく、この箇所で生成される文字列でしょう。

細かいところ

react-native の Android 側の Networking Module はこの辺りを見れば良さそうです。

そのなかの OkHttpClientProvider というのは、 OkHttpClient のインスタンスを提供する役目のようですが、 上記のコードは、replaceOkHttpClient を呼ぶことで、デフォルトで生成されるインスタンスと自ら用意したそれとを差し替えています。