Exécuter des applications Chrome sur des appareils mobiles avec Apache Cordova

La chaîne d'outils permettant d'exécuter des applications Chrome sur mobile est en version preview développeur anticipée. N'hésitez pas à nous faire part de vos commentaires via l'outil de suivi des problèmes GitHub, notre forum pour les développeurs d'applications Chrome, Stack Overflow ou notre page pour les développeurs G+.

Une application Chrome exécutée à la fois sur ordinateur et sur appareil mobile

Présentation

Vous pouvez exécuter vos applications Chrome sur Android et iOS via une chaîne d'outils basée sur Apache Cordova, un framework de développement mobile open source permettant de créer des applications mobiles avec des fonctionnalités natives à l'aide de HTML, CSS et JavaScript.

Apache Cordova encapsule le code Web de votre application avec un shell d'application natif et vous permet de distribuer votre application Web hybride via Google Play et/ou l'App Store d'Apple. Pour utiliser Apache Cordova avec une application Chrome existante, utilisez l'outil de ligne de commande cca (c ordova c hrome a pp).

Ressources supplémentaires

C'est parti !

Étape 1: Installez vos outils de développement

La chaîne d'outils des applications Chrome pour mobile peut cibler iOS 6 ou version ultérieure et Android 4.x ou version ultérieure.

Dépendances de développement pour toutes les plates-formes

  • La version 0.10.0 (ou ultérieure) de Node.js avec npm est requise:

    • Windows: installez Node.js à l'aide des exécutables d'installation téléchargeables sur nodejs.org.
    • OS X ou Linux: les exécutables d'installation sont également disponibles sur nodejs.org. Si vous souhaitez éviter d'avoir besoin d'un accès racine, il peut être plus pratique d'installer via nvm. Exemple :
    curl https://raw.github.com/creationix/nvm/master/install.sh | sh
source ~/.bash_profile || source ~/.profile || source ~/.bashrc
nvm install 0.10
nvm alias default 0.10

Cibler Android

Lorsque vous développez une application pour Android, vous devez également installer:

  • JDK Java 7 (ou version ultérieure)
  • SDK Android version 4.4.2 (ou version ultérieure)
    • Installez le SDK Android et les outils pour les développeurs Android, qui sont fournis avec le bundle Android ADT.
    • Ajoutez sdk/tools et sdk/platform-tools à votre variable d'environnement PATH.
    • OS X: la version d'Eclipse fournie avec le SDK Android nécessite JRE 6. Si l'ouverture d'Eclipse.app ne vous invite pas à installer JRE 6, téléchargez-le depuis l'App Store pour Mac.
    • Linux: le SDK Android nécessite des bibliothèques d'assistance 32 bits. Sous Ubuntu, obtenez-les via : apt-get install ia32-libs.
  • Apache Ant

Ciblage d'iOS

Veuillez noter que le développement iOS ne peut être effectué que sur OS X. De plus, vous devez installer:

  • Xcode 5 (ou version ultérieure), qui inclut les outils de ligne de commande Xcode
  • ios-deploy (nécessaire pour le déploiement sur un appareil iOS)
    • npm install -g ios-deploy
  • ios-sim (nécessaire pour le déploiement sur le simulateur iOS)
    • npm install -g ios-sim
  • Facultatif: S'inscrire en tant que développeur iOS
    • Cela est nécessaire pour les tests sur des appareils réels et pour l'envoi sur la plate-forme de téléchargement d'applications.
    • Vous pouvez ignorer l'enregistrement si vous prévoyez d'utiliser uniquement les simulateurs iPhone/iPad.

Installer l'outil de ligne de commande cca

Installez cca via npm:

npm install -g cca

Pour mettre à jour la chaîne d'outils ultérieurement avec de nouvelles versions: npm update -g cca.

Vérifiez que tout est correctement installé en exécutant la commande suivante dans la ligne de commande:

cca checkenv

Le numéro de version de cca s'affiche, ainsi qu'une confirmation de l'installation de votre SDK Android ou iOS.

Étape 2: Créez un projet

Pour créer un projet d'application Chrome mobile par défaut dans un répertoire nommé YourApp, exécutez la commande suivante:

cca create YourApp

Si vous avez déjà créé une application Chrome et que vous souhaitez la porter vers une plate-forme mobile, vous pouvez utiliser l'option --link-to pour créer un symlink vers celle-ci:

cca create YourApp --link-to=path/to/manifest.json

Si vous souhaitez plutôt copier vos fichiers d'application Chrome existants, vous pouvez utiliser l'option --copy-from:

cca create YourApp --copy-from=path/to/manifest.json

Vous n'avez pas encore votre propre application Chrome ? Essayez l'un des nombreux exemples d'applications Chrome compatibles avec les appareils mobiles.

Étape 3: Développement

Vous pouvez créer et exécuter votre application de deux manières:

  • Option A: à partir de la ligne de commande, à l'aide de l'outil cca ou
  • Option B: À l'aide d'un IDE, comme Eclipse ou Xcode. L'utilisation d'un IDE est entièrement facultative (mais souvent utile) pour vous aider à lancer, configurer et déboguer votre application mobile hybride.

Option A: Développer et compiler à l'aide de la ligne de commande

À partir de la racine du dossier de projet généré par cca:

Android

  • Pour exécuter votre application sur Android Emulator: cca emulate android
    • Remarque: Pour cela, vous devez configurer un émulateur. Vous pouvez exécuter android avd pour configurer cette option. Téléchargez des images d'émulateur supplémentaires en exécutant android. Pour accélérer l'exécution des images Intel, installez HAXM d'Intel.
  • Pour exécuter votre application sur un appareil Android connecté: cca run android

iOS

  • Pour exécuter votre application sur le simulateur iOS: cca emulate ios
  • Pour exécuter votre application sur un appareil iOS connecté: cca run ios

Option B: Développer et compiler à l'aide d'un IDE

Android

  1. Dans Eclipse, sélectionnez File -> Import.
  2. Sélectionnez Android > Existing Android Code Into Workspace.
  3. Importez à partir du chemin que vous venez de créer avec cca.
    • Vous devriez avoir deux projets à importer, dont *-CordovaLib.
  4. Cliquez sur le bouton de lecture pour exécuter votre application.
    • Vous devez créer une configuration d'exécution (comme pour toutes les applications Java). Vous serez généralement invité automatiquement à effectuer cette action la première fois.
    • Vous devrez également gérer vos appareils/émulateurs pour la première fois.

iOS

  1. Ouvrez le projet dans Xcode en saisissant ce qui suit dans une fenêtre de terminal:

    cd YourApp
open platforms/ios/*.xcodeproj

  2. Assurez-vous de créer la bonne cible.

    En haut à gauche (à côté des boutons "Exécuter" et "Arrêter"), un menu déroulant permet de sélectionner le projet et l'appareil cibles. Assurez-vous que YourApp est sélectionné et non CordovaLib.

  3. Cliquez sur le bouton de lecture.

Modifier le code source de votre application

Vos fichiers HTML, CSS et JavaScript se trouvent dans le répertoire www du dossier de votre projet cca.

Important: Après avoir modifié www/, vous devez exécuter cca prepare avant de déployer votre application. Si vous exécutez cca build, cca run ou cca emulate à partir de la ligne de commande, l'étape de préparation est effectuée automatiquement. Si vous développez avec Eclipse/XCode, vous devez exécuter cca prepare manuellement.

Débogage

Vous pouvez déboguer votre application Chrome sur mobile de la même manière que vous déboguez les applications Cordova.

Étape 4: Étapes suivantes

Maintenant que vous disposez d'une application Chrome mobile fonctionnelle, vous pouvez améliorer l'expérience sur les appareils mobiles de nombreuses façons.

Fichier manifeste pour mobile

Certains paramètres des applications Chrome ne s'appliquent qu'aux plates-formes mobiles. Nous avons créé un fichier www/manifest.mobile.json pour les contenir, et les valeurs spécifiques sont référencées dans la documentation du plug-in et dans ce guide.

Vous devez ajuster les valeurs ici en conséquence.

Icônes

Les applications mobiles nécessitent quelques résolutions d'icônes supplémentaires par rapport aux applications Chrome pour ordinateur.

Pour Android, les tailles suivantes sont nécessaires:

  • 36 px, 48 px, 78 px, 96 px

Pour les applications iOS, les tailles requises diffèrent selon que vous prenez en charge iOS 6 ou iOS 7. Le nombre minimal d'icônes requis est le suivant:

  • iOS 6: 57 px, 72 px, 114 px, 144 px
  • iOS 7: 72 px, 120 px, 152 px

La liste complète des icônes se présente comme suit dans votre fichier manifest.json:

"icons": {
  "16": "assets/icons/icon16.png",
  "36": "assets/icons/icon36.png",
  "48": "assets/icons/icon48.png",
  "57": "assets/icons/icon57.png",
  "72": "assets/icons/icon72.png",
  "78": "assets/icons/icon78.png",
  "96": "assets/icons/icon96.png",
  "114": "assets/icons/icon114.png",
  "120": "assets/icons/icon120.png",
  "128": "assets/icons/icon128.png",
  "144": "assets/icons/icon144.png",
  "152": "assets/icons/icon152.png"
}

Les icônes seront copiées aux emplacements appropriés pour chaque plate-forme chaque fois que vous exécuterez cca prepare.

Écrans de démarrage

Les applications iOS affichent un bref écran de démarrage pendant leur chargement. Un ensemble d'écrans de démarrage Cordova par défaut est inclus dans platforms/ios/[AppName]/Resources/splash.

Les tailles requises sont les suivantes:

  • 320 x 480 px + 2x
  • 768 x 1 024 pixels + 2 x (iPad en mode portrait)
  • 1 024 x 768 pixels + 2 x (iPad en mode paysage)
  • 640 x 1 146 px

Les images de l'écran de démarrage ne sont actuellement pas modifiées par cca.

Étape 5: Publier

Dans le répertoire platforms de votre projet, vous avez deux projets natifs complets: un pour Android et un pour iOS. Vous pouvez créer des versions de ces projets et les publier sur Google Play ou sur l'App Store d'iOS.

Publier sur le Play Store

Pour publier votre application Android sur le Play Store, procédez comme suit:

  1. Mettez à jour les deux ID de version Android, puis exécutez cca prepare:

    • android:versionName est défini à l'aide de la clé version dans www/manifest.json (ceci définit également la version de votre application de bureau empaquetée).
    • android:versionCode est défini à l'aide de la clé versionCode dans www/manifest.mobile.js.

  2. Modifiez (ou créez) platforms/android/ant.properties et définissez les propriétés key.store et key.alias (comme expliqué dans la documentation pour les développeurs Android).

  3. Compilez votre projet:

    ./platforms/android/cordova/build --release

  4. Recherchez votre fichier .apk signé dans platforms/android/ant-build/.

  5. Importez votre application signée dans la console Google Play.

Publier sur l'App Store iOS

  1. Mettez à jour la version de l'application en définissant la clé CFBundleVersion dans www/manifest.mobile.js, puis exécutez cca prepare.

  2. Ouvrez le fichier de projet Xcode situé dans votre répertoire platforms/ios:

    plates-formes ouvertes/ios/*.xcodeproj

  3. Suivez le guide de distribution d'applications d'Apple.

Considérations particulières

Si vous ne connaissez pas les applications Chrome, vous devez savoir que certaines fonctionnalités Web sont désactivées. Cependant, plusieurs d'entre eux fonctionnent actuellement dans Cordova.

Il est possible qu'une application Chrome ne fonctionne pas immédiatement sur mobile. Voici quelques problèmes courants liés au transfert vers mobile:

  • Problèmes de mise en page avec les petits écrans, en particulier en mode portrait.
    • Solution suggérée:utilisez des requêtes média CSS pour optimiser votre contenu pour les écrans plus petits.
  • Les tailles de fenêtre de l'application Chrome définies via chrome.app.window seront ignorées et utiliseront les dimensions natives de l'appareil.
    • Solution suggérée:Supprimez les dimensions de fenêtre codées en dur. Concevez votre application en tenant compte de différentes tailles.
  • Il sera difficile d'appuyer sur de petits boutons et liens avec un doigt.
    • Solution suggérée:ajustez vos zones cibles tactiles pour qu'elles mesurent au moins 44 x 44 points.
  • Comportement inattendu lorsque vous utilisez le survol de la souris, qui n'existe pas sur les écrans tactiles.
    • Solution suggérée:En plus du survol, activez les éléments d'interface utilisateur tels que les menus déroulants et les info-bulles en appuyant sur l'écran.
  • Un délai de pression de 300 ms.

API Chrome compatibles

Nous avons rendu de nombreuses API Chrome principales disponibles pour les applications Chrome pour mobile, y compris les suivantes:

  • identity (identité) : connecte les utilisateurs à l'aide d'OAuth2.
  • payments : vendre des biens virtuels dans votre application mobile
  • pushMessaging : envoie de messages push à votre application depuis votre serveur
  • sockets : envoie et réception de données sur le réseau à l'aide de TCP et UDP
  • notifications (Android uniquement) : envoyez des notifications enrichies depuis votre application mobile.
  • storage : stocke et récupère des données clé-valeur localement
  • syncFileSystem : stocke et récupère les fichiers sauvegardés par Google Drive
  • alarmes : exécutez des tâches régulièrement.
  • inactif : détecte les changements d'état de la machine lorsqu'elle est inactive.
  • power : ignorer les fonctionnalités de gestion de l'alimentation du système

Cependant, toutes les API JavaScript Chrome ne sont pas implémentées. De plus, toutes les fonctionnalités de Chrome pour ordinateur ne sont pas disponibles sur mobile:

  • aucune balise <webview>
  • pas de IndexedDB
  • pas de getUserMedia()
  • no NaCl

Vous pouvez suivre la progression sur la page État de l'API.

Outil pour les développeurs d'applications Chrome

L'outil de développement d'applications Chrome (ADT) pour Android est une application Android autonome qui vous permet de télécharger et d'exécuter une application Chrome sans avoir à configurer la chaîne d'outils de développement, comme décrit ci-dessus. Utilisez l'ADT Chrome lorsque vous souhaitez prévisualiser rapidement une application Chrome existante (déjà empaquetée en tant que fichier .crx) sur votre appareil Android.

L'ADT Chrome pour Android est actuellement disponible en version pré-alpha. Pour l'essayer, consultez les notes de version ChromeADT.apk pour obtenir des instructions d'installation et d'utilisation.