アプリ内ブラウザ(WebView)を導入する際の留意点をまとめました。自分用のメモ書きですが、随時アップデートし読みやすくする予定です。
- 表示対象のサイトにtarget="_blank"や mailto: などにリンクがないか。タブ(別ウインドウ)の概念がないwebviewではtarget="_blank"のリンクは動作しないし、メーラーも立ち上がらない。確かURLスキームもうまくハンドリングできない気がする(要確認)。
- アクセス許可するホワイトリストを設けるか否か
リンクを辿って全く関係ない外部サイト(場合によってはアダルトサイトなども)を表示できてしまうことを良しとするか。制限したい場合はアクセスを許可するドメインやURLをホワイトリストとして管理する。- 自分たちで管理できない外部サイトに遷移させるリンクはWebToで遷移させるようにしたほうがベター。この場合にWEB側とアプリ側でI/F仕様を取り決める必要がある。
- 画面遷移を許可する場合は、「進む」「戻る」などのナビゲーションは自前で実装してあげないと不便なので留意する。
-
<input type="file">
などファイルアップロードさせるフォーム要素は正常に動かないケースがありそう(調査中) - Webview内のリンクや画像を長押し等すると、サブメニュー(画像を保存とか)が表示される。Webviewコンテンツをアプリライクに見せたい場合や、WebviewのURL等をオープンにしたくない場合は隠す処理を入れてあげたほうがよい。
- Basic認証をサポートするにはプラスアルファの実装が必要かも。
- Androidの場合、通信エラーなどで当該画面が表示できない場合は、標準のエラー画面(ドロイドくんのいる画面)が表示されてしまう。アプリの世界観が崩れるので避けたいところではある。避けたい場合は独自のエラー画面を作成する。
- Androidの場合、JSのalertやconfirmメソッドがそのまま動作しないケースがある模様
cf. https://denen.hatenablog.com/entry/2019/02/26/Android_%E3%81%AE_WebView_%E3%81%A7%E3%82%82_alert_%E3%82%84_confirm_%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F
cf. https://ja.stackoverflow.com/questions/12986/webview%E3%81%A7javascript%E3%81%AE%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%81%9F%E3%81%84