LANCARD.LAB｜ランカードコムのスタッフブログ

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を表示できない
• スプラッシュスクリーンが出なくなった
• 今までファイルのアップロードができていたのに出来なくなった（何でだろう）

結構、変わっています。
速度的には、どうだろう・・・。少なくとも劇的には速くなってないですね。