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 we wczesnej wersji przedpremierowej dla programistów. Jeśli chcesz podzielić się z nami swoją opinią, skorzystaj z narzędzia do śledzenia błędów w GitHub, na naszym forum dla deweloperów aplikacji Chrome, na Stack Overflow lub na stronie dla deweloperów w Google+.

Aplikacja Chrome działająca zarówno na komputerze, jak i na urządzeniu mobilnym.

Opis

Aplikacje Chrome na Androida i iOS możesz uruchamiać za pomocą łańcucha narzędzi opartego na ApacheCordova – platformie open source do tworzenia aplikacji mobilnych, która umożliwia tworzenie aplikacji mobilnych z natywnymi możliwościami przy użyciu języka HTML, CSS i JavaScript.

Apache Cordova pakuje kod internetowy aplikacji w natywną powłokę aplikacji i umożliwia rozpowszechnianie hybrydowej aplikacji internetowej w Google Play lub Apple App Store. Aby użyć Apache Cordova w dotychczasowej aplikacji Chrome, użyj narzędzia wiersza poleceń cca (c ordova c hrome a pp).

Dodatkowe zasoby

Możemy zaczynać.

Krok 1. Zainstaluj narzędzia dla programistów

Łańcuch narzędzi aplikacji Chrome na urządzenia mobilne może być kierowany na iOS w wersji 6 lub nowszej oraz Androida w wersji 4.x lub nowszej.

Zależności programistyczne dla wszystkich platform

  • Wymagana jest aplikacja Node.js w wersji 0.10.0 (lub nowszej) z interfejsem npm:

    • Windows: zainstaluj Node.js za pomocą plików wykonywalnych dostępnych do pobrania ze strony nodejs.org.
    • OS X lub Linux: pliki wykonywalne instalacyjne są też dostępne na stronie nodejs.org. Jeśli nie chcesz, aby dostęp do roota był potrzebny, wygodniej jest zainstalować aplikację za pomocą 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 nowsze)
  • pakiet SDK na Androida w wersji 4.4.2 (lub nowszej),
    • Zainstaluj pakiet Android SDK i narzędzia Android Developer Tools dołączone do pakietu Android ADT.
    • Dodaj sdk/tools i sdk/platform-tools do zmiennej środowiskowej PATH.
    • OS X: wersja Eclipse z pakietem Android SDK wymaga środowiska JRE 6. Jeśli po otwarciu Eclipse.app nie wyświetli monitu o zainstalowanie środowiska JRE 6, pobierz go z Mac App Store.
    • Linux: pakiet Android SDK wymaga 32-bitowych bibliotek pomocniczych. W Ubuntu możesz je pobrać z tych plików: apt-get install ia32-libs.
  • Apache Ant

Kierowanie na iOS

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

  • Xcode 5 (lub nowsza wersja) zawierająca narzędzia wiersza poleceń Xcode.
  • ios-deploy (konieczne do wdrożenia na urządzeniu z iOS)
    • npm install -g ios-deploy
  • ios-sim (konieczne do wdrożenia w symulatorze iOS)
    • npm install -g ios-sim
  • Opcjonalnie: zarejestruj się jako deweloper aplikacji na iOS
    • Jest to niezbędne do testowania na prawdziwych urządzeniach i przesyłania ich do sklepu z aplikacjami.
    • Jeśli chcesz korzystać tylko z symulatorów iPhone'a/iPada, możesz pominąć rejestrację.

Zainstaluj narzędzie wiersza poleceń cca

Zainstaluj cca za pomocą npm:

npm install -g cca

Aby zaktualizować łańcuch narzędzi później o nowe wersje: npm update -g cca.

Sprawdź, czy wszystko zostało prawidłowo zainstalowane, uruchamiając to polecenie z wiersza poleceń:

cca checkenv

Zobaczysz numer wersji pakietu cca oraz 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 utworzyć do niej dowiązanie symboliczne za pomocą flagi --link-to:

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

Jeśli zamiast tego 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 własnej aplikacji Chrome? Wypróbuj jedną z wielu przykładowych aplikacji Chrome obsługujących urządzenia mobilne.

Krok 3: Programowanie

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

  • opcja A: z poziomu wiersza poleceń, za pomocą narzędzia cca lub
  • Opcja B: za pomocą IDE, takiego jak Eclipse lub Xcode. Korzystanie z IDE jest całkowicie opcjonalne (ale często przydatne), aby ułatwić uruchamianie, konfigurowanie i debugowanie hybrydowej aplikacji mobilnej.

Opcja A. Programowanie i tworzenie z użyciem wiersza poleceń

W katalogu głównym folderu projektu wygenerowanego przez cca:

Android

  • Aby uruchomić aplikację za pomocą emulatora Androida: cca emulate android
    • Uwaga: musisz skonfigurować emulator. Aby to skonfigurować, możesz uruchomić android avd. Dodatkowe obrazy emulatora możesz pobrać, uruchamiając polecenie android. Aby obrazy mogły działać szybciej, zainstaluj procesor HAXM platformy 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. Programowanie i kompilowanie przy użyciu IDE

Android

  1. W Eclipse wybierz File -> Import.
  2. Wybierz Android > Existing Android Code Into Workspace.
  3. Importuj ze ścieżki utworzonej przed chwilą w usłudze cca.
    • Do zaimportowania będziesz mieć 2 projekty, w tym 1 *-CordovaLib.
  4. Kliknij przycisk Odtwórz, aby uruchomić aplikację.
    • Należy utworzyć konfigurację uruchamiania (tak jak w przypadku wszystkich aplikacji Java). zwykle prośba o weryfikację jest wyświetlana automatycznie.
    • Za pierwszym razem musisz też zarządzać 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 właściwy cel.

    W lewym górnym rogu (obok przycisków Uruchom i Zatrzymaj) znajduje się menu pozwalające wybrać projekt docelowy i urządzenie. Upewnij się, że wybrana jest opcja 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 folderu projektu DCA.

Ważne: po wprowadzeniu zmian w aplikacji www/ musisz uruchomić cca prepare przed wdrożeniem aplikacji. Jeśli uruchamiasz cca build, cca run lub cca emulate z poziomu wiersza poleceń, krok przygotowawczy jest wykonywany automatycznie. Jeśli tworzysz z wykorzystaniem Eclipse/XCode, cca prepare musisz uruchomić ręcznie.

Debugowanie

Aplikację Chrome możesz debugować na urządzeniu mobilnym tak samo jak aplikacje Cordova.

Krok 4. Dalsze kroki

Teraz gdy masz działającą aplikację mobilną Chrome, możesz na wiele sposobów poprawić komfort korzystania z niej na urządzeniach mobilnych.

Manifest dla urządzeń mobilnych

Niektóre ustawienia aplikacji Chrome mają zastosowanie tylko do platform mobilnych. Utworzyliśmy plik www/manifest.mobile.json, który zawiera te wartości. Do konkretnych wartości odwołuje się dokumentacja wtyczki i ten przewodnik.

Tutaj należy odpowiednio dostosować wartości.

Ikony

Aplikacje mobilne potrzebują o kilka więcej 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 piks., 72 piks., 114 piks., 144 piks.
  • iOS 7: 72 piksele, 120 pikseli, 152 piksele

Pełna lista ikon w pliku manifest.json wyglądałaby 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"
}

Ikony będą kopiowane do odpowiednich miejsc na każdej platformie przy każdym uruchomieniu cca prepare.

Ekrany powitalne

W trakcie ładowania aplikacji na iOS wyświetla się krótki ekran powitalny. W aplikacji platforms/ios/[AppName]/Resources/splash znajduje się zestaw domyślnych ekranów powitalnych aplikacji Cordova.

Wymagane rozmiary:

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

Obrazy ekranu powitalnego nie są obecnie modyfikowane przez użytkownika cca.

Krok 5. Opublikuj

W katalogu platforms projektu masz 2 pełne projekty natywne: jeden dla Androida i jeden dla iOS. Możesz tworzyć wersje robocze tych projektów i publikować je w Google Play lub sklepie App Store na urządzenia z iOS.

Opublikuj w Sklepie Play

Aby opublikować aplikację na Androida w Sklepie Play:

  1. Zaktualizuj 2 identyfikatory wersji Androida, a następnie uruchom cca prepare:

    • android:versionName jest ustawiany za pomocą klucza version w www/manifest.json (ustawia to również wersję aplikacji komputerowej).
    • Metoda android:versionCode jest ustawiana przy użyciu klucza versionCode w obiekcie www/manifest.mobile.js.

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

  3. Utwórz projekt:

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

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

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

Opublikuj w sklepie z aplikacjami 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:

    otwarte platformy/ios/*.xcodeproj

  3. Postępuj zgodnie z przewodnikiem Apple App Distribution (w języku angielskim).

Specjalne uwagi

Jeśli dopiero zaczynasz korzystać z aplikacji Chrome, głównym powodem jest to, że niektóre funkcje internetowe są wyłączone. Jednak kilka z nich działa obecnie w Kordowie.

Aplikacja Chrome może nie działać od razu na urządzeniu mobilnym. Oto kilka częstych problemów z przenoszeniem numerów na urządzenia mobilne:

  • Problemy z układem na małych ekranach, zwłaszcza w orientacji pionowej.
    • Proponowane rozwiązanie: używaj zapytań o media CSS, aby optymalizować treści pod kątem mniejszych ekranów.
  • Rozmiary okna aplikacji Chrome ustawione za pomocą parametru chrome.app.window będą ignorowane, a zamiast tego będą używane wymiary natywne urządzenia.
    • Rozwiązanie problemu: usuń zakodowane na stałe wymiary okien. Podczas projektowania aplikacji pamiętaj o różnych rozmiarach.
  • Małe przyciski i linki będzie trudno kliknąć palcem.
    • Proponowane rozwiązanie: zmień rozmiar docelowych obszarów kliknięcia na co najmniej 44 × 44 punkty.
  • Nieoczekiwane działanie w przypadku najechania myszą, które nie występuje na ekranach dotykowych.
    • Rozwiązanie problemu: oprócz najeżdżania kursorem aktywuj elementy interfejsu, takie jak menu czy etykietki po kliknięciu.
  • 300 ms opóźnienia kliknięcia.

Obsługiwane interfejsy API Chrome

W aplikacjach Chrome na komórki udostępniliśmy wiele podstawowych interfejsów API Chrome, między innymi:

  • identity – logowanie użytkowników przy użyciu protokołu OAuth2
  • płatności – sprzedawaj wirtualne towary w aplikacji mobilnej;
  • pushMessaging – wiadomości push do aplikacji z serwera
  • sockets – wysyłanie i odbieranie danych w sieci przy użyciu TCP i UDP
  • powiadomienia (tylko na Androidzie) – wysyłanie rozszerzonych powiadomień z aplikacji mobilnej;
  • storage – przechowywanie i pobieranie danych par klucz-wartość lokalnie
  • syncFileSystem – przechowuj i pobieraj pliki przechowywane na Dysku Google;
  • alarmy – okresowe uruchamianie zadań
  • bezczynność – wykrywanie zmian stanu bezczynności maszyny
  • power – zastępuje funkcje zarządzania energią systemu

Jednak nie wszystkie interfejsy API JavaScript Chrome są zaimplementowane. Na urządzeniach mobilnych nie wszystkie funkcje Chrome znajdziesz:

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

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

Narzędzie dla deweloperów aplikacji Chrome

Narzędzie Chrome Apps Developer Tool (ADT) na Androida to samodzielna aplikacja na Androida, która umożliwia pobranie i uruchomienie aplikacji Chrome bez konfigurowania łańcucha narzędzi dla programistów w sposób opisany powyżej. Użyj interfejsu Chrome ADT, jeśli chcesz szybko wyświetlić podgląd istniejącej aplikacji Chrome (już w pakiecie .crx) na urządzeniu z Androidem.

ADT Chrome na Androida jest obecnie w wersji przed alfa. Aby ją wypróbować, zapoznaj się z informacjami o wersji ChromeADT.apk, które zawierają instrukcje instalacji i użytkowania.