Cordova-ベストプラクティス

Cordovaはハイブリッドモバイルアプリの作成に使用されるため、プロジェクトで選択する前にこれを考慮する必要があります。以下は、Cordovaアプリ開発のベストプラクティスです。

シングルページアプリ

これは、すべてのCordovaアプリに推奨される設計です。 SPAはクライアント側ルーターと単一ページに読み込まれたナビゲーションを使用しています（通常は indexl ）。ルーティングはAJAXを介して処理されます。チュートリアルに従っている場合、ほとんどすべてのCordovaプラグインが使用可能になる前にデバイスの準備が整うまで待機する必要があることに気づいたでしょう。 SPAの設計により、読み込み速度と全体的なパフォーマンスが向上します。

タッチイベント

Cordovaはモバイルワールドで使用されるため、 click イベントの代わりに touchstart および touchend イベントを使用するのが自然です。クリックイベントには300ミリ秒の遅延があるため、クリックはネイティブに感じられません。一方、タッチイベントはすべてのプラットフォームでサポートされているわけではありません。使用するものを決定する前に、これを考慮に入れる必要があります。

アニメーション

JavaScriptアニメーションの代わりに、ハードウェアアクセラレーションされた* CSSトランジション*を常に使用する必要があります。モバイルデバイスでのパフォーマンスが向上するためです。

ストレージ

可能な限りストレージキャッシュを使用します。通常、モバイルネットワーク接続は不良であるため、アプリ内のネットワーク呼び出しを最小限に抑える必要があります。また、ユーザーのデバイスがオフラインになる場合があるため、アプリのオフラインステータスも処理する必要があります。

スクロール

ほとんどの場合、アプリ内の最初の遅い部分はリストのスクロールです。アプリのスクロールパフォーマンスを改善するには、いくつかの方法があります。ネイティブスクロールを使用することをお勧めします。リストに多数のアイテムがある場合、それらを部分的にロードする必要があります。必要に応じてローダーを使用してください。

画像

画像もモバイルアプリの速度を低下させる可能性があります。可能な限り、CSSイメージスプライトを使用する必要があります。画像を拡大縮小するのではなく、完全に合わせるようにしてください。

CSSスタイル

影やグラデーションはページのレンダリング時間を遅くするため、避ける必要があります。

単純化

ブラウザのDOMは遅いため、DOM操作とDOM要素の数を最小限に抑えるようにしてください。

テスト

できるだけ多くのデバイスとオペレーティングシステムのバージョンでアプリをテストしてください。アプリが1つのデバイスで問題なく動作する場合、他のデバイスまたはプラットフォームで動作するという意味ではありません。

Cordova-best-practices

目次