Eseguire le app di Chrome sui dispositivi mobili utilizzando Apache Cordova

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

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

Panoramica

Puoi eseguire le 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 avvolge il codice web dell'applicazione con una shell dell'applicazione nativa e ti consente di distribuire l'app web ibrida tramite Google Play e/o l'App Store di Apple. Per utilizzare Apache Cordova con un'app di Chrome esistente, usa lo strumento a riga di comando cca (c ordova c hrome a pp).

Risorse aggiuntive

Iniziamo.

Passaggio 1: installa gli strumenti di sviluppo

La toolchain di Chrome Apps per il mobile 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 Node.js 0.10.0 (o successive) con npm:

    • Windows: installa Node.js utilizzando i file eseguibili di installazione scaricabili da nodejs.org.
    • OS X o Linux: gli eseguibili di installazione sono disponibili anche su nodejs.org. Se vuoi evitare la necessità di accedere come utente root, potrebbe essere più pratico installare Node.js 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 per Android

Quando sviluppi un'applicazione per Android, dovrai anche installare:

  • Java JDK 7 (o versioni successive)
  • SDK per Android versione 4.4.2 (o successive)
    • Installa l'SDK Android e gli Android Developer Tools forniti in bundle 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 l'apertura di Eclipse.app non ti chiede di installare JRE 6, scaricalo tramite il Mac App Store.
    • Linux: l'SDK Android richiede librerie di supporto a 32 bit. Su Ubuntu, ottienili tramite: apt-get install ia32-libs.
  • Apache Ant

Targeting per iOS

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

  • Xcode 5 (o versioni successive) che include gli strumenti a riga di comando di Xcode
  • ios-deploy (necessario per il deployment su un dispositivo iOS)
    • npm install -g ios-deploy
  • ios-sim (necessario per il deployment in Simulatore iOS)
    • npm install -g ios-sim
  • (Facoltativo) Registrati come sviluppatore iOS
    • Questo è necessario per i test su dispositivi reali e per l'invio all'app store.
    • Puoi saltare la registrazione se intendi 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 tutto sia installato correttamente eseguendo questo comando dalla riga di comando:

cca checkenv

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

Passaggio 2: crea un progetto

Per creare un progetto di app mobile Chrome predefinito in una directory denominata YourApp, esegui:

cca create YourApp

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

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

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

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

Non hai ancora la tua app Chrome? Prova una delle tante app di Chrome di esempio con supporto mobile.

Passaggio 3: sviluppa

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'utilizzo 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: sviluppo e creazione tramite riga di comando

Dalla cartella principale del progetto generato da cca:

Android

  • Per eseguire l'app nell'emulatore Android: cca emulate android
    • Nota: per farlo devi aver configurato un emulatore. Puoi eseguire android avd per configurare questa opzione. Per scaricare altre immagini dell'emulatore, esegui android. Per velocizzare l'esecuzione delle immagini intel, installa Intel's HAXM.
  • Per eseguire l'app su un dispositivo Android connesso: cca run android

iOS

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

Opzione B: sviluppo e compilazione utilizzando un IDE

Android

  1. In Eclipse, 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). In genere, la prima volta ti viene chiesto automaticamente di farlo.
    • Dovrai anche gestire i tuoi dispositivi/emulatori la prima volta.

iOS

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

    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 selezionata l'opzione YourApp e non CordovaLib.

  3. Fai clic sul pulsante Riproduci.

Apportare modifiche al codice sorgente dell'app

I 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 esegui lo sviluppo utilizzando Eclipse/XCode, devi eseguire manualmente cca prepare.

Debug

Puoi eseguire il debug dell'app Chrome su dispositivo mobile nello stesso modo in cui esegui il debug delle applicazioni Cordova.

Passaggio 4: passaggi successivi

Ora che hai un'app Chrome mobile 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 contenerli e i valori specifici sono richiamati nella documentazione del plug-in e in questa guida.

Dovresti modificare i valori di conseguenza.

Icone

Le app mobile richiedono alcune risoluzioni delle icone in più rispetto alle app Chrome per computer.

Per Android, sono necessarie le seguenti dimensioni:

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

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

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

Un elenco completo di icone avrà il seguente aspetto nel file 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"
}

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. In platforms/ios/[AppName]/Resources/splash è incluso un insieme di schermate di benvenuto Cordova predefinite.

Le dimensioni necessarie sono:

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

Al momento le immagini della schermata iniziale non vengono modificate da cca.

Passaggio 5: pubblica

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

Pubblicare 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 (viene impostata anche la versione dell'app pacchettizzata per computer).
    • android:versionCode viene 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. Esegui la compilazione del progetto:

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

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

  5. Carica l'applicazione firmata nella Google Play Console.

Pubblicazione sull'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 che si trova nella directory platforms/ios:

    apri platforms/ios/*.xcodeproj

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

Considerazioni speciali

Se non hai mai utilizzato le app di Chrome, tieni presente che alcune funzionalità web sono disattivate. Tuttavia, molti di questi attualmente funzionano in Cordova.

Un'app di Chrome potrebbe non funzionare subito sui dispositivi mobili. Alcuni problemi comuni con il trasferimento su dispositivi mobili:

  • Problemi di layout con schermi piccoli, soprattutto in un orientamento verticale.
    • Correzione suggerita:utilizza le query multimediali CSS per ottimizzare i tuoi contenuti per gli schermi più piccoli.
  • Le dimensioni della finestra dell'app Chrome impostate tramite chrome.app.window verranno ignorate e verranno utilizzate le dimensioni native del dispositivo.
    • Correzione suggerita: rimuovi le dimensioni predefinite della finestra e progetta la tua app tenendo conto di dimensioni diverse.
  • I pulsanti e i link di piccole dimensioni saranno difficili da toccare con un dito.
    • Correzione suggerita:regola i touch target in modo che siano almeno 44 x 44 punti.
  • Comportamento imprevisto quando si fa affidamento sul passaggio del mouse, che non esiste sui touchscreen.
    • Correzione suggerita:oltre al passaggio del mouse, attiva gli elementi dell'interfaccia utente come i menu a discesa e le descrizioni comando al tocco.
  • Un ritardo di tocco di 300 ms.

API di Chrome supportate

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

  • identity: consente agli utenti di accedere utilizzando OAuth2
  • payments: vendi prodotti virtuali all'interno della tua app mobile
  • pushMessaging: esegui il push dei messaggi nella tua app dal tuo server
  • sockets: invia e ricevi dati sulla rete utilizzando TCP e UDP
  • notifications (solo Android): invia notifiche avanzate dall'app mobile.
  • storage: archivia e recupera i dati chiave-valore localmente
  • syncFileSystem: archivia e recupera i file supportati da Google Drive
  • sveglie: esegui attività periodicamente
  • idle: rileva quando cambia lo stato di inattività della macchina
  • power: ignora le funzionalità di gestione dell'alimentazione del sistema

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

  • Nessun tag <webview>
  • nessun IndexedDB
  • Nessun getUserMedia()
  • no NaCl

Puoi monitorare l'avanzamento dalla pagina Stato API.

Strumento per sviluppatori di app di Chrome

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

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