Ionic2にCrosswalkを導入する

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アプリを作成する

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

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

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

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

 

Crosswalkプラグインを追加する

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

エラー: 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プラグインがインストールできていなかった?ようなので、

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

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

Pocket

The following two tabs change content below.
Mao Tajiri

Mao Tajiri

毎日頭をひねりながらプログラミングをしています。よろしくお願いします。
Mao Tajiri

最新記事 by Mao Tajiri (全て見る)