5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

アプリ内ブラウザ(WebView)を導入する際の留意点【随時更新予定】

Last updated at Posted at 2019-06-08

アプリ内ブラウザ(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
5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?