IonicでCrosswalk
- 2015/01/23
- suganuma
IonicがCrosswalkに対応しました。
Crosswalk comes to Ionic
Crosswalkを組み込んでbuildを行うと、アプリ内にレンダリングエンジンを持つことができます。
通常、WebViewをレンダリングするのに、端末のデフォルトのレンダリングエンジンが使われます。しかし、OSのバージョンごとにレンダリングエンジンの振る舞いが微妙に違います。また、古いOSだと最新のものと比べてレンダリング速度が遅いです。
Crosswalkは、高速なレンダリングエンジンBlinkを搭載しており、それらの問題点を改善できます。
ただし、Crosswalkが対応しているのはandroid4.x以降だけです。iOSおよび古いandroidは未対応です。
既存のandroidアプリにCrosswalkを組み込んでみました。
IonicにCrosswalkを組み込むのは、すごく簡単です。
Ionicのプロジェクトディレクトリ直下で以下を実行するのみです。
ionic browser add crosswalk
ただこれだと、古いバージョンのCrosswalkが組み込まれてしまったので、バージョンを指定して以下のように実行しました。
ionic browser add crosswalk@10.39.235.15
注意すべきなのは、これを実行するとplatformsディレクトリ以下を大きく書き換えてしまいます。あらかじめ、プロジェクトディレクトリのバックアップを取っておくとか、バージョン管理で元に戻せるようにしておく必要があります。
で、build&installします。
ionic run android
作成されたapkファイルを見ると、Crosswalk非搭載の時はapkファイルが8MBだったのに、40MBもありました。
BUILD_MULTIPLE_APKS=true ionic build android
とやると、x86とARMそれぞれのapkが生成され、サイズは25MB程度でした。
アプリを実行します。実行端末はXPERIA Z1（android4.4.2）です。
読み込みに時間がかかるので、起動が若干遅くなっています。
他、気づいた点
-
今まで<input type=date>にあった以下の不具合がなくなった
- 値をセットしているにもかかわらず、datepickerのデフォルト値が今日の日付
- datepickerの枠外をクリックし表示を消した後、再度datepickerを表示できない
- スプラッシュスクリーンが出なくなった
- 今までファイルのアップロードができていたのに出来なくなった（何でだろう）
結構、変わっています。
速度的には、どうだろう・・・。少なくとも劇的には速くなってないですね。
