Voer Chrome-apps uit op mobiel met Apache Cordova

De toolchain voor het uitvoeren van Chrome-apps op mobiele apparaten bevindt zich in een vroege preview voor ontwikkelaars. Geef ons gerust uw feedback via de GitHub issue tracker , ons Chrome Apps-ontwikkelaarsforum , op Stack Overflow of onze G+ Developers-pagina .

Een Chrome-app die zowel op desktop als mobiel draait

Overzicht

U kunt uw Chrome-apps op Android en iOS uitvoeren via een toolchain gebaseerd op Apache Cordova , een open source raamwerk voor mobiele ontwikkeling voor het bouwen van mobiele apps met native mogelijkheden met behulp van HTML, CSS en JavaScript.

Apache Cordova omhult de webcode van uw applicatie met een native applicatieshell en stelt u in staat uw hybride webapp te distribueren via Google Play en/of de Apple App Store. Om Apache Cordova met een bestaande Chrome-app te gebruiken, gebruikt u het opdrachtregelprogramma cca ( c ordova c hrome a pp).

Aanvullende bronnen

  • Er zijn een paar speciale overwegingen waarmee u rekening moet houden bij het ontwikkelen met Cordova; we hebben ze vermeld in het gedeelte Overwegingen .
  • Bezoek de API-statuspagina om te zien welke Chrome API's op mobiel worden ondersteund.
  • Als u een voorbeeld van uw Chrome-app wilt bekijken op een Android-apparaat zonder de toolchain, gebruikt u de Chrome Apps Developer Tool (ADT) .

Laten we beginnen.

Stap 1: Installeer uw ontwikkelhulpmiddelen

De Chrome Apps voor mobiele toolchain kan zich richten op iOS 6+ en Android 4.x+.

Ontwikkelingsafhankelijkheden voor alle platforms

  • Node.js versie 0.10.0 (of hoger) met npm is vereist:

    • Windows : Installeer Node.js met behulp van de uitvoerbare installatiebestanden die u kunt downloaden van nodejs.org .
    • OS X of Linux : uitvoerbare installatiebestanden zijn ook beschikbaar op nodejs.org . Als je de noodzaak van root-toegang wilt vermijden, kan het handiger zijn om via nvm te installeren. Voorbeeld: 
    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

Gericht op Android

Wanneer u een applicatie voor Android ontwikkelt, moet u ook het volgende installeren:

  • Java JDK 7 (of hoger)
  • Android SDK- versie 4.4.2 (of hoger)
    • Installeer de Android SDK en Android Developer Tools die bij de Android ADT-bundel worden geleverd.
    • Voeg sdk/tools en sdk/platform-tools toe aan uw PATH- omgevingsvariabele.
    • OS X : De versie van Eclipse die bij de Android SDK wordt geleverd, vereist JRE 6. Als u bij het openen van Eclipse.app niet wordt gevraagd JRE 6 te installeren, downloadt u deze via de Mac App Store.
    • Linux : De Android SDK vereist 32-bits ondersteuningsbibliotheken. Op Ubuntu kun je deze verkrijgen via: apt-get install ia32-libs .
  • Apache-mier
    • Voeg apache-ant-xxx/bin toe aan uw PATH- omgevingsvariabele.

iOS targeten

Houd er rekening mee dat iOS-ontwikkeling alleen kan worden uitgevoerd op OS X. Daarnaast moet u het volgende installeren:

  • Xcode 5 (of hoger) met de Xcode-opdrachtregelhulpmiddelen
  • ios-deploy (vereist voor implementatie op een iOS-apparaat)
    • npm install -g ios-deploy
  • ios-sim (nodig om te implementeren in iOS Simulator)
    • npm install -g ios-sim
  • Optioneel: Registreer u als iOS-ontwikkelaar
    • Dit is nodig voor het testen op echte apparaten en voor het indienen bij de app store.
    • U kunt de registratie overslaan als u alleen de iPhone/iPad-simulators wilt gebruiken.

Installeer het cca -opdrachtregelprogramma

Installeer cca via npm:

npm install -g cca

Om de toolchain later bij te werken met nieuwe releases: npm update -g cca .

Bevestig dat alles correct is geïnstalleerd door deze opdracht uit te voeren vanaf de opdrachtregel:

cca checkenv

U zult het versienummer van cca zien verschijnen en een bevestiging over uw Android- of iOS SDK-installatie.

Stap 2: Maak een project aan

Ga als volgt te werk om een ​​standaard mobiel Chrome App-project te maken in een map met de naam YourApp :

cca create YourApp

Als u al een Chrome-app heeft gebouwd en deze naar een mobiel platform wilt overbrengen, kunt u de vlag --link-to gebruiken om er een symbolische link naar te maken:

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

Als u in plaats daarvan uw bestaande Chrome App-bestanden wilt kopiëren , kunt u de vlag --copy-from gebruiken:

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

Heeft u nog geen eigen Chrome-app? Probeer een van de vele voorbeelden van Chrome-apps met mobiele ondersteuning .

Stap 3: Ontwikkelen

U kunt uw applicatie op twee manieren bouwen en uitvoeren:

  • Optie A: Vanaf de opdrachtregel, met behulp van de cca tool, of
  • Optie B: Door een IDE te gebruiken, zoals Eclipse of Xcode. Het gebruik van een IDE is volledig optioneel (maar vaak nuttig) om te helpen bij het starten, configureren en debuggen van uw hybride mobiele applicatie.

Optie A: Ontwikkelen en bouwen via de opdrachtregel

Vanuit de hoofdmap van uw door cca gegenereerde projectmap:

Android

  • Om uw app op de Android-emulator uit te voeren: cca emulate android
    • Opmerking: hiervoor is het nodig dat u een emulator hebt ingesteld. U kunt android avd gebruiken om dit in te stellen. Download extra emulatorafbeeldingen door android uit te voeren. Om de Intel-images sneller te laten werken, installeert u Intel's HAXM .
  • Om uw app op een aangesloten Android-apparaat uit te voeren: cca run android

iOS

  • Om uw app op de iOS Simulator uit te voeren: cca emulate ios
  • Om uw app uit te voeren op een aangesloten iOS-apparaat: cca run ios
    • Opmerking: hiervoor is vereist dat u een inrichtingsprofiel voor uw apparaat heeft ingesteld.

Optie B: Ontwikkelen en bouwen met behulp van een IDE

Android

  1. Selecteer in Eclipse File -> Import .
  2. Kies Android > Existing Android Code Into Workspace .
  3. Importeer vanuit het pad dat u zojuist hebt gemaakt met cca .
    • Je zou verwachten dat je twee projecten moet importeren, waarvan er één *-CordovaLib is.
  4. Klik op de knop Afspelen om uw app uit te voeren.
    • U moet een Run-configuratie maken (zoals bij alle Java-applicaties). Meestal wordt u hier de eerste keer automatisch om gevraagd.
    • U zult de eerste keer ook uw apparaten/emulators moeten beheren.

iOS

  1. Open het project in Xcode door het volgende in een terminalvenster te typen:

    cd YourApp
open platforms/ios/*.xcodeproj

  2. Zorg ervoor dat u het juiste doelwit opbouwt.

    Linksboven (naast de knoppen Uitvoeren en Stoppen) bevindt zich een vervolgkeuzelijst waarmee u het doelproject en het apparaat kunt selecteren. Zorg ervoor dat YourApp is geselecteerd en niet CordovaLib .

  3. Klik op de knop Afspelen.

Wijzigingen aanbrengen in de broncode van uw app

Uw HTML-, CSS- en JavaScript-bestanden bevinden zich in de www directory van uw cca-projectmap.

Belangrijk : nadat u wijzigingen heeft aangebracht in www/ , moet u cca prepare uitvoeren voordat u uw toepassing implementeert. Als u cca build , cca run of cca emulate uitvoert vanaf de opdrachtregel, wordt de voorbereidingsstap automatisch uitgevoerd. Als u ontwikkelt met Eclipse/XCode, moet u cca prepare handmatig uitvoeren.

Foutopsporing

U kunt fouten in uw Chrome-app op mobiele apparaten op dezelfde manier opsporen als in Cordova-applicaties .

Stap 4: Volgende stappen

Nu u een werkende mobiele Chrome-app heeft, zijn er veel manieren om de ervaring op mobiele apparaten te verbeteren.

Mobiel Manifest

Er zijn bepaalde Chrome App-instellingen die alleen van toepassing zijn op mobiele platforms. We hebben een www/manifest.mobile.json -bestand gemaakt om deze te bevatten, en er wordt verwezen naar de specifieke waarden in de plug-indocumentatie en deze handleiding.

U moet de waarden hier dienovereenkomstig aanpassen.

Pictogrammen

Mobiele apps hebben een paar meer pictogramresoluties nodig dan desktop-Chrome-apps.

Voor Android zijn deze formaten nodig:

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

Voor iOS-apps verschillen de vereiste grootten, afhankelijk van of u iOS 6 versus iOS 7 ondersteunt. Het minimaal vereiste aantal pictogrammen is:

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

Een volledige lijst met pictogrammen zou er als volgt uitzien in uw manifest.json -bestand:

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

Elke keer dat u cca prepare uitvoert, worden de pictogrammen naar de juiste plaatsen voor elk platform gekopieerd.

Splash-schermen

Apps op iOS tonen een kort opstartscherm terwijl de app wordt geladen. Een reeks standaard Cordova-opstartschermen is opgenomen in platforms/ios/[AppName]/Resources/splash .

De benodigde maten zijn:

  • 320px x 480px + 2x
  • 768px x 1024px + 2x (iPad staand)
  • 1024px x 768px + 2x (iPad liggend)
  • 640px x 1146px

Opstartschermafbeeldingen worden momenteel niet gewijzigd door cca .

Stap 5: Publiceren

In platforms van uw project vindt u twee volledige native projecten: één voor Android en één voor iOS. U kunt releaseversies van deze projecten bouwen en deze publiceren op Google Play of in de iOS App Store.

Publiceer in de Play Store

Om uw Android-applicatie te publiceren in de Play Store:

  1. Update de twee Android-versie-ID's en voer vervolgens cca prepare uit:

    • android:versionName wordt ingesteld met behulp van de version in www/manifest.json (hiermee wordt ook de versie van uw op de desktop verpakte app ingesteld).
    • android:versionCode wordt ingesteld met behulp van de versionCode sleutel in www/manifest.mobile.js .

  2. Bewerk (of maak) platforms/android/ant.properties en stel de eigenschappen key.store en key.alias in (zoals uitgelegd in de Android-ontwikkelaarsdocumentatie ).

  3. Bouw uw project:

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

  4. Vind uw ondertekende .apk in platforms/android/ant-build/ .

  5. Upload uw ondertekende aanvraag naar de Google Play-ontwikkelaarsconsole .

Publiceer in de iOS App Store

  1. Update de app-versie door de CFBundleVersion -sleutel in te stellen in www/manifest.mobile.js en voer vervolgens cca prepare uit.

  2. Open het Xcode-projectbestand in uw platforms/ios -map:

    open platforms/ios/*.xcodeproj

  3. Volg de appdistributiegids van Apple.

Speciale overwegingen

Als u nog niet bekend bent met Chrome Apps, is het grootste probleem dat sommige webfuncties zijn uitgeschakeld . Verschillende hiervan werken momenteel echter binnen Cordova.

Een Chrome-app werkt mogelijk niet standaard op mobiel. Enkele veelvoorkomende problemen bij het porten naar mobiel:

  • Lay-outproblemen met kleine schermen, vooral in staande richting.
    • Voorgestelde oplossing: gebruik CSS-mediaquery's om uw inhoud te optimaliseren voor kleinere schermen.
  • Venstergroottes van de Chrome-app die zijn ingesteld via chrome.app.window worden genegeerd, maar in plaats daarvan worden de oorspronkelijke afmetingen van het apparaat gebruikt.
    • Voorgestelde oplossing: hardgecodeerde raamafmetingen verwijderen; ontwerp uw app met verschillende formaten in gedachten.
  • Kleine knoppen en koppelingen zijn moeilijk te tikken met een vinger.
    • Voorgestelde oplossing: Pas uw aanraakdoelen aan zodat deze minimaal 44 x 44 punten zijn.
  • Onverwacht gedrag bij het vertrouwen op muisbewegingen, wat niet voorkomt op aanraakschermen.
    • Voorgestelde oplossing: activeer naast het zweven ook UI-elementen zoals vervolgkeuzelijsten en tooltips door er op te tikken.
  • Een tikvertraging van 300 ms.

Ondersteunde Chrome API's

We hebben veel van de belangrijkste Chrome-API's beschikbaar gemaakt voor Chrome Apps for Mobile, waaronder:

  • identiteit : gebruikers aanmelden met OAuth2
  • betalingen - verkoop virtuele goederen binnen uw mobiele app
  • pushMessaging - push berichten naar uw app vanaf uw server
  • sockets - verzend en ontvang gegevens via het netwerk met behulp van TCP en UDP
  • meldingen (alleen Android) - stuur uitgebreide meldingen vanaf uw mobiele app
  • opslag - sleutelwaardegegevens lokaal opslaan en ophalen
  • syncFileSystem - bewaar en haal bestanden op die worden ondersteund door Google Drive
  • alarmen - voer taken periodiek uit
  • inactief - detecteer wanneer de inactieve status van de machine verandert
  • energie - negeer de energiebeheerfuncties van het systeem

Niet alle Chrome JavaScript API's zijn echter geïmplementeerd. En niet alle Chrome Desktop-functies zijn beschikbaar op mobiel:

  • geen <webview> -tag
  • geen geïndexeerde DB
  • geen getUserMedia()
  • geen NaCl

U kunt de voortgang volgen op onze API- statuspagina.

Chrome Apps-ontwikkelaarstool

De Chrome Apps Developer Tool (ADT) voor Android is een zelfstandige Android-app waarmee u een Chrome-app kunt downloaden en uitvoeren zonder de ontwikkeltoolketen in te stellen zoals hierboven beschreven. Gebruik de Chrome ADT als u snel een voorbeeld van een bestaande Chrome-app (al verpakt als .crx) op uw Android-apparaat wilt bekijken.

De Chrome ADT voor Android bevindt zich momenteel in een pre-alpha-release. Om het uit te proberen, bekijkt u de release-opmerkingen van ChromeADT.apk voor installatie- en gebruiksinstructies.