Custom Tabsの挙動
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の表示
◎Custom Tabsの表示
◎外部ブラウザ(Chrome)で表示
WebViewは×ボタンが表示されず戻るボタンでしか戻れない。Custom TabsはChromeに近い印象。アプリに組み込まれて表示されるが、×ボタンで閉じるアニメーションは外部呼び出しに近い動きになっている。また、Chromeのメニューも表示される。
また、あらかじめChromeで呼び出し先サイトにログインしていると、Custom Tabsで呼び出したときもログイン状態で呼び出される(上のイメージでもCustom Tabsの表示はログイン状態で表示された)。内部的にはChromeが動作するためChromeで使っているCookieやセッションは共有される。
まとめ
WebViewは仕組み的にセキュリティなどの問題もあるが、呼び出した時の操作性なども意識してこのような特性を理解しておくと良さそう。もちろん、冒頭に書いたようにツールバーの色やアニメーションなどがカスタマイズしたり、プリフェッチでパフォーマンスを向上するなど、他にも知っておいたほうが良い実装上のテクニックはたくさんあることは言うまでもない。動作を把握するために使ったサンプルコードはGitHubにあげておいた。
GitHub - radiocat/CustomTabsSample
GitHub - radiocat/customTabsIonicSample
参考
Chrome Custom Tabs の基本的な使い方 - Qiita