Cordovaのアプリから Custom Tabs を使って外部URLを呼び出すことがあって少し調べたので内容をまとめておく。

Custom Tabsとは

Androidアプリから特定のURLを呼び出す手法として、従来は以下の2つの手法があった。

外部ブラウザを起動して呼び出す
WebView内に新たなブラウザ環境を構築して表示する

Custom Tabsはこれらに変わる新たな手法として導入された。JellyBean以降のAndroidでChrome45以降がインストールされていれば呼び出すことができる。イメージ的にはChromeと同等の環境をアプリ内部に組み込んで表示するような感じ。内部的にChromeを事前に開始し、コンテンツをプリフェッチすることでWebページの表示速度を高速化させることができる。どれくらいの速度かは上記のデベロッパーサイトで確認することができる。

Chrome Custom Tabs - Google Chrome

また、以下のような内容を変更可能とのこと。

Toolbar color

Enter and exit animations

Add custom actions to the Chrome toolbar, overflow menu and bottom toolbar

ネイティブでの実装

サポートライブラリを追加する。

compile 'com.android.support:customtabs:23.1.1'

以下のようにCustomTabsを起動する。ChromeがインストールされていないなどでCustom Tabが呼び出せない場合はブラウザが起動する。

CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
CustomTabsIntent customTabsIntent = builder.build();
customTabsIntent.launchUrl(this, Uri.parse("http://www.example.com/");

Cordovaでの実装

cordova-plugin-browsertab を入れる。

$ cordova plugin remove cordova-plugin-browsertab

browsertabが有効かどうかが取得できるため事前にハンドリングする。

var testURL = 'https://www.google.com';

document.querySelector("#tabwithfallback").addEventListener('click', function(ev) {
cordova.plugins.browsertab.isAvailable(function(result) {
    if (!result) {
      cordova.InAppBrowser.open(testURL, '_system');
    } else {
      cordova.plugins.browsertab.openUrl(
          testURL,
          function(successResp) {},
          function(failureResp) {
            error.textContent = "failed to launch browser tab";
            error.style.display = '';
          });
    }
  },
  function(isAvailableError) {
    error.textContent = "failed to query availability of in-app browser tab";
    error.style.display = '';
  });
});

Ionicの実装

Cordovaの場合と同様にプラグインをインストールする。

$ ionic cordova plugin add cordova-plugin-browsertab
$ npm install --save @ionic-native/browser-tab

import { InAppBrowser } from '@ionic-native/in-app-browser';
// 省略

@NgModule({
// 省略
  providers: [
    BrowserTab,
// 省略
  ]
})

import { InAppBrowser } from '@ionic-native/in-app-browser';
// 省略

  constructor(public browserTab: BrowserTab) {
// 省略
  }

  openCustomTabs() {
    this.browserTab.isAvailable()
      .then((isAvailable: boolean) => {
        if (isAvailable) {
          this.browserTab.openUrl("http://www.examlple.com/");
        } else {
          // open URL with InAppBrowser instead or SafariViewController
          // 例）this.openInAppBrowser();
        }
      });
  }

WebViewやブラウザ呼び出しとの動作の違い

ツールバーのカラー設定などはデフォルトのままでそれぞれの表示を比較してみた。

◎WebViewの表示

f:id:radiocat:20171009230953p:plain:w200

◎Custom Tabsの表示

f:id:radiocat:20171009231108p:plain:w200

◎外部ブラウザ（Chrome）で表示

f:id:radiocat:20171009231246p:plain:w200

WebViewは×ボタンが表示されず戻るボタンでしか戻れない。Custom TabsはChromeに近い印象。アプリに組み込まれて表示されるが、×ボタンで閉じるアニメーションは外部呼び出しに近い動きになっている。また、Chromeのメニューも表示される。

f:id:radiocat:20171009231800p:plain:w200

また、あらかじめChromeで呼び出し先サイトにログインしていると、Custom Tabsで呼び出したときもログイン状態で呼び出される（上のイメージでもCustom Tabsの表示はログイン状態で表示された）。内部的にはChromeが動作するためChromeで使っているCookieやセッションは共有される。

まとめ

WebViewは仕組み的にセキュリティなどの問題もあるが、呼び出した時の操作性なども意識してこのような特性を理解しておくと良さそう。もちろん、冒頭に書いたようにツールバーの色やアニメーションなどがカスタマイズしたり、プリフェッチでパフォーマンスを向上するなど、他にも知っておいたほうが良い実装上のテクニックはたくさんあることは言うまでもない。動作を把握するために使ったサンプルコードはGitHubにあげておいた。

GitHub - radiocat/CustomTabsSample

GitHub - radiocat/customTabsIonicSample