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 pour les développeurs. N'hésitez pas à donner nous faire part de vos commentaires via l'outil de suivi des problèmes GitHub, notre forum des développeurs d'applications Chrome, sur Stack Overflow ou notre page Google+ pour les développeurs.

disposer d'une application Chrome fonctionnant à 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 à l'aide de HTML, CSS et JavaScript.

Apache Cordova encapsule le code Web de votre application dans un shell d'application natif et vous permet 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 la 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 Remarques.
  • Pour connaître les API Chrome compatibles avec les appareils mobiles, consultez la page État de l'API.
  • Pour prévisualiser votre application Chrome sur un appareil Android sans chaîne d'outils, utilisez les applications Chrome Outils pour les développeurs (ADT).

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

  • Veuillez utiliser Node.js version 0.10.0 (ou ultérieure) avec npm:

    • 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 vous n'avez pas besoin d'un accès root, il peut être plus pratique de l'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

Ciblage d'Android

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

  • Java JDK 7 (ou version ultérieure)
  • SDK Android 4.4.2 (ou version ultérieure) <ph type="x-smartling-placeholder">
      </ph>
    • 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 Eclipse.app ne vous invite pas à installer JRE 6. Pour le récupérer, utilisez le Mac App Store.
    • Linux: le SDK Android nécessite des bibliothèques Support 32 bits. Sous Ubuntu, vous pouvez les obtenir via: apt-get install ia32-libs
  • Apache Ant <ph type="x-smartling-placeholder">

Ciblage d'iOS

Notez 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 déployer sur un appareil iOS) <ph type="x-smartling-placeholder">
      </ph>
    • npm install -g ios-deploy
  • ios-sim (nécessaire pour le déploiement sur le simulateur iOS) <ph type="x-smartling-placeholder">
      </ph>
    • npm install -g ios-sim
  • Facultatif: S'inscrire en tant que développeur iOS <ph type="x-smartling-placeholder">
      </ph>
    • Cela 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 les nouvelles versions: npm update -g cca.

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

cca checkenv

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

É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 la --link-to pour créer un lien symbolique vers celui-ci:

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

Si vous préférez 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 pour mobile l'assistance technique.

É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: En utilisant un IDE, comme Eclipse ou Xcode L'utilisation d'un IDE est entièrement facultative (mais souvent utile) pour vous aider au lancement, à la configuration et au débogage de 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 <ph type="x-smartling-placeholder">
      </ph>
    • Remarque: Pour cela, vous devez configurer un émulateur. 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 Intelligence s’exécutent plus rapidement, installer Intel HAXM.
  • Pour exécuter votre application 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 <ph type="x-smartling-placeholder">

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 les données à partir du chemin d'accès que vous venez de créer avec cca.
    • Vous devriez avoir deux projets à importer, dont un *-CordovaLib.
  4. Cliquez sur le bouton Lecture pour exécuter votre application. <ph type="x-smartling-placeholder">
      </ph>
    • Vous devrez créer une configuration d'exécution (comme pour toutes les applications Java). Vous obtenez généralement vous y êtes invité pour la première fois automatiquement.
    • Vous devrez également gérer vos appareils/émulateurs la première fois.

iOS

  1. Ouvrez le projet dans Xcode en saisissant la commande suivante 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 vous permet de sélectionner le projet cible et appareil. 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, la l'étape de préparation s'effectue automatiquement. Si vous développez à l'aide d'Eclipse/XCode, vous devez exécuter cca prepare manuellement.

Débogage

Pour déboguer votre application Chrome sur mobile, suivez la même procédure que pour déboguer des applications Cordova.

Étape 4: Étapes suivantes

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

Fichier manifeste mobile

Certains paramètres de l'application Chrome ne s'appliquent qu'aux plates-formes mobiles. Nous avons créé www/manifest.mobile.json pour les contenir. Les valeurs spécifiques sont référencées tout au long du fichier la documentation du plug-in et ce guide.

Vous devez ajuster les valeurs ici en conséquence.

Icônes

Les applications mobiles nécessitent un peu plus de résolutions d'icônes que les applications Chrome de bureau.

Pour Android, les tailles suivantes sont nécessaires:

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

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: 57px, 72px, 114px, 144px
  • iOS 7: 72px, 120px, 152px

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 de chaque plate-forme à chaque exécution cca prepare

Écrans de démarrage

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

Les tailles requises sont les suivantes:

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

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 une 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, 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 (ce qui définit le de votre application de bureau empaquetée également).
    • 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 éléments key.store et key.alias (comme expliqué dans la documentation pour les développeurs Android).

  3. Créez votre projet:

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

  4. Votre fichier .apk signé se trouve dans platforms/android/ant-build/.

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

Publier sur l'App Store iOS

  1. Mettez à jour la version de l'appli 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 votre répertoire platforms/ios:

    plates-formes ouvertes/ios/*.xcodeproj

  3. Suivez l'App Distribution Guide d'Apple.

Considérations particulières

Si vous débutez avec les applications Chrome, le principal piège est que certaines fonctionnalités Web sont désactivées. Cependant, plusieurs d'entre eux fonctionnent actuellement à Cordoue.

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

  • Problèmes de mise en page avec 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 écrans de petite taille.
  • Les tailles de fenêtre de l'application Chrome définies via chrome.app.window seront ignorées. Elles utiliseront plutôt la les dimensions natives de l'appareil.
    • Solution suggérée:supprimez les dimensions de fenêtre codées en dur. concevoir votre application avec différentes tailles dans à l'esprit.
  • Il sera difficile d'appuyer sur les petits boutons et les liens avec un doigt.
    • Solution suggérée:ajustez vos zones cibles tactiles sur au moins 44 x 44 points.
  • Comportement inattendu en cas de survol avec la souris, qui n'existe pas sur les écrans tactiles.
    • Correction suggérée:en plus du passage de la souris, activez des éléments d'interface utilisateur tels que les menus déroulants et les info-bulles appuyez.
  • Délai d'appui de 300 ms.

API Chrome compatibles

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

  • identity (identité) : connecte les utilisateurs à l'aide d'OAuth2.
  • payments : vente de biens virtuels via votre application mobile ;
  • pushMessaging : transfère des messages vers votre application à partir de votre serveur.
  • Sockets : envoient et reçoivent des données sur le réseau via 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 : permet de stocker et de récupérer des fichiers sauvegardés par Google Drive
  • alarms : exécute des tâches régulièrement
  • idle : permet de détecter tout changement d'état d'inactivité de la machine.
  • power : ignorer les fonctionnalités de gestion de l'alimentation du système

Cependant, toutes les API JavaScript de Chrome ne sont pas implémentées. Les fonctionnalités de Chrome pour ordinateur ne sont pas toutes disponible 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 : télécharger et exécuter une application Chrome sans configurer la chaîne d'outils de développement, comme décrit ci-dessus. Utilisez L'ADT de Chrome 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 en version pré-alpha. Pour l'essayer, consultez le Notes de version de ChromeADT.apk pour obtenir des instructions d'installation et d'utilisation