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 disponible en version preview anticipée. N'hésitez pas à nous faire part de vos commentaires à l'aide de l'outil GitHub Issue Tracker, du forum des développeurs d'applications Chrome, de Stack Overflow ou de notre page pour les développeurs Google+.

Une application Chrome exécutée à la fois sur ordinateur et sur 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 dans un shell d'application native 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

  • Vous devez tenir compte de certains points spécifiques lorsque vous développez avec Cordova. Vous les trouverez dans la section Considérations.
  • Pour connaître les API Chrome compatibles avec les appareils mobiles, accédez à la page État des API.
  • Pour prévisualiser votre application Chrome sur un appareil Android sans chaîne d'outils, utilisez l'outil de développement d'applications Chrome (ADT).

Nous pouvons commencer.

Étape 1: Installez les outils de développement

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

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

  • Node.js version 0.10.0 (ou ultérieure) 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 de procéder à l'installation 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:

  • Java JDK 7 (ou version ultérieure)
  • SDK Android version 4.4.2 (ou ultérieure)
    • Installez le SDK Android et les outils pour les développeurs Android fournis avec Android ADT Bundle.
    • 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 via l'App Store Mac.
    • Linux: le SDK Android nécessite des bibliothèques Support 32 bits. Sur Ubuntu, vous pouvez les obtenir via : apt-get install ia32-libs.
  • Apache Ant

Ciblage sur iOS

Veuillez noter que le développement pour iOS ne peut être effectué que sous OS X. Vous devez également installer les éléments suivants:

  • 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 dans le simulateur iOS)
    • npm install -g ios-sim
  • Facultatif: S'inscrire en tant que développeur iOS
    • Cette étape est nécessaire pour les tests sur des appareils réels et pour l'envoi à la plate-forme de téléchargement d'applications.
    • Vous pouvez ignorer l'enregistrement si vous prévoyez uniquement d'utiliser 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 installé correctement en exécutant cette commande depuis la ligne de commande:

cca checkenv

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

Étape 2: Créez un projet

Pour créer un projet d'application mobile Chrome 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 transférer vers une plate-forme mobile, vous pouvez utiliser l'indicateur --link-to pour créer un lien symbolique vers celle-ci:

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

Si vous souhaitez copier les fichiers de votre application Chrome existants, vous pouvez utiliser l'indicateur --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: Depuis 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 faciliter le lancement, la configuration et le débogage de votre application mobile hybride.

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

Depuis la racine du dossier de votre projet généré par cca:

Android

  • Pour exécuter votre application sur Android Emulator: cca emulate android
    • Remarque: Vous devez configurer un émulateur pour pouvoir effectuer cette opération. Vous pouvez exécuter android avd pour configurer cela. Téléchargez des images d'émulateur supplémentaires en exécutant android. Pour que les images Intel s'exécutent plus rapidement, installez Intel's HAXM.
  • Pour exécuter votre appli sur un appareil Android connecté: cca run android

iOS

  • Pour exécuter votre application dans 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. Effectuez l'importation à partir du chemin que vous venez de créer avec cca.
    • Vous devriez avoir deux projets à importer, dont l'un est *-CordovaLib.
  4. Cliquez sur le bouton de lecture pour exécuter l'application.
    • Vous devez créer une configuration d'exécution (comme avec toutes les applications Java). Vous êtes généralement invité à effectuer cette opération la première fois.
    • Vous devrez également gérer vos appareils/émulateurs 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 apporté des modifications à 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 à l'aide d'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 mobile Chrome fonctionnelle, il existe de nombreuses façons d'améliorer l'expérience sur les appareils mobiles.

Fichier manifeste mobile

Certains paramètres de l'application 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 tout au long de la documentation du plug-in et de ce guide.

Vous devez ajuster les valeurs ici en conséquence.

Icônes

Les applications mobiles ont besoin d'une résolution d'icônes légèrement supérieure à celle des applications Chrome pour ordinateur.

Pour Android, ces tailles sont nécessaires:

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

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

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

Une liste complète d'icônes ressemblerait à ceci 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 sont copiées aux emplacements appropriés pour chaque plate-forme chaque fois que vous exécutez cca prepare.

Écrans de démarrage

Sur iOS, un bref écran de démarrage s'affiche pendant le chargement d'une application. 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 + 2
  • 768 x 1 024 pixels + 2 fois (iPad au format portrait)
  • 1 024 x 768 pixels + 2 x (iPad en mode paysage)
  • 640px x 1146px

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

Étape 5: Publication

Le répertoire platforms de votre projet contient 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 iOS.

Publier sur le Play Store

Pour publier votre application Android sur le Play Store:

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

    • android:versionName est défini à l'aide de la clé version dans www/manifest.json (cela 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 le fichier .apk signé qui se trouve dans platforms/android/ant-build/.

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

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 qui se trouve dans le répertoire platforms/ios:

    ouvrir plates-formes/ios/*.xcodeproj

  3. Suivez le Guide de distribution des applications d'Apple.

Considérations particulières

Si vous débutez avec les applications Chrome, sachez que certaines fonctionnalités Web sont désactivées. Cependant, plusieurs d'entre elles fonctionnent actuellement à Cordoue.

Il est possible qu'une application Chrome ne fonctionne pas par défaut sur les appareils mobiles. Voici quelques problèmes courants liés au portage vers un appareil mobile:

  • Problèmes de mise en page sur les petits écrans, en particulier en mode portrait
    • Solution suggérée:utilisez les requêtes média CSS afin d'optimiser votre contenu pour les petits écrans.
  • Les tailles de fenêtre de l'application Chrome définies via chrome.app.window seront ignorées à la place des 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 les petits boutons et les liens avec le doigt.
    • Solution suggérée:ajustez vos zones cibles tactiles pour qu'elles correspondent à au moins 44 x 44 points.
  • Comportement inattendu en cas de survol avec la souris, qui n'existe pas sur les écrans tactiles.
    • Solution suggérée:en plus de pointer dessus, activez les éléments d'interface utilisateur tels que les menus déroulants et les info-bulles lorsque l'utilisateur appuie dessus.
  • Délai d'appui de 300 ms.

API Chrome compatibles

De nombreuses API Chrome principales sont désormais disponibles pour les applications Chrome pour mobile, y compris les suivantes:

  • identité : utilisateurs connectés avec OAuth2
  • payments : vendre des biens virtuels dans votre application mobile ;
  • pushMessaging : permet de transmettre des messages à votre application à partir de votre serveur.
  • Sockets : envoyez et recevez des données sur le réseau à l'aide de TCP et UDP.
  • notifications (Android uniquement) : envoyer des notifications enrichies depuis votre application mobile.
  • storage : stocke et récupère les données clé-valeur localement.
  • syncFileSystem : stocker et récupérer des fichiers sauvegardés par Google Drive
  • alarms : exécute des tâches régulièrement
  • idle : détecte le changement d'état d'inactivité de la machine.
  • power : ignore les fonctionnalités de gestion de l'alimentation du système

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

  • aucune balise <webview>
  • aucune base de données indexée
  • pas de getUserMedia()
  • sans 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 configurer la chaîne d'outils de développement, comme décrit ci-dessus. Utilisez Chrome ADT lorsque vous souhaitez prévisualiser rapidement une application Chrome existante (déjà empaquetée au format .crx) sur votre appareil Android.

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