[Flutter] WebViewについてまとめてみた
※gyazo上の画像を削除したことで添付のキャプチャが消えてしまいましたorz
文字だけでわかりにくいかもですが参考になれば幸いです。
下記のサイトを見ると本記事のイメージが掴みやすいかも
どのパッケージを利用するか
Flutterアプリ内でwebサイトを表示できる「WebView」を実装するにあたり、
２つのパッケージが候補に上がりました。
個人的なイメージですが参考までに
-
webview_flutter
→flutterのwebview実装にあたっては最もポピュラー
シンプルな実装であればこれで必要十分 -
flutter_inappwebview
→webview_flutterでできないこともこちらなら対応できるかも。ちょっと玄人向け
業務でどちらも利用する場面があったので、
そもそもFlutterで実現可能なWebViewについてから、
WebView実装時に困ったことや、それぞれで可能なことをまとめてみます。
Flutterで実現可能なWebViewの形式
1. flutterのWebView
webview_flutterで実現可能なシンプルなWebViewです
2. ネイティブなWebView
ネイティブのWebViewで表示しています
3. Chrome、SafariのWebView
アプリ内で、iOSはSafari、AndroidはChromeでWebViewを表示しています
4. 対照表
それぞれのパッケージで実現可能かどうかの表です。
webview_flutterでも可能かもしれませんが、少し大変かも。
| Package | 1. flutterのWebView | 2. ネイティブなWebView | 3. Chrome、SafariのWebView |
|---|---|---|---|
| webview_flutter | ○ | x | x |
| flutter_inappwebview | ○ | ○ | ○ |
注意が必要だったこと
次に、各WebViewで注意が必要だったことについて
1. flutterのWebView
-
[更新・戻る・進む]ボタン群の用意が必要
関数は用意されていますが、ボタン群のWidgetは自前で作成する必要があります。
-
アプリのAppBarとWebサイトのHeadが重なる問題
webサイトにも、アプリにもDrawerがあると、ユーザは困ってしまうかもですね。
対応は以下で可能だったりします。
・アプリ側でheader情報を指定し、webサイト側でhead情報を元に表示を制御する。
・アプリ内でjavascriptを読み込みcssで表示を制御する。
-
WebView内のTextFieldを押下時に出てくるキーボードが、TextFieldと被ってしまう問題
iOSだと「resizeToAvoidBottomInset: false,」を指定することで解消されますが、
Androidは調整が難しかったです。
だいぶ前のissueでは「HybridComposition」を適用することで解消されていたようですが、
当方ではうまくいきませんでした。
2. ネイティブなWebView
-
共有やコピーのところが日本語化できなそう
これに関してはそんな記事を見かけただけで、絶対できないというわけではないかもしれませんが難しそうでした。
また後述する「Chrome、SafariのWebView」を使えば解消されますし、あえて「ネイティブなWebView」を使うメリットも見当たらないかなと思っています。
3. Chrome、SafariのWebView
こちらは特に目立った問題はないという印象ですが強いて言えば以下
-
「flutter_inappwebview」に依存している
「ネイティブなWebView」にも共通していることですが、
「flutter_inappwebview」なしでは実装難しいのではないか？と。
実はGithub上で数100件のissueと少々PRが残り続けている「flutter_inappwebview」なので、今後サポート終了となった場合は苦しくなる時がくるかもしれません。
（開発者には本当に感謝なのですが、厳しい現実でもある）
まとめ
実装の具体例や注意点の詳細な解説は記述できませんでしたが、気が向いたら記事を更新しようと思います。
（なんだかんだ、バージョンによって実装方法が大きく変わったりすることを言い訳に自己満で概要まとめただけの記事になってしまいそう😱）
どのパターンがベストなのかはユースケース毎に異なると感じました。
Discussion