OnsenUIをIE11で動かしたい



  • OnsenUIを使用したCordovaアプリをInternet Explorer 11(以下IE11)で実行した場合、ブラウザは起動するのですが真っ白い画面のままHTML画面が表示されません。
    IE11の開発者ツールからJavaScriptコンソールを確認してもエラーなどは表示されていませんでした。
    IE11で起動する際には以下のコマンドで実行しています。
    cordova run browser
    ※デフォルトブラウザをIE11に変更後にコマンドを実行。

    念のためWindowsアプリとして実行させたところ、以下のエラーが表示されました。

    SCRIPT16386: ハンドルされない例外 下記ソースコードの行 9519、列 5 で発生しました。ms-appx://io.onsen.sampleapp/www/lib/onsen/js/onsenui.js
    0x80004002 - JavaScript 実行時エラー: インターフェイスがサポートされていません
    onsenui.js (9519,5)
    

    Windowsアプリとして実行させる際には以下のコマンドを実行しています
    cordova run windows
    ※config.xmlには「<preference name=“windows-target-version” value=“8.1” />」を指定。

    • プロジェクト環境
      OnsenUI 2.8.2
      cordova-cli 7.0.0
      cordova-browser 5.0.1
      cordova-windows 5.0.0
    • 実行環境
      Windows 10(64bit)
      Internet Explorer 11 11.64.16299.0

    問題再現を行った最小限のソースは以下になります。

    • index.html (www/index.html)
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    
        <meta charset="utf-8" />
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="content-language" content="ja">
    
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="mobile-web-app-capable" content="yes" />
    
        <!-- Poliyfill -->
        <script src="lib/promise-polyfill/promise.js"></script>
        <script src="scripts/polyfill_CustomEvent.js"></script>
        <script src="scripts/polyfill_remove.js"></script>
    
        <!-- Unused Poliyfill? -->
        <!--<script src="scripts/polyfill_classList.js"></script>-->
        <!--<script src="scripts/polyfill_Set_Map_WeakMap.js"></script>-->
        <!--<script src="scripts/polyfill_MutationObserver.js"></script>-->
    
        <script src="scripts/platformOverrides.js"></script>
        <script src="lib/onsen/js/onsenui.js"></script>
    
        <link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
        <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css" />
    
    </head>
    
    <body>
        <script src="cordova.js"></script>
        <script src="scripts/index.js"></script>
    
        <ons-navigator id="myNavigator"></ons-navigator>
    </body>
    </html>
    
    • index.js (www/scripts/index.js)
    (function () {
        "use strict";
    
        document.addEventListener("deviceready", function () {
            ons.ready(onOnsenUIReady);
        });
    
        window.onerror = function (msg, url, line, col, error) {
            alert("Error 1:" + msg);
            return false;
        };
    
        window.addEventListener("error", function (e) {
            alert("Error 2:" + e.error.message);
        });
    
    })();
    
    function onOnsenUIReady(event) {
    
        document.addEventListener("init", onInit);
    
        var myNavigator = document.getElementById("myNavigator");
        myNavigator.pushPage("html/page1.html");
    }
    
    function onInit(event) {
    
        if (event.target.id === "Page1") {
            console.debug("Page1 Init!");
            alert("Page1 Init!");
        }
    }
    
    • page1.html (www/html/page1.html)
    <ons-page id="Page1">
        This is Page1.
    </ons-page>
    

    今回のアプリはIE11で動作させる必要があるため、Polyfillを導入する必要があります。
    OnsenUIをIE11で使用するために導入すべきPolyfillが以下に記載されています。
    https://ja.onsen.io/v2/guide/faq.html#furuiburauznosapto
    今回追加したPolyfillは外部から導入した物のため、OnsenUIに適合しているのか不安があります。
    OnsenUIで動作確認の取れているPolyfill実装があったら教えてください。
    また、記載されているPolyfill追加以外に、エラー対応などのために必要な処理があるのでしょうか?

    • English digest
      An error occurred when IE 11 executed it.
      I would like to know Polyfill which was confirmed to work on OnsenUI.
      Also, I would like to know other measures if necessary.

  • Onsen UI

    @imanishik
    ご質問ありがとうございます。

    OnsenUIで動作確認の取れているPolyfill実装があったら教えてください。

    IE11 は Onsen UI のサポート対象ブラウザに含まれていないため、現時点では
    Polyfill 実装の動作確認も行っておりません。
    ご理解の程よろしくお願いいたします。


  • Onsen UI

    @imanishik said:

    また、記載されているPolyfill追加以外に、エラー対応などのために必要な処理があるのでしょうか?

    polyfill を追加して動作しない場合、何らかのエラー対応処理を記述する必要があると思われますが、
    処理の詳細については Onsen UI チームとしては現状把握できておりません。
    ご期待に添えず申し訳ありませんが、よろしくお願いいたします。



  • @asial-matagawa

    動作確認が取れているPolyfillは無いと言う事で了解しました。
    いろいろ試したところ、Cordova+OnsenUI+IE11環境で、Cordova、OnsenUIの初期化でエラーが発生せずアプリ起動する事が出来たため後継のために記載しておきます。

    具体的には以下の二つのPolyfillを導入しました。
    ・webcomponentsjs
    https://github.com/webcomponents/webcomponentsjs
    ・remove
    https://developer.mozilla.org/ja/docs/Web/API/ChildNode/remove

    簡単な動作確認のソースは以下となります。

    • index.html (www/index.html) (使用するPolyfillを変更)
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    
        <meta charset="utf-8" />
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="content-language" content="ja">
    
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="mobile-web-app-capable" content="yes" />
    
        <!-- Poliyfill -->
        <script src="lib/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
        <script src="scripts/polyfill_remove.js"></script>
    
        <!-- JS dependencies (order matters!) -->
        <script src="scripts/platformOverrides.js"></script>
        <script src="lib/onsen/js/onsenui.js"></script>
    
        <!-- CSS dependencies -->
        <link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
        <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css" />
    
    </head>
    
    <body>
        <script src="cordova.js"></script>
        <script src="scripts/index.js"></script>
    
        <ons-navigator id="myNavigator"></ons-navigator>
    </body>
    </html>
    
    • index.js (www/scripts/index.js) (Promiseの実験処理を追加)
    
    (function () {
        "use strict";
    
        document.addEventListener("deviceready", function () {
            ons.ready(onOnsenUIReady);
        });
    
        window.onerror = function (msg, url, line, col, error) {
            //alert("Error 1:" + msg);
            return false;
        };
    
        window.addEventListener("error", function (e) {
            //alert("Error 2:" + e.error.message);
        });
    
    })();
    
    function onOnsenUIReady(event) {
    
        document.addEventListener("init", onInit);
    
        var myNavigator = document.getElementById("myNavigator");
        myNavigator.pushPage("html/page1.html");
    }
    
    function onInit(event) {
    
        if (event.target.id === "Page1") {
            console.debug("Page1 Init!");
    
            // Promise Test
            testPromise().then(function (message) {
                console.debug("testPromise then:" + message);
    
            }).catch(function (err) {
                console.debug("testPromise catch:" + err);
            });
        }
    }
    
    function testPromise() {
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                console.debug("testPromise!");
                resolve("ABC");
            }, 1000);
        });
    }
    
    • page1.html (www/html/page1.html)
    <ons-page id="Page1">
        This is Page1.
    </ons-page>
    

    引き続き、もう少しES6的な処理で動作するか検証してみたいと思います。



  • 引き続き確認したところ、前出のPolyfillでは不十分のようです。
    画面遷移(pushPage、popPage)等が正常に動作しませんでした。

    対策として、以下のPolyfillを登録する事で動作する事が確認できました。
    ・OnsenUI 2.3.0で削除されたPolyfill(=2.2.6まで登録されていたPolyfill)
    ・webcomponentsjs
    https://github.com/webcomponents/webcomponentsjs

    しかし上記Polyfillを導入しても、ダイアログ(ons.notification.alert)や、トースト(ons.notification.toast)を閉じる際に以下のエラーが表示され、以降のダイアログ表示などが行えなくなります。

    Unhandled promise rejection TypeError: 未定義または NULL 参照のプロパティ 'destroy' は取得できません
    

    onsen.jsの以下の処理で、this._backButtonHandlerがnullとなっている事が原因のようです。

        key: 'disconnectedCallback',
        value: function disconnectedCallback() {
          this._backButtonHandler.destroy();
    

    そのため、OnsenUI側のonsen.jsに手を加え、this._backButtonHandlerのnullチェックを追加する事でダイアログ系が正常に動作する事が確認できました。

    引き続き調査してみたいと思います。