Zenn
🪪

Flutter InAppWebViewでUser-Agentを変更する

2023/07/18に公開
Flutter
WebView
tech

はじめに

スマホアプリ内でWebページを表示するときに、WebViewを使用すると思います。
FlutterのInAppWebViewを使用すると簡単にWebページを表示することができますが、そのWebページ側ではスマホのブラウザで表示されているか、スマホアプリ内のWebViewで表示されているのか判断ができません。
そのため、User-Agentを変更してWebページ側でもスマホアプリ内で表示していることを判断できるようにしました。

環境

  • Flutter 3.10.5
  • flutter_inappwebview 5.7.2+3
  • package_info_plus: 4.0.2

サンプルコード

https://github.com/greendrop/flutter_webview_useragent_sample

InAppWebViewでのUser-Agentの変更

InAppWebViewでUser-Agentを変更する方法は2種類あります。
こちらを使用しでUser-Agentを変更し、JavaScriptで変更された内容を表示してみましょう。

InAppWebViewOptions userAgent propertyを指定

final packageInfo = await PackageInfo.fromPlatform();

options = InAppWebViewGroupOptions(
  crossPlatform: InAppWebViewOptions(
    userAgent:
     '${widget.packageInfo.packageName}/${widget.packageInfo.version}',
  ),
);

InAppWebView(
  initialOptions: options,
  // ...
);
iPhone Android

User-Agentは、指定した内容になりました。
User-Angetをすべて変更したい場合はこの指定方法になります。

InAppWebViewOptions applicationNameForUserAgent propertyを指定

final packageInfo = await PackageInfo.fromPlatform();

options = InAppWebViewGroupOptions(
  crossPlatform: InAppWebViewOptions(
    applicationNameForUserAgent:
      '${widget.packageInfo.packageName}/${widget.packageInfo.version}',
  ),
);

InAppWebView(
  initialOptions: options,
  // ...
);
iPhone Android

User-Agentは、動いている機種のUser-Agentの後ろに指定した内容が追加されました。
後ろに追加するようになるので、どのOS/機種かの判断もできつつスマホアプリ内のWebViewでWebページを表示していることの判断ができます。

まとめ

Flutter InAppWebViewでUser-Agentを変更することができました。
用途に合わせてuserAgent, applicationNameForUserAgentを使い分けて指定するとよさそうです。
また、User-Agentを変更しなくてもよいと思えたとしても、Webページ側で障害などあった際の環境（SafariやChromeなどのブラウザか、スマホアプリ内のWebViewか）の確認用にapplicationNameForUserAgentを指定しておくのはいかがでしょうか。

Discussion