Uruchamianie aplikacji Chrome na urządzeniach mobilnych przy użyciu Apache Cordova

Łańcuch narzędzi do uruchamiania Aplikacji Chrome na urządzeniach mobilnych jest dostępny we wczesnej wersji przedpremierowej dla programistów. Swoje opinie możesz przesłać za pomocą śledzika problemów w GitHub, na forum dla deweloperów aplikacji Chrome, na Stack Overflow lub na stronie dla deweloperów w Google+.

Aplikacja Chrome działająca na komputerze i urządzeniu mobilnym

Omówienie

Aplikacje w Chrome możesz uruchamiać na Androidzie i iOS za pomocą zestawu narzędzi opartego na Apache Cordova, czyli oprogramowaniu do tworzenia aplikacji mobilnych z natywnymi funkcjami, które wykorzystuje HTML, CSS i JavaScript.

Apache Cordova otacza kod internetowy aplikacji natywnym interfejsem aplikacji i umożliwia rozpowszechnianie hybrydowej aplikacji internetowej w Google Play lub Apple App Store. Aby używać Apache Cordova z dotychczasową aplikacją Chrome, użyj narzędzia wiersza poleceń cca (c ordova c hrome a pp).

Dodatkowe materiały

Możemy zaczynać.

Krok 1. Zainstaluj narzędzia programistyczne

Łańcuch narzędzi aplikacji Chrome na urządzenia mobilne może być kierowany na systemy iOS 6+ i Android 4.x+.

Zależności programistyczne dla wszystkich platform

  • Wymagane jest środowisko Node.js w wersji 0.10.0 (lub nowszej) z pakietem npm:

    • Windows: zainstaluj Node.js za pomocą instalacyjnych plików wykonywalnych dostępnych do pobrania ze strony nodejs.org.
    • OS X lub Linux: pliki wykonywalne do instalacji są też dostępne na stronie nodejs.org. Jeśli chcesz uniknąć konieczności uzyskania dostępu roota, wygodniej może być zainstalowanie nvm. Przykład:
    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

Kierowanie na Androida

Podczas tworzenia aplikacji na Androida musisz też zainstalować:

  • Java JDK 7 (lub nowsza wersja)
  • Pakiet SDK Androida w wersji 4.4.2 (lub nowszej)
    • Zainstaluj pakiet Android SDK i Android Developer Tools, które są dostępne w pakiecie Android ADT.
    • Dodaj sdk/tools i sdk/platform-tools do zmiennej środowiskowej PATH.
    • OS X: wersja Eclipse dołączony do Android SDK wymaga środowiska JRE 6. Jeśli po otwarciu Eclipse.app nie wyświetli się prośba o zainstalowanie środowiska JRE 6, pobierz je z Mac App Store.
    • Linux pakiet SDK Androida wymaga 32-bitowych bibliotek pomocniczych. W Ubuntu możesz je pobrać z tej strony: apt-get install ia32-libs.
  • Apache Ant

Kierowanie na iOS

Pamiętaj, że programowanie na iOS jest możliwe tylko w systemie OS X. Dodatkowo musisz zainstalować:

  • Xcode 5 (lub nowszy), który zawiera narzędzia wiersza poleceń Xcode;
  • ios-deploy (wymagany do wdrożenia na urządzeniu z iOS)
    • npm install -g ios-deploy
  • ios-sim (wymagany do wdrożenia do symulatora iOS)
    • npm install -g ios-sim
  • Opcjonalnie: zarejestruj się jako deweloper iOS.
    • Jest to konieczne do testowania na rzeczywistych urządzeniach i przesłaniania aplikacji do sklepu.
    • Jeśli planujesz korzystać tylko z symulatorów iPhone’a lub iPada, możesz pominąć rejestrację.

Instalowanie narzędzia wiersza poleceń cca

Zainstaluj cca przy użyciu npm:

npm install -g cca

Aby później zaktualizować narzędzia do tworzenia aplikacji o nowe wersje: npm update -g cca.

Aby sprawdzić, czy wszystko zostało zainstalowane prawidłowo, uruchom to polecenie w wierszu poleceń:

cca checkenv

Wyświetli się numer wersji cca i potwierdzenie instalacji pakietu SDK na Androida lub iOS.

Krok 2. Utwórz projekt

Aby utworzyć domyślny projekt aplikacji mobilnej Chrome w katalogu o nazwie YourApp, uruchom:

cca create YourApp

Jeśli masz już utworzoną aplikację Chrome i chcesz ją przenieść na platformę mobilną, możesz użyć flagi --link-to, aby utworzyć do niej symlink:

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

Jeśli chcesz skopiować istniejące pliki aplikacji Chrome, możesz użyć flagi --copy-from:

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

Nie masz jeszcze aplikacji Chrome? Wypróbuj jedną z wielu przykładowych aplikacji Chrome z obsługą urządzeń mobilnych.

Krok 3. Opracuj

Aplikację możesz skompilować i uruchomić na 2 sposoby:

  • Opcja A: w wierszu poleceń za pomocą narzędzia cca lub
  • Opcja B: za pomocą środowiska IDE, takiego jak Eclipse lub Xcode. Użycie środowiska IDE jest całkowicie opcjonalne (ale często przydatne) i ma na celu ułatwienie uruchamiania, konfigurowania i debugowania hybrydowej aplikacji mobilnej.

Opcja A. Tworzenie i kompilowanie za pomocą wiersza poleceń

W głównym folderze wygenerowanego projektu cca:

Android

  • Aby uruchomić aplikację przy użyciu emulatora Androida: cca emulate android
    • Uwaga: to rozwiązanie wymaga skonfigurowania emulatora. Aby skonfigurować tę funkcję, uruchom android avd. Pobierz dodatkowe obrazy emulatora, uruchamiając android. Aby obrazy Intela działały szybciej, zainstaluj HAXM firmy Intel.
  • Aby uruchomić aplikację na połączonym urządzeniu z Androidem: cca run android

iOS

  • Aby uruchomić aplikację w symulatorze iOS: cca emulate ios
  • Aby uruchomić aplikację na połączonym urządzeniu z iOS: cca run ios

Opcja B. Tworzenie i kompilowanie za pomocą środowiska IDE

Android

  1. W Eclipse kliknij File -> Import.
  2. Wybierz Android > Existing Android Code Into Workspace.
  3. Importuj z ścieżki utworzonej przed chwilą za pomocą cca.
    • Należy zaimportować 2 projekty, z których jeden to *-CordovaLib.
  4. Kliknij przycisk Odtwórz, aby uruchomić aplikację.
    • Musisz utworzyć konfigurację uruchomienia (tak jak w przypadku wszystkich aplikacji w Javie). Zwykle pojawi się automatycznie prośba o pierwsze zalogowanie.
    • Na początku musisz też zarządzać swoimi urządzeniami/emulatorami.

iOS

  1. Otwórz projekt w Xcode, wpisując w oknie terminala:

    cd YourApp
open platforms/ios/*.xcodeproj

  2. Upewnij się, że tworzysz odpowiedni element docelowy.

    W lewym górnym rogu (obok przycisków Uruchom i Zatrzymaj) znajduje się menu, w którym można wybrać docelowy projekt i urządzenie. Upewnij się, że wybrana jest wartość YourApp, a nie CordovaLib.

  3. Kliknij przycisk Odtwórz.

Wprowadzanie zmian w kodzie źródłowym aplikacji

Pliki HTML, CSS i JavaScript znajdują się w katalogu www w folderze projektu CCA.

Ważne: po wprowadzeniu zmian w www/ przed wdrożeniem aplikacji należy uruchomić cca prepare. Jeśli używasz polecenia cca build, cca run lub cca emulate w wierszu poleceń, etap przygotowania zostanie wykonany automatycznie. Jeśli pracujesz w Eclipse lub XCode, musisz ręcznie uruchomićcca prepare.

Debugowanie

Aplikację Chrome na urządzeniu mobilnym możesz debugować w taki sam sposób jak aplikacje Cordova.

Krok 4. Dalsze kroki

Gdy masz już działającą aplikację mobilną Chrome, możesz na wiele sposobów zwiększyć wygodę korzystania z niej na urządzeniach mobilnych.

Plik manifestu na urządzenia mobilne

Niektóre ustawienia aplikacji Chrome są dostępne tylko na platformach mobilnych. Utworzyliśmy plik www/manifest.mobile.json, który zawiera te wartości. Odwołania do konkretnych wartości znajdują się w dokumentacji wtyczki i w tym przewodniku.

W tym miejscu należy odpowiednio dostosować wartości.

Ikony

Aplikacje mobilne wymagają kilku dodatkowych rozdzielczości ikon niż aplikacje Chrome na komputery.

W przypadku Androida potrzebne są te rozmiary:

  • 36 pikseli, 48 pikseli, 78 pikseli, 96 pikseli

W przypadku aplikacji na iOS wymagane rozmiary różnią się w zależności od tego, czy obsługujesz iOS 6 czy iOS 7. Minimalna wymagana liczba ikon:

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

Pełna lista ikon w pliku manifest.json będzie wyglądać tak:

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

Za każdym razem, gdy uruchomisz cca prepare, ikony zostaną skopiowane do odpowiednich miejsc na każdej platformie.

Ekrany powitalne

Aplikacje na iOS wyświetlają krótki ekran powitalny podczas wczytywania. W platforms/ios/[AppName]/Resources/splash znajduje się zestaw domyślnych ekranów powitalnych Cordova.

Potrzebne rozmiary:

  • 320 x 480 piks. + 2 x
  • 768 x 1024 pikseli + 2x (iPad w orientacji pionowej)
  • 1024 x 768 pikseli + 2x (iPad w orientacji poziomej)
  • 640 pikseli x 1146 pikseli

Obrazy ekranu powitalnego nie są obecnie modyfikowane przez aplikację cca.

Krok 5. Opublikuj

W katalogu platforms projektu masz 2 kompletne projekty natywne: jeden na Androida, a drugi na iOS. Możesz tworzyć wersje tych projektów przeznaczone do publikacji i publikować je w Google Play lub App Store.

Publikowanie w Sklepie Play

Aby opublikować aplikację na Androida w Sklepie Play:

  1. Zaktualizuj 2 identyfikatory wersji Androida, a potem uruchom zapytanie cca prepare:

    • Wartość android:versionName jest ustawiana za pomocą klucza version w pliku www/manifest.json (to ustawienie dotyczy też wersji aplikacji na komputer).
    • Wartość android:versionCode jest ustawiana za pomocą klucza versionCode w komponencie www/manifest.mobile.js.

  2. Edytuj (lub utwórz) platforms/android/ant.properties oraz ustaw właściwości key.store i key.alias (zgodnie z instrukcjami w dokumentacji dla deweloperów aplikacji na Androida).

  3. Kompilowanie projektu:

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

  4. Znajdź podpisany plik .apk w folderze platforms/android/ant-build/.

  5. Prześlij podpisaną aplikację do Konsoli Google Play.

Publikowanie w App Store na iOS

  1. Zaktualizuj wersję aplikacji, ustawiając klucz CFBundleVersion w www/manifest.mobile.js, a następnie uruchom cca prepare.

  2. Otwórz plik projektu Xcode znajdujący się w katalogu platforms/ios:

    open platforms/ios/*.xcodeproj

  3. Postępuj zgodnie z przewodnikiem Apple dotyczącym rozpowszechniania aplikacji.

Uwagi specjalne

Jeśli dopiero zaczynasz korzystać z aplikacji Chrome, musisz wiedzieć, że niektóre funkcje internetowe są wyłączone. Jednak wiele z nich działa obecnie w Cordova.

Aplikacja Chrome może nie działać od razu na urządzeniach mobilnych. Oto kilka typowych problemów z przeniesieniem na urządzenia mobilne:

  • problemy z układem na małych ekranach, zwłaszcza w orientacji pionowej;
  • Rozmiary okien aplikacji Chrome ustawione za pomocą chrome.app.window zostaną zignorowane, a zamiast nich zostaną użyte domyślne wymiary urządzenia.
    • Proponowane rozwiązanie: usuń wpisane na stałe wymiary okna. Zaprojektuj aplikację, pamiętając o różnych rozmiarach.
  • Małe przyciski i linki będą trudne do kliknięcia palcem.
    • Proponowane rozwiązanie: dostosuj docelowe elementy dotykowe, aby miały co najmniej 44 x 44 punkty.
  • Nieoczekiwane działanie podczas korzystania z kursora myszy, które nie występuje na ekranach dotykowych.
    • Proponowane rozwiązanie: oprócz najechania kursorem aktywuj elementy interfejsu, takie jak menu rozwijane i etykiety, po dotknięciu.
  • Opóźnienie dotknięcia o 300 ms.

Obsługiwane interfejsy API Chrome

Udostępniliśmy wiele podstawowych interfejsów API Chrome aplikacjom mobilnym Chrome, w tym:

  • identity – logowanie użytkowników przy użyciu OAuth2.
  • płatności – sprzedaż wirtualnych towarów w aplikacji mobilnej.
  • pushMessaging – wiadomości push z Twojego serwera do aplikacji.
  • sockets – wysyłanie i odbieranie danych przez sieć za pomocą protokołów TCP i UDP.
  • powiadomienia (tylko w Androidzie) – wysyłanie powiadomień z aplikacji mobilnej;
  • storage – przechowywanie i pobieranie danych par klucz-wartość lokalnie
  • syncFileSystem – przechowywanie i pobieranie plików z Dysku Google.
  • alarmy – okresowe wykonywanie zadań;
  • bezczynność – wykrywanie zmian stanu bezczynności urządzenia;
  • power – zastąp funkcje zarządzania energią stosowane w systemie

Jednak nie wszystkie interfejsy API JavaScript w Chrome zostały zaimplementowane. Nie wszystkie funkcje Chrome na komputery są dostępne na urządzeniach mobilnych:

  • brak tagu <webview>
  • brak IndexedDB
  • brak getUserMedia()
  • bez NaCl

Postęp możesz śledzić na stronie Stan interfejsu API.

Narzędzia dla deweloperów aplikacji w Chrome

Narzędzie deweloperskie do aplikacji Chrome (ADT) na Androida to samodzielna aplikacja na Androida, która umożliwia pobieranie i uruchamianie aplikacji Chrome bez konfigurowania łańcucha narzędzi programistycznych w sposób opisany powyżej. Chrome ADT pozwala szybko wyświetlić podgląd istniejącej aplikacji Chrome (już spakowanej jako plik .crx) na urządzeniu z Androidem.

Chrome ADT na Androida jest obecnie w wersji przedalfa. Aby wypróbować tę funkcję, zapoznaj się z informacjami o wersji ChromeADT.apk, w których znajdziesz instrukcje instalacji i korzystania.