cordova-sub-webview-pluginでアプリ内にWebViewを埋め込む。

cordova-sub-webview-pluginについて。

• Cordovaアプリ内で別のWebView（sub-webviewと呼んでいます）を開くためのプラグインです。
• sub-webviewは画面の上部もしくは下部に配置できます。
• sub-webviewの高さをオプションで指定することができます。

類似のプラグインとしてin-app-browserがあると思いますが、画面全体ではなく画面の一部で表示可能なところがこのプラグインの特徴です。

リポジトリ

↓こちらで公開中です。
https://github.com/HikosakaRyo/cordova-sub-webview-plugin

インストール

npmで以下のコマンドでインストールします。

cordova plugin add https://github.com/HikosakaRyo/cordova-sub-webview-plugin --save

sub-webviewの作成

subwebview.createSubWebView(
    function() {
        // success callback
        console.log("success!");
    },
    function(msg) {
        // error callback
        console.log(msg);
    },
    {
        height: 400,    // height of the SubWebview
        atBottom: true  // bottom or top of the webview
    });

コンテンツの表示

subwebview.showContent(
    function() {
        // success callback
        console.log("success!");
    },
    function(msg) {
        // error callback
        console.log(msg);
    },
    {
        url: 'http://...'   // url of the contents
    });

sub-webviewのリサイズ

subwebview.resizeSubWebView(
    function() {
        // success callback
        console.log("success!");
    },
    function(msg) {
        // error callback
        console.log(msg);
    },
    {
        height: 400,    // height of the SubWebview
        atBottom: true  // bottom or top of the webview
    });

sub-webviewの表示切り替え

subwebview.setVisible(
    function() {
        // success callback
        console.log("success!");
    },
    function(msg) {
        // error callback
        console.log(msg);
    },
    false // true => show, false => hide
    );

作った動機

とある仕事でCordovaアプリの画面の一部に外部サイトを表示する必要がありました。
上記実現のためにiframeの利用を検討しましたが、X-Frame-Options レスポンスヘッダにSAMEORIGINを指定をしているサイトが表示できないという制限がありました。
上記制限に対応するために大きさを指定可能なnativeのWebViewを表示するプラグインを作成しました。

完成度とかロードマップとか

一応手元の実機（iOS9, Androiod5.1）では外部サイトを表示できるところまでは動作確認済みです。
このあとは、ツールバー + 進む・戻る・閉じるボタン等を実装しようかと思っていました。
が、結局私の仕事では使わないことになった（「やっぱしiframeでいいか」ということになった）ため、ほったらかし中です。
暇になったら続きを実装するかも知れません。。