Chrome-Apps mit Apache Cordova auf Mobilgeräten ausführen

Die Toolchain zum Ausführen von Chrome-Apps auf Mobilgeräten befindet sich in der frühen Entwicklervorschau. Sie können uns über den GitHub Issue Tracker, unser Chrome Apps-Entwicklerforum, Stack Overflow oder unsere Google+ Entwicklerseite gern Feedback geben.

Überblick

Sie können Ihre Chrome-Apps auf Android und iOS über eine Toolchain ausführen, die auf Apache Cordova basiert. Dieses Open-Source-Framework für die Mobilgeräteentwicklung ermöglicht das Erstellen mobiler Apps mit nativen Funktionen mithilfe von HTML, CSS und JavaScript.

Apache Cordova umschließt den Webcode Ihrer Anwendung mit einer nativen Anwendungs-Shell und ermöglicht Ihnen, Ihre hybride Webanwendung über Google Play und/oder den Apple App Store zu verteilen. Wenn Sie Apache Cordova mit einer vorhandenen Chrome-App verwenden möchten, verwenden Sie das cca-Befehlszeilentool (c ordova c hrome a pp).

Weitere Ressourcen

• Bei der Entwicklung mit Cordova sind einige Besonderheiten zu beachten. Diese sind im Abschnitt zu Überlegungen aufgeführt.
• Auf der Seite API-Status sehen Sie, welche Chrome-APIs auf Mobilgeräten unterstützt werden.
• Wenn Sie eine Vorschau Ihrer Chrome-App auf einem Android-Gerät ohne Toolchain ansehen möchten, verwenden Sie das Chrome Apps Developer Tool (ADT).

Legen wir los!

Schritt 1: Entwicklungstools installieren

Die Toolchain für Chrome-Apps für Mobilgeräte kann auf iOS 6 und höher und Android 4.x und höher ausgerichtet sein.

Entwicklungsabhängigkeiten für alle Plattformen

• Node.js Version 0.10.0 (oder höher) mit npm ist erforderlich:

  • Windows: Installieren Sie Node.js mit den ausführbaren Installationsdateien, die von nodejs.org heruntergeladen werden können.
  • OS X oder Linux: Ausführbare Installationsdateien sind auch über nodejs.org verfügbar. Wenn Sie keinen Root-Zugriff mehr benötigen, können Sie die Installation über nvm vornehmen. Beispiel:

  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
  

Auf Android ausgerichtet

Bei der Entwicklung einer App für Android müssen Sie außerdem Folgendes installieren:

• Java JDK 7 (oder höher)
• Android SDK 4.4.2 (oder höher)
  • Installiere das Android SDK und die Android-Entwicklertools, die im Lieferumfang des Android ADT-Bundles enthalten sind.
  • Fügen Sie sdk/tools und sdk/platform-tools zu Ihrer PATH-Umgebungsvariablen hinzu.
  • OS X: Die im Android SDK enthaltene Version von Eclipse erfordert JRE 6. Wenn Sie beim Öffnen von Eclipse.app nicht aufgefordert werden, JRE 6 zu installieren, können Sie die App über den Mac App Store herunterladen.
  • Linux: Das Android SDK erfordert 32-Bit-Unterstützungsbibliotheken. Unter Ubuntu können Sie diese über apt-get install ia32-libs herunterladen.
• Apache Ant
  • Fügen Sie apache-ant-x.x.x/bin zu Ihrer PATH-Umgebungsvariablen hinzu.

Ausrichtung auf iOS

Beachten Sie, dass die iOS-Entwicklung nur unter OS X möglich ist. Außerdem muss Folgendes installiert werden:

• Xcode 5 (oder höher) mit den Xcode-Befehlszeilentools
• ios-deploy (erforderlich für die Bereitstellung auf einem iOS-Gerät)
  • npm install -g ios-deploy
• ios-sim (für die Bereitstellung im iOS-Simulator erforderlich)
  • npm install -g ios-sim
• Optional: Registrieren Sie sich als iOS-Entwickler.
  • Dies ist für Tests auf echten Geräten und für die Einreichung im App-Shop erforderlich.
  • Wenn Sie nur die iPhone-/iPad-Simulatoren verwenden möchten, können Sie die Registrierung überspringen.

cca-Befehlszeilentool installieren

Installieren Sie cca über npm:

npm install -g cca

So aktualisieren Sie die Toolchain später mit neuen Releases: npm update -g cca.

Prüfen Sie, ob alles korrekt installiert ist, indem Sie folgenden Befehl in der Befehlszeile ausführen:

cca checkenv

Sie sehen dann die Versionsnummer von cca und eine Bestätigung zur Installation des Android- oder iOS-SDK.

Schritt 2: Projekt erstellen

Führen Sie folgenden Befehl aus, um in einem Verzeichnis namens YourApp ein Chrome App-Standardprojekt für Mobilgeräte zu erstellen:

cca create YourApp

Wenn Sie bereits eine Chrome-App erstellt haben und sie auf eine mobile Plattform portieren möchten, können Sie mit dem Flag --link-to einen Symlink zu dieser App erstellen:

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

Wenn Sie stattdessen Ihre vorhandenen Chrome App-Dateien kopieren möchten, können Sie das Flag --copy-from verwenden:

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

Sie haben noch keine eigene Chrome-App? Probieren Sie eine der vielen Chrome-Beispiel-Apps mit mobiler Unterstützung aus.

Schritt 3: Entwickeln

Sie können Ihre Anwendung auf zwei Arten erstellen und ausführen:

• Option A: Über die Befehlszeile mit dem cca-Tool oder
• Option B: Mithilfe einer IDE wie Eclipse oder Xcode. Die Verwendung einer IDE ist vollständig optional (aber oft nützlich), um Sie beim Starten, Konfigurieren und Debuggen einer hybriden mobilen App zu unterstützen.

Option A: Entwicklung und Erstellung über die Befehlszeile

Aus dem Stammverzeichnis Ihres cca-generierten Projektordners:

Android

• So führen Sie Ihre App im Android-Emulator aus: cca emulate android
  • Hinweis: Hierfür müssen Sie einen Emulator einrichten. Zur Einrichtung können Sie android avd ausführen. Laden Sie mit android zusätzliche Emulator-Images herunter. Damit die Intel-Images schneller ausgeführt werden, müssen Sie HAXM von Intel installieren.
• So führen Sie Ihre App auf einem verbundenen Android-Gerät aus: cca run android

iOS

• So führen Sie Ihre App im iOS-Simulator aus: cca emulate ios
• So führen Sie Ihre App auf einem verbundenen iOS-Gerät aus: cca run ios
  • Hinweis: Hierfür müssen Sie ein Bereitstellungsprofil für Ihr Gerät einrichten.

Option B: Mit einer IDE entwickeln und erstellen

Android

1. Wählen Sie in Eclipse File -> Import aus.
2. Wählen Sie Android > Existing Android Code Into Workspace aus.
3. Importieren Sie sie aus dem Pfad, den Sie gerade mit cca erstellt haben.
   • Es sollten zwei Projekte zum Importieren vorhanden sein, von denen eines *-CordovaLib ist.
4. Klicken Sie auf die Wiedergabeschaltfläche, um die App auszuführen.
   • Wie bei allen Java-Anwendungen müssen Sie eine Ausführungskonfiguration erstellen. Sie werden normalerweise dazu automatisch zum ersten Mal aufgefordert.
   • Du musst auch deine Geräte/Emulatoren zum ersten Mal verwalten.

iOS

1. Öffnen Sie das Projekt in Xcode, indem Sie Folgendes in ein Terminalfenster eingeben:

   cd YourApp
   open platforms/ios/*.xcodeproj
   

2. Stellen Sie sicher, dass Sie das richtige Ziel erstellen.

   Oben links (neben den Schaltflächen „Run“ und „Stop“) befindet sich ein Drop-down-Menü, in dem Sie das Zielprojekt und das Zielgerät auswählen können. Achten Sie darauf, dass YourApp und nicht CordovaLib ausgewählt ist.

3. Klicken Sie auf die Schaltfläche Abspielen.

Änderungen am Quellcode der App vornehmen

Die HTML-, CSS- und JavaScript-Dateien befinden sich im Verzeichnis www Ihres CCA-Projektordners.

Wichtig: Nachdem Sie Änderungen an www/ vorgenommen haben, müssen Sie vor der Bereitstellung der Anwendung cca prepare ausführen. Wenn Sie cca build, cca run oder cca emulate über die Befehlszeile ausführen, wird der Vorbereitungsschritt automatisch ausgeführt. Wenn Sie für die Entwicklung Eclipse/XCode verwenden, müssen Sie cca prepare manuell ausführen.

Debugging

Sie können Fehler in Ihrer Chrome-App auf Mobilgeräten auf die gleiche Weise beheben wie Fehler in Cordova-Apps beheben.

Schritt 4: Nächste Schritte

Da Sie nun eine funktionierende mobile Chrome-App haben, gibt es viele Möglichkeiten, die Nutzererfahrung auf Mobilgeräten zu verbessern.

Mobile Manifest

Es gibt bestimmte Einstellungen für Chrome-Apps, die nur für mobile Plattformen gelten. Wir haben dafür eine www/manifest.mobile.json-Datei erstellt. Auf die spezifischen Werte wird in der Plug-in-Dokumentation und in dieser Anleitung verwiesen.

Sie sollten die Werte hier entsprechend anpassen.

Symbole

Mobile Apps benötigen etwas mehr Symbolauflösungen als Chrome-Apps für Desktop-Computer.

Für Android sind folgende Größen erforderlich:

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

Die erforderlichen Größen bei iOS-Apps variieren, je nachdem, ob Sie iOS 6 oder iOS 7 unterstützen. Die Mindestanzahl an Symbolen ist erforderlich:

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

Eine vollständige Symbolliste würde in Ihrer manifest.json-Datei so aussehen:

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

Die Symbole werden bei jeder Ausführung von cca prepare an die entsprechenden Stellen für jede Plattform kopiert.

Ladebildschirme

Apps auf iOS-Geräten zeigen einen kurzen Ladebildschirm an, während die App geladen wird. In platforms/ios/[AppName]/Resources/splash sind eine Reihe standardmäßiger Cordova-Ladebildschirme enthalten.

Folgende Größen werden benötigt:

• 320 x 480 px + 2x
• 768 × 1024 Pixel + 2-fach (iPad im Hochformat)
• 1024 × 768 Pixel + 2 × (iPad im Querformat)
• 640 x 1146 Pixel

Die Bilder auf dem Ladebildschirm werden derzeit nicht von cca geändert.

Schritt 5: Veröffentlichen

Im Verzeichnis platforms Ihres Projekts befinden sich zwei vollständige native Projekte: eines für Android und eines für iOS. Du kannst Releaseversionen dieser Projekte erstellen und bei Google Play oder im iOS App Store veröffentlichen.

Im Play Store veröffentlichen

So veröffentlichen Sie Ihre Android-App im Play Store:

1. Aktualisieren Sie die beiden Android-Versions-IDs und führen Sie dann cca prepare aus:

   • android:versionName wird mit dem version-Schlüssel in www/manifest.json festgelegt. Damit wird auch die Version der gepackten Desktopanwendung festgelegt.
   • android:versionCode wird mit dem Schlüssel versionCode in www/manifest.mobile.js festgelegt.

2. Bearbeiten (oder erstellen) Sie platforms/android/ant.properties und legen Sie die Attribute key.store und key.alias fest, wie in der Dokumentation für Android-Entwickler erläutert.

3. Erstellen Sie Ihr Projekt:

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

4. Deine signierte APK-Datei befindet sich in platforms/android/ant-build/.

5. Laden Sie Ihre signierte App in die Google Play Developer Console hoch.

Im iOS App Store veröffentlichen

1. Aktualisieren Sie die App-Version. Legen Sie dazu den Schlüssel CFBundleVersion in www/manifest.mobile.js fest und führen Sie dann cca prepare aus.

2. Öffnen Sie die Xcode-Projektdatei im Verzeichnis platforms/ios:

   openplatform/ios/*.xcodeproj

3. Folgen Sie der Anleitung im Leitfaden zur App-Bereitstellung von Apple.

Besondere Hinweise

Wenn Sie neu bei Chrome-Apps sind, ist das Problem, dass einige Webfunktionen deaktiviert sind. Einige davon funktionieren jedoch derzeit in Cordova.

Eine Chrome-App funktioniert auf Mobilgeräten möglicherweise nicht standardmäßig. Häufige Probleme bei der Mitnahme auf Mobilgeräte:

• Layoutprobleme bei kleinen Bildschirmen, insbesondere im Hochformat
  • Empfohlene Korrektur:Verwenden Sie CSS-Medienabfragen, um Ihre Inhalte für kleinere Bildschirme zu optimieren.
• Die über chrome.app.window festgelegten Fenstergrößen von Chrome-Apps werden ignoriert. Stattdessen werden die nativen Abmessungen des Geräts verwendet.
  • Empfohlene Korrektur:Entfernen Sie hartcodierte Fensterabmessungen. Achten Sie beim Entwerfen Ihrer App auf verschiedene Größen.
• Kleine Schaltflächen und Links lassen sich nur schwer mit dem Finger antippen.
  • Empfohlene Korrektur:Passen Sie Ihre Berührungszielbereiche so an, dass sie mindestens 44 x 44 Punkte haben.
• Unerwartetes Verhalten bei der Verwendung des Mauszeigers, das auf Touchscreens nicht vorhanden ist.
  • Empfohlene Korrektur:Zusätzlich zum Bewegen des Mauszeigers können Sie UI-Elemente wie Drop-down-Menüs und Kurzinfos beim Tippen aktivieren.
• Eine Verzögerung von 300 ms beim Antippen.
  • Empfohlene Korrektur:Verwenden Sie das JavaScript-Polyfill von FastClick von FT Labs.
  • Hintergrundinformationen finden Sie in diesem HTML5Rocks-Artikel.

Unterstützte Chrome APIs

Wir haben viele wichtige Chrome-APIs für Chrome Apps Mobile verfügbar gemacht, darunter:

• identity – Nutzer mit OAuth2 anmelden
• Zahlungen – virtuelle Waren in Ihrer mobilen App verkaufen
• pushMessaging – Push-Nachrichten von Ihrem Server an Ihre App
• Sockets – Daten über das Netzwerk mit TCP und UDP senden und empfangen
• Benachrichtigungen (nur Android): umfassende Benachrichtigungen von Ihrer mobilen App senden
• storage: Daten zu Schlüssel/Wert-Paaren lokal speichern und abrufen
• syncFileSystem: mit Google Drive gesicherte Dateien speichern und abrufen
• Alarme – Aufgaben regelmäßig ausführen
• idle – erkennt, wenn sich der Inaktivitätsstatus der Maschine ändert.
• power: Die Energieverwaltungsfunktionen des Systems überschreiben

Es sind jedoch nicht alle Chrome JavaScript APIs implementiert. Und nicht alle Chrome Desktop-Funktionen sind auf Mobilgeräten verfügbar:

• kein <webview>-Tag
• keine IndexedDB
• no getUserMedia()
• keine NaCl

Sie können den Fortschritt auf der Seite API-Status verfolgen.

Entwicklertools für Chrome-Apps

Das Chrome Apps Developer Tool (ADT) für Android ist eine eigenständige Android-App, mit der Sie eine Chrome-App herunterladen und ausführen können, ohne die Entwicklungs-Toolchain wie oben beschrieben einrichten zu müssen. Verwenden Sie Chrome ADT, wenn Sie schnell eine Vorschau einer vorhandenen Chrome-App (bereits als CRX-Datei verpackt) auf Ihrem Android-Gerät ansehen möchten.

Chrome ADT für Android ist derzeit als Vor-Alpha-Version verfügbar. In den Versionshinweisen zu ChromeADT.apk finden Sie eine Installations- und Nutzungsanleitung zum Testen.