Eseguire le app di Chrome sui dispositivi mobili utilizzando Apache Cordova

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

Un'app di Chrome in esecuzione su computer e dispositivi mobili

Panoramica

Puoi eseguire le tue app 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 di archiviazione utilizzando HTML, CSS e JavaScript.

Apache Cordova esegue il wrapping del codice web della tua applicazione con una shell dell'applicazione nativa 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, puoi utilizzare la riga di comando cca (c ordova c hrome a pp) lo strumento a riga di comando gcloud.

Risorse aggiuntive

Iniziamo.

Passaggio 1: installa gli strumenti di sviluppo

La toolchain 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 Node.js 0.10.0 (o successive) con npm:

    • Windows: installa Node.js utilizzando gli eseguibili di installazione scaricabili da nodejs.org.
    • OS X o Linux: gli eseguibili dell'installazione sono disponibili anche su nodejs.org. Se se non è necessario l'accesso root, può essere più conveniente eseguire l'installazione 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 di Android

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

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

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

Verranno visualizzati il numero di versione di cca e la conferma dell'SDK per Android o iOS. dell'installazione.

Passaggio 2: crea un progetto

Per creare un progetto predefinito dell'app di Chrome per dispositivi mobili 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 la --link-to per creare un link simbolico:

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

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

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

Non hai ancora una tua app di Chrome? Prova una delle tante app di Chrome di esempio per dispositivi mobili assistenza.

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: tramite un IDE, come Eclipse o Xcode. L'uso di un IDE è del tutto facoltativo (ma spesso utili) per aiutarti ad avviare, configurare e eseguire il debug della tua applicazione mobile ibrida.

Opzione A: sviluppo e creazione tramite riga di comando

Dalla directory principale della cartella di progetto generata con cca:

Android

  • Per eseguire l'app sull'emulatore Android: cca emulate android
    • Nota: per farlo, devi aver configurato un emulatore. Puoi eseguire android avd per configurarlo. Per scaricare altre immagini dell'emulatore, esegui android. Per velocizzare l'esecuzione delle informazioni, 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: sviluppa e crea utilizzando un IDE

Android

  1. In Eclissi, seleziona File -> Import.
  2. Scegli Android > Existing Android Code Into Workspace.
  3. Esegui l'importazione 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 in tutte le applicazioni Java). Ottieni di solito viene richiesto automaticamente la prima volta.
    • Dovrai gestire anche i 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 di destinazione e dispositivo. Assicurati che sia selezionata l'opzione YourApp e non CordovaLib.

  3. Fai clic sul pulsante Riproduci.

Modifiche al codice sorgente dell'app

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

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

Debug

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

Passaggio 4. Passaggi successivi

Ora che hai un'app Chrome per dispositivi mobili funzionante, hai a disposizione molti modi per migliorare l'esperienza sul dispositivi mobili.

Manifest per dispositivi mobili

Esistono alcune impostazioni dell'app Chrome che si applicano solo alle piattaforme mobile. Abbiamo creato un file www/manifest.mobile.json che contenga queste informazioni, a cui viene fatto riferimento in ogni parte la documentazione del plug-in e questa guida.

Devi modificare i valori in questo campo di conseguenza.

Icone

Le app mobile richiedono una risoluzione delle icone in più rispetto alle app di Chrome desktop.

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 richiesto è:

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

Un elenco completo di icone sarebbe simile al seguente 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. Un insieme di contenuti iniziali predefiniti per Cordova schermate sono incluse in platforms/ios/[AppName]/Resources/splash.

Le dimensioni richieste sono:

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

Al momento cca non modifica le immagini della schermata iniziale.

Passaggio 5: pubblica

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

Pubblica sul Play Store

Per pubblicare la tua app Android sul Play Store:

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

    • Il campo android:versionName viene impostato utilizzando la chiave version in www/manifest.json (viene impostata la dell'app desktop in pacchetto).
    • La colonna android:versionCode è stata impostata usando la chiave versionCode in www/manifest.mobile.js.

  2. Modifica (o crea) platforms/android/ant.properties e imposta 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 che si trova all'interno di platforms/android/ant-build/.

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

Pubblica sull'App Store per iOS

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

  2. Apri il file di progetto Xcode che si trova nella directory platforms/ios:

    piattaforme aperte/ios/*.xcodeproj

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

Considerazioni speciali

Se non hai mai utilizzato le app di Chrome, la cosa più importante è che alcune funzionalità web sono disattivate. Tuttavia, molti di questi servizi attualmente funzionano a Córdova.

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 delle finestre dell'app di Chrome impostate tramite chrome.app.window verranno ignorate e verranno invece utilizzate il parametro dimensioni native del dispositivo.
    • Correzione suggerita:rimuovi le dimensioni della finestra hardcoded. progetta la tua app con dimensioni diverse mente.
  • Sarà difficile toccare con un dito pulsanti e link piccoli.
    • Correzione suggerita:regola i touch target in modo che siano almeno 44 x 44 punti.
  • Comportamento imprevisto quando si utilizza il passaggio del mouse, che non esiste sui touch screen.
    • Correzione suggerita:oltre al passaggio del mouse, attiva anche elementi UI come menu a discesa e descrizioni comando. tocca.
  • Un ritardo di tocco di 300 ms.

API di Chrome supportate

Abbiamo messo a disposizione delle app di Chrome per dispositivi mobili molte delle principali API di Chrome, tra cui:

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

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

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

Puoi monitorare l'avanzamento nella pagina Stato API.

Strumento per sviluppatori di app di Chrome

Lo Strumento per sviluppatori di app di Chrome (ADT) per Android è un'app Android autonoma che ti consente di: scaricare ed eseguire un'app di Chrome senza configurare la toolchain di sviluppo come descritto sopra. Utilizza le funzionalità di 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 una versione pre-alpha. Per provare, consulta la Note di rilascio di ChromeADT.apk per istruzioni di installazione e utilizzo.