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 Ihr Feedback über den GitHub-Issue-Tracker, unser Chrome Apps-Entwicklerforum, Stack Overflow oder unsere G+-Entwicklerseite senden.

Eine Chrome-App, die auf Computern und Mobilgeräten ausgeführt wird

Übersicht

Sie können Ihre Chrome-Apps unter Android und iOS über eine Toolchain ausführen, die auf Apache Cordova basiert. Das ist ein Open-Source-Framework für die mobile Entwicklung, mit dem mobile Apps mit nativen Funktionen mithilfe von HTML, CSS und JavaScript erstellt werden können.

Apache Cordova umhüllt 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 vertreiben. Wenn Sie Apache Cordova mit einer vorhandenen Chrome-App verwenden möchten, verwenden Sie das Befehlszeilentool cca (c ordova c hrome a pp).

Zusätzliche Ressourcen

  • Bei der Entwicklung mit Cordova sind einige Besonderheiten zu beachten. Sie finden sie im Abschnitt Hinweise.
  • 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 die 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 sowie Android 4.x und höher ausgerichtet werden.

Entwicklungsabhängigkeiten für alle Plattformen

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

    • Windows: Installieren Sie Node.js mithilfe der ausführbaren Installationsdateien, die Sie unter nodejs.org herunterladen können.
    • OS X oder Linux: Ausführbare Installationsversionen sind auch auf nodejs.org verfügbar. Wenn Sie keinen Root-Zugriff benötigen, ist es möglicherweise einfacher, die Installation über nvm durchzuführen. 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

Targeting auf Android-Geräte

Wenn Sie eine Anwendung für Android entwickeln, müssen Sie außerdem Folgendes installieren:

  • Java JDK 7 (oder höher)
  • Android SDK Version 4.4.2 (oder höher)
    • Installieren Sie das Android SDK und die Android-Entwicklertools, die im Android ADT-Bundle enthalten sind.
    • Fügen Sie sdk/tools und sdk/platform-tools Ihrer PATH-Umgebungsvariablen hinzu.
    • OS X: Für die mit dem Android SDK gelieferte Version von Eclipse ist JRE 6 erforderlich. Wenn Sie beim Öffnen von Eclipse.app nicht aufgefordert werden, JRE 6 zu installieren, laden Sie JRE 6 über den Mac App Store herunter.
    • Linux: Das Android SDK erfordert 32-Bit-Unterstützungsbibliotheken. Unter Ubuntu können Sie sie über apt-get install ia32-libs abrufen.
  • Apache Ant

Auf iOS ausgerichtet

Die iOS-Entwicklung ist nur unter OS X möglich. Außerdem müssen Sie Folgendes installieren:

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

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 richtig installiert ist, indem Sie diesen Befehl in der Befehlszeile ausführen:

cca checkenv

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

Schritt 2: Projekt erstellen

So erstellen Sie ein Standardprojekt für mobile Chrome-Apps in einem Verzeichnis mit dem Namen YourApp:

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 dazu erstellen:

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

Wenn Sie Ihre vorhandenen Chrome-App-Dateien stattdessen 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 Beispiel-Chrome-Apps mit mobilem Support aus.

Schritt 3: Entwickeln

Sie haben zwei Möglichkeiten, Ihre Anwendung zu erstellen und auszuführen:

  • Option A: Über die Befehlszeile mit dem Tool cca oder
  • Option B: Mit einer IDE wie Eclipse oder Xcode Die Verwendung einer IDE ist völlig optional, aber häufig nützlich, um Sie beim Starten, Konfigurieren und Debuggen Ihrer hybriden mobilen Anwendung zu unterstützen.

Option A: Entwicklung und Build über die Befehlszeile

Im Stammverzeichnis des von cca generierten Projektordners:

Android

  • So führen Sie Ihre App im Android-Emulator aus: cca emulate android
    • Hinweis: Dazu müssen Sie einen Emulator eingerichtet haben. Sie können android avd ausführen, um dies einzurichten. Laden Sie zusätzliche Emulator-Images herunter, indem Sie android ausführen. Wenn die Intel-Images schneller ausgeführt werden sollen, installieren Sie HAXM von Intel.
  • 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

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.
    • Sie sollten zwei Projekte importieren, von denen eines *-CordovaLib ist.
  4. Klicken Sie auf die Schaltfläche „Wiedergabe“, um die App auszuführen.
    • Wie bei allen Java-Anwendungen müssen Sie eine Ausführungskonfiguration erstellen. Normalerweise werden Sie beim ersten Mal automatisch dazu aufgefordert.
    • Sie müssen Ihre Geräte/Emulatoren auch zum ersten Mal verwalten.

iOS

  1. Öffnen Sie das Projekt in Xcode. Geben Sie dazu in ein Terminalfenster Folgendes ein:

    cd YourApp
open platforms/ios/*.xcodeproj

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

    Oben links (neben den Schaltflächen „Ausführen“ und „Beenden“) befindet sich ein Drop-down-Menü, über das 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 Wiedergabeschaltfläche.

Änderungen am Quellcode Ihrer App vornehmen

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

Wichtig: Nachdem Sie Änderungen an www/ vorgenommen haben, müssen Sie cca prepare ausführen, bevor Sie Ihre Anwendung bereitstellen. Wenn Sie cca build, cca run oder cca emulate über die Befehlszeile ausführen, erfolgt der Vorbereitungsschritt automatisch. Wenn Sie mit Eclipse/XCode entwickeln, müssen Sie cca prepare manuell ausführen.

Debugging

Die Fehlerbehebung für Ihre Chrome-App auf Mobilgeräten funktioniert genauso wie die für die Fehlerbehebung in Cordova-Apps.

Schritt 4: Nächste Schritte

Da Sie nun über eine funktionierende mobile Chrome-App verfügen, gibt es viele Möglichkeiten, die Erfahrung auf Mobilgeräten zu verbessern.

Mobiles Manifest

Bestimmte Chrome App-Einstellungen gelten nur für mobile Plattformen. Wir haben eine www/manifest.mobile.json-Datei erstellt, die diese enthält. Auf die jeweiligen Werte wird in der Plugin-Dokumentation und in diesem Leitfaden verwiesen.

Passen Sie die Werte hier entsprechend an.

Symbole

Für mobile Apps sind einige mehr Symbolauflösungen erforderlich als für Chrome-Desktop-Apps.

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

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

Die erforderlichen Größen für iOS-Apps variieren, je nachdem, ob Sie iOS 6 oder iOS 7 unterstützen. Die Mindestanzahl der Symbole ist:

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

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 jedes Mal, wenn Sie cca prepare ausführen, an die entsprechenden Stellen für jede Plattform kopiert.

Ladebildschirme

Bei iOS-Apps wird beim Laden der App ein kurzer Ladebildschirm angezeigt. In platforms/ios/[AppName]/Resources/splash sind eine Reihe von Standard-Cordova-Startbildschirmen enthalten.

Folgende Größen sind erforderlich:

  • 320 × 480 Pixel + 2x
  • 768 × 1.024 Pixel + 2x (iPad im Hochformat)
  • 1.024 × 768 Pixel + 2x (iPad im Querformat)
  • 640 x 1.146 Pixel

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

Schritt 5: Veröffentlichen

Das Verzeichnis platforms Ihres Projekts enthält zwei vollständige native Projekte: eines für Android und eines für iOS. Sie können Release-Versionen 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 Schlüssel version in www/manifest.json festgelegt. Damit wird auch die Version Ihrer 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 Eigenschaften key.store und key.alias fest (wie in der Android-Entwicklerdokumentation erläutert).

  3. Projekt erstellen:

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

  4. Suchen Sie die signierte .apk-Datei in platforms/android/ant-build/.

  5. Laden Sie die signierte Anwendung in die Google Play Console hoch.

Im iOS App Store veröffentlichen

  1. Aktualisieren Sie die App-Version, indem Sie den Schlüssel CFBundleVersion in www/manifest.mobile.js festlegen und dann cca prepare ausführen.

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

    open platforms/ios/*.xcodeproj

  3. Folgen Sie dem App-Bereitstellungsleitfaden von Apple.

Besondere Hinweise

Wenn Sie neu bei Chrome-Apps sind, ist das größte Problem, dass einige Webfunktionen deaktiviert sind. Einige davon funktionieren jedoch bereits in Córdova.

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

  • Layoutprobleme auf kleinen Bildschirmen, insbesondere im Hochformat
    • Empfohlene Lösung:Verwenden Sie CSS-Medienabfragen, um Ihre Inhalte für kleinere Bildschirme zu optimieren.
  • Die über chrome.app.window festgelegten Fenstergrößen in Chrome-Apps werden ignoriert. Stattdessen werden die nativen Abmessungen des Geräts verwendet.
    • Empfohlene Lösung:Entfernen Sie die hartcodierten Fensterabmessungen und entwerfen Sie Ihre App mit Blick auf unterschiedliche Größen.
  • Kleine Schaltflächen und Links lassen sich nur schwer mit dem Finger antippen.
    • Empfohlene Lösung:Passen Sie die Berührungsziele so an, dass sie mindestens 44 × 44 Pixel groß sind.
  • Unerwartetes Verhalten bei Verwendung des Mauszeigers, der auf Touchscreens nicht vorhanden ist.
    • Vorgeschlagene Lösung:Aktivieren Sie UI-Elemente wie Drop-down-Menüs und Kurzinfos nicht nur durch Bewegen des Mauszeigers, sondern auch durch Tippen.
  • Eine Tippverzögerung von 300 ms.

Unterstützte Chrome APIs

Viele der wichtigsten Chrome APIs sind jetzt für Chrome-Apps für Mobilgeräte verfügbar, darunter:

  • identity: Nutzer über OAuth2 anmelden
  • payments: Sie können virtuelle Waren in Ihrer mobilen App verkaufen.
  • pushMessaging: Push-Nachrichten von Ihrem Server an Ihre App senden
  • Sockets: Senden und Empfangen von Daten über das Netzwerk mit TCP und UDP
  • notifications (nur Android): umfassende Benachrichtigungen von Ihrer mobilen App senden
  • storage: Speichert und ruft Schlüssel/Wert-Daten lokal ab
  • syncFileSystem: Speichern und Abrufen von Dateien, die mit Google Drive gesichert sind
  • Wecker: Aufgaben werden regelmäßig ausgeführt.
  • idle: Erkennt, wenn sich der Inaktivitätsstatus des Geräts ändert.
  • power: Überschreiben Sie die Energieverwaltungsfunktionen des Systems.

Es sind jedoch nicht alle Chrome JavaScript APIs implementiert. Außerdem sind nicht alle Funktionen von Chrome für Computer auf Mobilgeräten verfügbar:

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

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

Chrome Apps-Entwicklertool

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 einzurichten. Verwenden Sie die Chrome ADT, wenn Sie 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 in der Vorab-Alpha-Version. Eine Installations- und Nutzungsanleitung finden Sie in den Versionshinweisen für ChromeADT.apk.