WebViewとアプリ内/外ブラウザ起動

※WebView表示のプラグインとして flutter_inappwebview | Flutter Package も有名で私も使っていた時期がありますが、HTTPS通信時のホスト名検証がない点や, 結構な数のイシューが放置されたままになっているなどの理由から、現在は webview_flutter を利用しています。

Webサイトを表示する3パターンの方法

ネイテイブアプリでWebサイトを表示する方法として主に下記の３つが上げられます（呼び名はイメージしやすいように便宜上定めています）。

1. WebView埋め込み型
   • FlutterのPlatformViewを使ってネイテイブのWebViewクラスを埋め込みで表示
   • 必ずしもフルスクリーンである必要はなく自由な幅・高さで表示ができる
   • UserAgentの指定やURLのホワイトリスと対応などカスタマイズ性が高い
2. アプリ内ブラウザ
   • Safariアプリをアプリから離脱せずに表示し、Safariアプリと同等のブラウジング操作ができる
   • FlutterのViewに対してモーダル遷移で表示される（見た目的には画面遷移のような形）
   • 基本的には表示のみでWebView埋め込み型ほどカスタマイズ性能は無い
   • Androidの場合はWebView埋込み型がフルスクリーン形式で表示されている
3. 外部アプリケーション起動
   • 端末のデフォルトブラウザで起動する（アプリから一旦離脱する）
   • Universal Links / App Linksに対応している場合はアプリケーションが起動する

ネイテイブレベルで分解すると以下の表に分類できます。

以降、実際にFlutterプラグインで実装する様子をサラッと見ていきます。

WebView埋め込み型

webview_flutter を使うことで「WebView埋め込み型」が実現できます。実装自体は非常に簡単です。

final controller = Completer<WebViewController>();
WebView(
    initialUrl: url,
    onWebViewCreated: controller.complete,
    navigationDelegate: (request) {
    　　// requestに応じてアクセスをブロックできるなどカスタマイズ性が高い
    },
),

On iOS the WebView widget is backed by a WKWebView; On Android the WebView widget is backed by a WebView.

内部的には、iOSではWKWebView, AndroidではWebViewを利用して、FlutterのPlatformView（AndroidだとAndroidView、iOSだとUiKitView）を使ってネイテイブビューを描画しています。

また、特にAndroidでのPlatformViewでは、Hybrid compositionorVirtual displayが利用され、これらは毎フレームごとにメモリコピーが行われることでFlutterのUI全体のパフォーマンスに影響を与える可能性があるとドキュメントに記載されておりましたが、冒頭でお見せしたgifで分かるようにWebViewで表示する程度ではその違和感は感じませんでした。

アプリ内ブラウザ、外部アプリケーション起動

url_launcher を使うことで「アプリ内ブラウザ」「外部アプリケーション起動」が実現できます。こちらも実装は非常に簡単です。

launchUrl(Uri.https('flutter.dev', ''));

// ref. https://github.com/flutter/plugins/blob/ca63d964d9fdfff9be36533ea4248d0d0ca28fd0/packages/url_launcher/url_launcher/lib/src/types.dart#L12
enum LaunchMode {
  /// Leaves the decision of how to launch the URL to the platform
  /// implementation.
  platformDefault,

  /// Loads the URL in an in-app web view (e.g., Safari View Controller).
  inAppWebView,

  /// Passes the URL to the OS to be handled by another application.
  externalApplication,

  /// Passes the URL to the OS to be handled by another non-browser application.
  externalNonBrowserApplication,
}

バージョン6.1.0以前はforceSafariVCやforceWebViewでプラットフォームごとに個別でプロパティを設定する必要がありましたが、これらがLaunchModeという形で統一されました。LaunchMode.platformDefaultはプラットフォームごとに下記の挙動となっています。

• [LaunchMode.platformDefault] is supported on all platforms:
  /// - On iOS and Android, this treats web URLs as
  /// [LaunchMode.inAppWebView], and all other URLs as
  /// [LaunchMode.externalApplication].
  /// - On Windows, macOS, and Linux this behaves like
  /// [LaunchMode.externalApplication].
  /// - On web, this uses webOnlyWindowName for web URLs, and behaves like
  /// [LaunchMode.externalApplication] for any other content.

ひとまずiOSとAndroidに注目すると、

• Web URLの場合: アプリ内ブラウザ（inAppWebView）
• それ以外の場合（ディープリンク等）: 外部ブラウザ or アプリ（externalApplication）

といった挙動によしなに切り替えてくれるので特別要件がなければplatformDefault（未指定）で良さそうですね。
アプリ内ブラウザではなく問答無用で外部ブラウザ起動させたい場合は、externalApplicationを明示すると期待通りの動きになります。
（ちなみにexternalNonBrowserApplicationをした状態で通常のWeb URLを指定すると、iOSでは何も起きず、Androidでは外部ブラウザが起動する挙動を確認しましたが、普通にexternalApplication指定で良い気がします）。

launchUrl(
    uri,
    mode: LaunchMode.externalApplication,

    // iOS: Universal Links以外のURLを指定すると何も起こらない
    // Android: App Links以外のURLを指定しても外部ブラウザ起動し表示される
    // mode: LaunchMode.externalNonBrowserApplication,
);

launch(
  url,
  forceSafariVC: false, // default: false
  forceWebView: true, // default: true
);

アプリ内ブラウザのネイテイブの挙動を見る

iOSでは内部でSafari View Controllerが使われています。iOS 9,10ではSafariアプリとCookie等のデータが共有されていたそうですが、以降はアプリごとに独立しており、特段Webサイトをハックすることもできなさそうで、セキュリティ面でのケアは不要そうです。