【Flutter】Androidでweb viewでGoogleフォーム開いた時のJavaScript無効エラー対応法
はじめに
様々な方言を話す、おしゃべり猫型ロボット「ミーア」を開発中。
先日、こちらで、「アプリに、不具合・エラー問い合わせのGoogleフォームを設置」に関する記事を記載した。
ところが、ご利用のユーザーから下記お問い合わせがきた。
「アプリから不具合・エラーレポートを開こうとしたところ、下記エラーが表示されました。Chromeブラウザのjavascript設定は有効にしているのですが」
今回は、上記対処法について記載する。
webview_flutterプラグインのデフォルト設定はJacaScript無効
今回、webビュー表示は、webview_flutterプラグインを使用している。
webview_flutterプラグインでのデフォルト設定は、JavaScriptMode.disabled。つまり、デフォルトではJavaScriptが無効化されている。
/// Sets the JavaScript execution mode to be used by the WebView.
Future<void> setJavaScriptMode(JavaScriptMode javaScriptMode) {
return platform.setJavaScriptMode(javaScriptMode);
}
Androidの場合、アプリケーション内のWebViewでJavaScriptを有効にするためには、コードレベルで明示的にJavaScriptMode.unrestrictedを設定する必要がある。
具体的には、WebViewControllerの初期化時にJavaScriptを有効にする必要がある。
_controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..loadRequest(Uri.parse('https://docs.google.com/forms/d/e/XXXX/viewform'));
この設定により、WebViewがJavaScriptを実行できるようになり、JavaScriptを必要とするウェブページの正しい動作が保証される。
iOSとAndroidのJavascriptの設定の違い
iOSのWebView (WKWebView) では、デフォルトでJavaScriptが有効になっている。したがって、特に設定を変更しなくても、JavaScriptを使用するウェブサイト（例: Googleフォームなど）を問題なく表示することができる。
AndroidのWebViewはセキュリティ上の理由からJavaScriptを無効にしているため、アプリ内でWebViewを使用する場合、JavaScriptが必要であれば、コードレベルで明示的にJavaScriptMode.unrestrictedを設定して有効にする必要がある。
アプリケーション内のWebViewは、Android端末でのシステムのブラウザ設定とは独立している。つまり、端末のシステムブラウザ（Google Chromeなど）の設定でJavaScriptを有効にしても、アプリ内のWebViewでJavaScriptが有効になるわけではない。
Googleフォームのようなウェブページは、インタラクティブな要素や動的なコンテンツを表示するためにJavaScriptを多用している。このため、JavaScriptが無効な場合、正しく表示されないことがある。
修正したコード（Googleフォームwebview）
続きはこちらで記載しています。
Discussion