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. Geben Sie Sie können uns Ihr Feedback über den GitHub-Issue Tracker, unser Chrome-Apps-Entwicklerforum, unter Stack Overflow oder unsere G+ Entwicklerseite.

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 basierend auf Apache ausführen. Cordova, ein Open-Source-Framework für mobile Entwicklung zum Erstellen mobiler Apps mit nativen mit HTML, CSS und JavaScript.

Apache Cordova umschließt den Webcode Ihrer Anwendung mit einer nativen Anwendungs-Shell und ermöglicht Ihnen, Ihre Hybrid-Web-App über Google Play und/oder den Apple App Store zu vertreiben. So verwenden Sie Apache Cordova mit einer vorhandenen Chrome-App verwenden Sie die Befehlszeile cca (c ordova c hrome a pp) .

Zusätzliche Ressourcen

  • Bei der Entwicklung mit Cordova gibt es ein paar besondere Überlegungen: finden Sie diese im Abschnitt Überlegungen.
  • Auf der Seite API-Status sehen Sie, welche Chrome APIs auf Mobilgeräten unterstützt werden.
  • Wenn Sie sich eine Vorschau Ihrer Chrome-App auf einem Android-Gerät ohne Toolchain ansehen möchten, verwenden Sie die Chrome-Apps Entwicklertools.

Legen wir los!

Schritt 1: Entwicklertools installieren

Die Toolchain für Chrome-Apps für Mobilgeräte kann auf iOS 6 und höher und Android 4.x oder 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 Dateien, die für die Installation heruntergeladen werden können von nodejs.org.
    • OS X oder Linux: Ausführbare Installationsversionen sind auch auf nodejs.org verfügbar. Wenn Sie 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

Auf Android ausgerichtet

Wenn Sie eine App 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 <ph type="x-smartling-placeholder">
      </ph>
    • 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 zur Umgebungsvariablen PATH hinzu.
    • OS X: Die im Android SDK enthaltene Version von Eclipse erfordert JRE 6. Bei Öffnen Eclipse.app fordert Sie nicht zur Installation von JRE 6 auf. Laden Sie es über den Mac App Store herunter.
    • Linux: Für das Android SDK sind 32-Bit-Supportbibliotheken erforderlich. Unter Ubuntu erhalten Sie diese über: apt-get install ia32-libs
  • Apache Ant <ph type="x-smartling-placeholder">

Auf iOS ausgerichtet

Hinweis: Die iOS-Entwicklung kann nur unter OS X durchgeführt werden. 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) <ph type="x-smartling-placeholder">
      </ph>
    • npm install -g ios-deploy
  • ios-sim (für iOS-Simulator erforderlich) <ph type="x-smartling-placeholder">
      </ph>
    • npm install -g ios-sim
  • Optional: Als iOS-Entwickler registrieren <ph type="x-smartling-placeholder">
      </ph>
    • 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 den folgenden Befehl über die Befehlszeile ausführen:

cca checkenv

Du siehst die ausgegebene Versionsnummer von cca und eine Bestätigung zu deinem Android- oder iOS-SDK Installation.

Schritt 2: Projekt erstellen

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

cca create YourApp

Wenn Sie bereits eine Chrome-App erstellt haben und diese auf eine mobile Plattform übertragen möchten, können Sie die --link-to, um einen symlink darauf zu 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 für Mobilgeräte aus. Support.

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 völlig optional (aber diese oft nützlich sind, um Sie beim Starten, Konfigurieren und Debuggen Ihrer hybriden mobilen Anwendung zu unterstützen.

Option A: Entwickeln und Erstellen über die Befehlszeile

Gehen Sie im Stammverzeichnis des von cca generierten Projektordners so vor:

Android

  • So führen Sie Ihre App im Android-Emulator aus: cca emulate android <ph type="x-smartling-placeholder">
      </ph>
    • Hinweis: Hierfür müssen Sie einen Emulator eingerichtet haben. Zum Einrichten können Sie android avd ausführen. Laden Sie mit android zusätzliche Emulator-Images herunter. Damit die Intel-Images schneller ausgeführt werden, 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 <ph type="x-smartling-placeholder">

Option B: Entwickeln und erstellen mit einer IDE

Android

  1. Wählen Sie in Eclipse File -> Import.
  2. Wählen Sie Android aus > Existing Android Code Into Workspace.
  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 Wiedergabeschaltfläche, um Ihre App auszuführen. <ph type="x-smartling-placeholder">
      </ph>
    • Wie bei allen Java-Anwendungen müssen Sie eine Ausführungskonfiguration erstellen. Normalerweise erhältst du automatisch dazu aufgefordert.
    • Außerdem müssen Sie Ihre Geräte/Emulatoren beim ersten Mal verwalten.

iOS

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

    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ü zur Auswahl des Zielprojekts . Achten Sie darauf, dass YourApp und nicht CordovaLib ausgewählt ist.

  3. Klicken Sie auf die Schaltfläche Wiedergabe.

Änderungen am Quellcode Ihrer Anwendung vornehmen

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

Wichtig: Nachdem Sie Änderungen an www/ vorgenommen haben, müssen Sie cca prepare ausführen, bevor Sie Ihr . Wenn Sie cca build, cca run oder cca emulate über die Befehlszeile ausführen, gibt der erfolgt die Vorbereitung automatisch. Bei der Entwicklung mit Eclipse/XCode müssen Sie Folgendes ausführen: cca prepare manuell.

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 Nutzerfreundlichkeit Ihrer Mobilgeräten.

Manifest für Mobilgeräte

Es gibt bestimmte Einstellungen für Chrome-Apps, die nur für mobile Plattformen gelten. Wir haben eine www/manifest.mobile.json-Datei, die diese enthält, und die spezifischen Werte werden durchgehend referenziert der Plug-in-Dokumentation und in diesem Handbuch.

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 für iOS-Apps variieren, je nachdem, ob Sie iOS 6 oder iOS 7 unterstützen. Die Mindestanzahl der erforderlichen Symbole ist:

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

Eine vollständige Symbolliste würde in Ihrer manifest.json-Datei wie folgt 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 an die entsprechenden Stellen für jede Plattform kopiert. cca prepare

Ladebildschirme

Bei iOS-Apps wird beim Laden ein kurzer Ladebildschirm angezeigt. Standardspritzer von Cordova Bildschirme sind in platforms/ios/[AppName]/Resources/splash enthalten.

Die erforderlichen Größen sind:

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

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 eine für iOS. Sie können Release-Versionen dieser Projekte erstellen und sie bei Google Play oder auf iOS App Store herunterladen.

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. Dadurch wird der Version Ihrer gepackten Desktop-App ebenfalls verfügbar.
    • android:versionCode wird mit dem Schlüssel versionCode in www/manifest.mobile.js festgelegt.

  2. platforms/android/ant.properties bearbeiten (oder erstellen) und key.store und key.alias festlegen in der Android-Entwicklerdokumentation beschrieben.

  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. Aktualisiere die App-Version, indem du den Schlüssel „CFBundleVersion“ in www/manifest.mobile.js festlegst und dann führen Sie cca prepare aus.

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

    öffne die Plattformen/ios/*.xcodeproj.

  3. Folgen Sie dem Apple-Leitfaden für die App-Bereitstellung.

Besondere Überlegungen

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

Auf Mobilgeräten funktioniert eine Chrome-App möglicherweise nicht standardmäßig. Einige häufig auftretende Probleme bei der Mitnahme auf ein Mobilgerät:

  • Layoutprobleme auf kleinen Bildschirmen, insbesondere im Hochformat.
    • Empfohlene Problembehebung:Verwenden Sie CSS-Medienabfragen, um Ihre Inhalte für kleinere Bildschirme zu optimieren.
  • Die über chrome.app.window festgelegte Größe des Chrome App-Fensters wird ignoriert. Verwenden Sie stattdessen die nativen Abmessungen des Geräts.
    • Empfohlene Korrektur: Entfernen Sie hartcodierte Fensterabmessungen. Ihre App mit verschiedenen Größen in denken.
  • Kleine Schaltflächen und Links lassen sich nur schwer mit dem Finger antippen.
    • Empfohlene Korrektur:Passen Sie die Berührungszielbereiche auf mindestens 44 × 44 Punkte an.
  • Unerwartetes Verhalten bei Verwendung des Mauszeigers, das auf Touchscreens nicht vorhanden ist.
    • Vorgeschlagene Korrektur:Aktivieren Sie zusätzlich zum Bewegen des Mauszeigers auch UI-Elemente wie Drop-down-Menüs und Kurzinfos auf antippen.
  • Eine Tippverzögerung von 300 ms.

Unterstützte Chrome APIs

Wir haben viele der wichtigsten Chrome APIs für Chrome Apps for 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 mit TCP und UDP über das Netzwerk senden und empfangen
  • notifications (nur Android): umfassende Benachrichtigungen von Ihrer mobilen App senden
  • storage – Daten zu Schlüssel/Wert-Paaren lokal speichern und abrufen
  • syncFileSystem – Speichern und Abrufen von Dateien, die in Google Drive gesichert sind
  • alarms – Aufgaben regelmäßig ausführen
  • idle: Erkennt, wenn sich der Leerstand des Computers ändert.
  • power: Energiesparfunktionen 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 Sie können eine Chrome-App herunterladen und ausführen, ohne die Entwicklungs-Toolchain wie oben beschrieben einzurichten. Verwenden Sie das Chrome ADT, wenn Sie eine vorhandene Chrome-App (bereits als CRX-Paket verpackt) schnell in der Vorschau anzeigen möchten auf deinem Android-Gerät.

Chrome ADT für Android ist derzeit in der Vorab-Alpha-Version. Sehen Sie sich zum Ausprobieren Versionshinweise zu ChromeADT.apk finden Sie unter "ChromeADT.apk".