Eseguire le app di Chrome sui dispositivi mobili utilizzando Apache Cordova

La Toolchain per l'esecuzione delle app di Chrome sui dispositivi mobili è in anteprima per gli sviluppatori. Non esitare a fornirci il tuo feedback tramite il tracker dei problemi GitHub, il nostro forum per gli sviluppatori di app per Chrome su Stack Overflow o la nostra pagina per sviluppatori di G+.

Un'app di Chrome in esecuzione sia su computer che su dispositivi mobili

Panoramica

Puoi eseguire le tue app di Chrome su Android e iOS tramite una toolchain basata su Apache Cordova, un framework di sviluppo mobile open source per la creazione di app mobile con funzionalità native utilizzando HTML, CSS e JavaScript.

Apache Cordova esegue il wrapping del codice web della tua applicazione con una shell nativa dell'applicazione e ti consente di distribuire la tua app web ibrida tramite Google Play e/o l'App Store di Apple. Per utilizzare Apache Cordova con un'app di Chrome esistente, utilizza lo strumento a riga di comando cca (c ordova c hrome a pp).

Risorse aggiuntive

  • Ci sono alcune considerazioni particolari che dovresti tenere a mente quando sviluppi con Cordova; le abbiamo elencate nella sezione Considerazioni.
  • Per visualizzare le API di Chrome supportate sui dispositivi mobili, visita la pagina Stato API.
  • Per visualizzare l'anteprima dell'app di Chrome su un dispositivo Android senza la Toolchain, utilizza lo Strumento per sviluppatori di app di Chrome (ADT).

Iniziamo.

Passaggio 1: installa gli strumenti di sviluppo

La catena di strumenti delle app di Chrome per dispositivi mobili può avere come target iOS 6 e versioni successive e Android 4.x e versioni successive.

Dipendenze di sviluppo per tutte le piattaforme

  • È richiesta la versione 0.10.0 (o successiva) di Node.js con npm:

    • Windows: installa Node.js utilizzando gli eseguibili di installazione scaricabili da nodejs.org.
    • OS X o Linux: gli eseguibili per l'installazione sono disponibili anche su nodejs.org. Se vuoi evitare l'accesso root, potrebbe essere più pratico installare tramite nvm. Esempio:
    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

Targeting Android

Durante lo sviluppo di un'applicazione per Android, dovrai installare anche:

  • Java JDK 7 (o superiore)
  • SDK Android versione 4.4.2 (o successive)
    • Installa l'SDK Android e gli Strumenti per sviluppatori Android forniti con Android ADT Bundle.
    • Aggiungi sdk/tools e sdk/platform-tools alla variabile di ambiente PATH.
    • OS X: la versione di Eclipse fornita con l'SDK Android richiede JRE 6. Se aprendo Eclipse.app non ti viene chiesto di installare JRE 6, scaricalo dal Mac App Store.
    • Linux: l'SDK Android richiede librerie di supporto a 32 bit. Su Ubuntu, scaricali tramite: apt-get install ia32-libs.
  • Formica Apache

Targeting iOS

Tieni presente che lo sviluppo per iOS può essere eseguito solo su OS X. Inoltre, dovrai installare:

  • Xcode 5 (o versioni successive), che include gli strumenti a riga di comando Xcode
  • ios-deploy (necessario per il deployment su un dispositivo iOS)
    • npm install -g ios-deploy
  • ios-sim (necessario per il deployment nel simulatore iOS)
    • npm install -g ios-sim
  • (Facoltativo) Registrati come sviluppatore iOS
    • Questa operazione è necessaria per i test su dispositivi reali e per l'invio allo store.
    • Puoi saltare la registrazione se prevedi di utilizzare solo i simulatori per iPhone/iPad.

Installa lo strumento a riga di comando cca

Installa cca tramite npm:

npm install -g cca

Per aggiornare la Toolchain in un secondo momento con le nuove release: npm update -g cca.

Verifica che tutti gli elementi siano installati correttamente eseguendo questo comando dalla riga di comando:

cca checkenv

Verrà visualizzato il numero di versione di cca e la conferma dell'installazione dell'SDK per Android o iOS.

Passaggio 2: crea un progetto

Per creare un progetto di app di Chrome per dispositivi mobili predefinito in una directory denominata YourApp esegui:

cca create YourApp

Se hai già creato un'app di Chrome e vuoi portarla su una piattaforma mobile, puoi utilizzare il flag --link-to per creare un link simbolico all'app:

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

Se invece vuoi copiare i file esistenti dell'app Chrome, puoi utilizzare il flag --copy-from:

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

Non hai ancora un'app Chrome? Prova uno dei molti esempi di app Chrome con supporto per dispositivi mobili.

Passaggio 3: Sviluppo

Puoi creare ed eseguire la tua applicazione in due modi:

  • Opzione A: dalla riga di comando, utilizzando lo strumento cca, oppure
  • Opzione B: utilizzando un IDE, come Eclipse o Xcode. L'uso di un IDE è del tutto facoltativo (ma spesso utile) per facilitare l'avvio, la configurazione e il debug della tua applicazione mobile ibrida.

Opzione A: sviluppare e creare utilizzando la riga di comando

Dalla directory principale della cartella del progetto generata da cca:

Android

  • Per eseguire la tua app sull'emulatore Android: cca emulate android
    • Nota: è necessario aver configurato un emulatore. Puoi eseguire android avd per configurarlo. Scarica altre immagini dell'emulatore eseguendo android. Per velocizzare l'esecuzione delle immagini Intel, installa HAXM di Intel.
  • Per eseguire l'app su un dispositivo Android connesso: cca run android

iOS

  • Per eseguire l'app sul simulatore iOS: cca emulate ios
  • Per eseguire l'app su un dispositivo iOS connesso: cca run ios

Opzione B: sviluppare e creare utilizzando un IDE

Android

  1. In Eclissi, seleziona File -> Import.
  2. Scegli Android > Existing Android Code Into Workspace.
  3. Importa dal percorso appena creato con cca.
    • Dovresti avere due progetti da importare, uno dei quali è *-CordovaLib.
  4. Fai clic sul pulsante Riproduci per eseguire l'app.
    • Dovrai creare una configurazione di esecuzione (come per tutte le applicazioni Java). Di solito ti viene richiesto automaticamente per la prima volta.
    • La prima volta dovrai anche gestire i tuoi dispositivi/emulatori.

iOS

  1. Apri il progetto in Xcode digitando in una finestra del terminale quanto segue:

    cd YourApp
open platforms/ios/*.xcodeproj

  2. Assicurati di creare il target giusto.

    In alto a sinistra (accanto ai pulsanti Esegui e Interrompi), c'è un menu a discesa per selezionare il progetto e il dispositivo di destinazione. Assicurati che sia selezionato YourApp e non CordovaLib.

  3. Fai clic sul pulsante Riproduci.

Apportare modifiche al codice sorgente dell'app

I tuoi file HTML, CSS e JavaScript si trovano nella directory www della cartella del progetto cca.

Importante: dopo aver apportato modifiche a www/, devi eseguire cca prepare prima di eseguire il deployment dell'applicazione. Se esegui cca build, cca run o cca emulate dalla riga di comando, il passaggio di preparazione viene eseguito automaticamente. Se stai sviluppando utilizzando Eclipse/XCode, devi eseguire cca prepare manualmente.

Debug

Puoi eseguire il debug dell'app Chrome per dispositivi mobili nello stesso modo in cui esegui il debug delle applicazioni Cordova.

Passaggio 4. Passaggi successivi

Ora che disponi di un'app di Chrome per dispositivi mobili funzionante, ci sono molti modi per migliorare l'esperienza sui dispositivi mobili.

Manifest per dispositivi mobili

Esistono alcune impostazioni delle app di Chrome che si applicano solo alle piattaforme mobile. Abbiamo creato un file www/manifest.mobile.json per contenere questi valori e i valori specifici sono indicati in tutta la documentazione relativa ai plug-in e in questa guida.

Devi modificare i valori qui di conseguenza.

Icone

Le app mobile richiedono alcune risoluzioni più elevate delle icone rispetto alle app di Chrome desktop.

Per Android, sono necessarie le seguenti dimensioni:

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

Per le app per iOS, le dimensioni richieste variano a seconda che supporti iOS 6 o iOS 7. Il numero minimo di icone richieste è:

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

Nel tuo file manifest.json, un elenco completo di icone dovrebbe essere simile al seguente:

"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"
}

Le icone verranno copiate nelle posizioni appropriate per ogni piattaforma ogni volta che esegui cca prepare.

Schermate iniziali

Le app su iOS mostrano una breve schermata iniziale durante il caricamento delle app. In platforms/ios/[AppName]/Resources/splash è inclusa una serie di schermate iniziali di Cordova predefinite.

Le dimensioni necessarie sono:

  • 320px x 480px + 2x
  • 768 px x 1024 px + 2x (iPad verticale)
  • 1024 px x 768 px + 2x (iPad orizzontale)
  • 640px x 1146px

Le immagini della schermata iniziale non sono attualmente modificate da cca.

Passaggio 5: pubblica

Nella directory platforms del tuo progetto sono presenti due progetti nativi completi: uno per Android e uno per iOS. Puoi creare versioni di release di questi progetti e pubblicarle su Google Play o nell'App Store per iOS.

Pubblica sul Play Store

Per pubblicare la tua applicazione Android sul Play Store:

  1. Aggiorna i due ID versione di Android, quindi esegui cca prepare:

    • android:versionName viene impostato utilizzando la chiave version in www/manifest.json (imposta anche la versione dell'app in pacchetto desktop).
    • android:versionCode impostato utilizzando la chiave versionCode in www/manifest.mobile.js.

  2. Modifica (o crea) platforms/android/ant.properties e imposta le proprietà key.store e key.alias (come spiegato nella documentazione per gli sviluppatori Android).

  3. Crea il tuo progetto:

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

  4. Cerca il file .apk firmato all'interno di platforms/android/ant-build/.

  5. Carica l'applicazione firmata in Google Play Developer Console.

Pubblica nell'App Store iOS

  1. Aggiorna la versione dell'app impostando la chiave CFBundleVersion in www/manifest.mobile.js, quindi esegui cca prepare.

  2. Apri il file di progetto Xcode trovato nella directory platforms/ios:

    open platform/ios/*.xcodeproj

  3. Segui la Guida alla distribuzione di app di Apple.

Considerazioni speciali

Se non hai mai utilizzato le app di Chrome, il problema principale è che alcune funzionalità web sono disattivate. Tuttavia, molti di questi sistemi funzionano attualmente all'interno di Cordova.

Un'app di Chrome potrebbe non funzionare subito sui dispositivi mobili. Alcuni problemi comuni relativi al trasferimento su dispositivo mobile:

  • Problemi di layout con schermi piccoli, soprattutto con orientamento verticale.
    • Correzione suggerita:utilizza le query supporti CSS per ottimizzare i contenuti per gli schermi più piccoli.
  • Le dimensioni delle finestre dell'app di Chrome impostate tramite chrome.app.window verranno ignorate e verranno utilizzate le dimensioni native del dispositivo.
    • Correzione suggerita:rimuovi le dimensioni delle finestre hardcoded e progetta la tua app pensando a dimensioni diverse.
  • Sarà difficile toccare con un dito i pulsanti e i link piccoli.
    • Correzione suggerita:regola i touch target in modo che siano di almeno 44 x 44 punti.
  • Comportamento imprevisto quando si utilizza il passaggio del mouse, che non esiste sui touchscreen.
    • Correzione suggerita: oltre al passaggio del mouse, attiva al tocco elementi UI come menu a discesa e descrizioni comando.
  • Un ritardo tocco di 300 ms.

API di Chrome supportate

Abbiamo reso disponibili molte delle API di Chrome principali per le app di Chrome per dispositivi mobili, tra cui:

  • identity: accedi agli utenti tramite OAuth2
  • payments: vendi beni virtuali all'interno della tua app mobile
  • pushMessaging: consente di eseguire il push dei messaggi alla tua app dal tuo server
  • socket: invia e ricevi dati sulla rete utilizzando TCP e UDP
  • notifications (solo Android): invia notifiche avanzate dalla tua app mobile
  • storage: archivia e recupera i dati delle coppie chiave-valore localmente
  • syncFileSystem: per archiviare e recuperare i file supportati da Google Drive
  • sveglie: esegui attività periodicamente
  • inattivo: rileva quando lo stato di inattività della macchina cambia.
  • alimentazione: sostituisce le funzioni di gestione dell'alimentazione del sistema

Tuttavia, non tutte le API Chrome JavaScript sono implementate. E non tutte le funzionalità di Chrome Desktop sono disponibili sui dispositivi mobili:

  • nessun tag <webview>
  • nessun IndexedDB
  • non getUserMedia()
  • senza NaCl

Puoi monitorare l'avanzamento nella pagina Stato API.

Strumento per sviluppatori di app di Chrome

ADT (Chrome Apps Developer Tool) per Android è un'app Android autonoma che consente di scaricare ed eseguire un'app di Chrome senza configurare la Toolchain di sviluppo come descritto sopra. Utilizza Chrome ADT quando vuoi visualizzare rapidamente l'anteprima di un'app Chrome esistente (già pacchettizzata come .crx) sul tuo dispositivo Android.

Chrome ADT per Android è attualmente in versione pre-alpha. Per provarlo, visualizza le note di rilascio di ChromeADT.apk per le istruzioni di installazione e utilizzo.