読者です 読者をやめる 読者になる 読者になる

Macでアプリ開発ブログ

MacによるiPhone&Androidアプリの開発・作成に関するブログ。Macの設定からアプリ開発環境構築、おすすめのツールなど

IonicでCrosswalkを導入し、AndroidのWebViewのパフォーマンスを向上させる方法

スポンサード リンク

CordovaベースであるIonicやMonacaでは、iOSアプリとAndroidアプリの両方を同時に開発できます。

しかし、開発を進めるにつれて感じるのは、複数のOSや端末で完全に統一された挙動を実現することの難しさだと思います。

特にAndroidでは、OSやWebViewのバージョン、また端末の種類によっても挙動や表示が異なることが多いので、その都度実機で確認(テスト)して問題をクリアしなければなりません。

実際に私が以前に開発を行っていたアプリでも、このAndroidのバグ(というかプラットフォームごとの挙動に違い)には大変悩まされました。

そこで、Crosswalkを導入することにしました。

Crosswalkとは

Crosswalkとは、アプリ内に独自のレンダリングエンジンを内包して、デフォルトのWebViewの代替として利用する機能になります。

Crosswalkを導入することで、AndroidのOSやWebViewのバージョンが異なる機種間でも同じWebViewを利用することになるので挙動が統一され安定します。

具体的には、

  • Cordovaで利用できるAPIの統一
  • CSSによる見た目の統一(表示関連のバグの解消)
  • レンダリングのパフォーマンスの向上(動作スピードアップ)

などです。

古い機種でも最新のWebViewを利用することになるので、特にAndroid4〜4.3くらいではレンダリングのパフォーマンスが目に見えて向上しました。

※ただし新しい機種(OSのバージョンが新しい機種)では、デフォルトのWebView自体が強化されてますので、パフォーマンスの向上に関しては期待できない場合があります。

導入前の注意点(デメリット)

Crosswalkを導入するにあたって、いくつか注意点があります。

まず、CrosswalkはAndroid4.0以降の対応となります。そのため、Android2.xはサポートされていません。(現在のシェアからするとAndroid2.xは切り捨てても問題ないかと思いますが…)

次に、Crosswalkを内包する分、アプリの総容量が大きくなります。具体的には数十MBです。このため、アプリの起動時間(読み込み時間)が若干遅くなります。

また、もし既にリリース済みのアプリにCrosswalkを追加しようとしている場合は、Crosswalkの導入前後でlocalStorageが引き継がれないことにも注意が必要です。

Crosswalkの導入〜使い方

それではIonicでCrosswalkを導入する方法や使い方を見ていきます。

Crosswalk をインストール

// Ionicのプロジェクトディレクトリへ移動
cd project_name

// Crosswalkをインストール
ionic browser add crosswalk

// (バージョンを指定してインストールしたい場合は@でバージョンを指定)
ionic browser add crosswalk@12.41.296.5

インストールが正常に終了すると、/plugins/にCrosswalkのプラグインが追加されます。また、ionic.projectには"browsers"という項目が追加され、Crosswalkを利用する旨が記載されます。

Android SDK 関連のパッケージをバージョンアップ

Crosswalkのバージョンによっては、対応するAndroid SDKのバージョンが異なっている場合があります。

※試しに実機をUSBで繋ぎ、ionic run androidを実行してみてください。正常にビルドされずにエラーが発生する場合は、そのエラー文に必要なバージョンが指定されています。そのバージョンを参考に、SDK PlatformAndroid SDK Platform-toolsをバージョンアップします。

実機にビルド

// 実機をUSBで繋ぎビルド
ionic run android

初回ビルド時のみ、Crosswalk関連ファイルがダウンロードされるので少し時間がかかりました。

問題がなければ、これでCrosswalkが内包されたアプリが実機にインストールされるはずですので、パフォーマンスの違いなどを比較してみてください。