Ionic2にCrosswalkを導入したときに遭遇したエラーのメモです。

Crosswalkとは？

https://crosswalk-project.org/

Intelで開発された、端末保有のWebViewに置きかわるWebViewコンポーネントです。

Crosswalkが登場した経緯として、古い端末のWebViewの問題が挙げられます。

というのも、WebViewはandroid4.3まではWebKitベース、android4.4ではChromiumベース、そしてandroid5からはシステムから切り離されてGooglePlayでアップデートができるようになりました。

つまり以前の端末ではバグやセキュリティホールが発見されても、端末メーカーがアップデートを行わないかぎり修正されません。

またWebAPIやCSSのサポートにも差がでるために、端末によっては表示が崩れたり、動作が正常でない場合もあります。

こうした問題を解消するために開発されたのがCrosswalk です。

Crosswalkを入れるメリットやデメリット

• メリット
  • すべての端末で共通のWebViewを使うことにより、動作や表示の差がなくなる
  • 最新のWebAPIが使用できる
  • HTMLやCSS,JavaScriptのパフォーマンスを向上させる
• デメリット
  • アプリのサイズが増える(約70MB)

実際にandroid4.3のGalaxy Nexusでテストしてみました。

こちらがcrosswalkを入れる前の画面です。

タブのテンプレートを使っているのですが、スタイルが崩れて見えるどころか全く見えません。真っ白のままです。

アプリサイズは4.10MBでした。

こちらが導入後の画面です。

ちゃんとタブやページ内容が見えるようになりました。

アプリサイズは77.29MBでした。

Ionicアプリを作成する

$ ionic start [アプリ名]

ionic2アプリを作成したい場合は –v2オプションが必要です。

このままでも動く(はず)なのですが、

https://stackoverflow.com/questions/42613882/error-could-not-find-gradle-wrapper-within-android-sdk-might-need-to-update-yo

こちらで取り上げられているエラーのため、androidのplatformを入れ直しました。

$ ionic platform rm android
$ ionic platform add https://github.com/apache/cordova-android

Crosswalkプラグインを追加する

$ ionic plugin add cordova-plugin-crosswalk-webview

これだけで導入は終わりのはずなのですが…

エラー: XWalkWebViewEngineはabstractでなく、CordovaWebViewEngine内のabstractメソッドevaluateJavascript(String,ValueCallback<String>)をオーバーライドしません

public class XWalkWebViewEngine implements CordovaWebViewEngine {

       ^

ionic run androidするとこんなエラーが。

よく見るとプラグインのインストール時に警告文が出ていました。

Unmet project requirements for latest version of cordova-plugin-crosswalk-webview:

    cordova-android (6.3.0-dev in project, >=6 required)

Fetching highest version of cordova-plugin-crosswalk-webview that this project supports: 1.8.0 (latest is 2.3.0)

platformを入れ直しているために最新版のCrosswalkプラグインがインストールできていなかった？ようなので、

$ ionic plugin rm cordova-plugin-crosswalk-webview ionic plugin
$ add cordova-plugin-crosswalk-webview@2.3.0

バージョン指定して入れ直しました。

なんとか無事に動くようになりました。