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

Pęk narzędzi do uruchamiania Aplikacji Chrome na urządzeniach mobilnych jest dostępny we wczesnej wersji przedpremierowej dla programistów. Możesz przekazać prześlij nam swoją opinię, korzystając z narzędzia GitHub do zgłaszania problemów, naszego forum dla programistów Aplikacji Chrome, na Stack Overflow lub stronę dla deweloperów w Google+.

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

Omówienie

Aplikacje Chrome na Androida i iOS możesz uruchamiać za pomocą łańcucha narzędzi opartego na Apache Cordova, platforma open source do tworzenia aplikacji mobilnych na potrzeby z użyciem języków HTML, CSS i JavaScript.

Apache Cordova umieszcza kod internetowy aplikacji w natywnej powłoce aplikacji i umożliwia dystrybuować hybrydową aplikację internetową w Google Play lub Apple App Store. Korzystanie z Apache Cordova jeśli masz już aplikację Chrome, użyj wiersza poleceń cca (c ordova c hrome a pp). .

Dodatkowe materiały

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 systemy iOS 6+ i Android 4.x+.

Zależności programistyczne dla wszystkich platform

  • Wymagany jest interfejs Node.js w wersji 0.10.0 (lub nowszej) z tagiem npm:

    • Windows: zainstaluj Node.js przy użyciu instalacyjnych plików wykonywalnych dostępnych do pobrania nodejs.org.
    • OS X lub Linux: pliki wykonywalne do instalacji są też dostępne ze strony nodejs.org. Jeśli nie potrzebujesz dostępu do roota, lepiej zainstalować tag 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 również zainstalować:

  • Java JDK 7 (lub nowsza wersja)
  • 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 dołączony do Android SDK wymaga środowiska JRE 6. Jeśli otwierasz Eclipse.app nie wyświetla monitu o zainstalowanie środowiska JRE 6. Pobierz je z Mac App Store.
    • Linux: pakiet Android SDK wymaga 32-bitowych bibliotek obsługi. W systemie Ubuntu pobierz je przez: 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 nowszą wersję), która zawiera narzędzia wiersza poleceń Xcode;
  • ios-deploy (konieczne do wdrożenia na urządzeniu z iOS)
    • npm install -g ios-deploy
  • ios-sim (konieczne wdrożenie do symulatora iOS)
    • npm install -g ios-sim
  • Opcjonalnie: zarejestruj się jako deweloper iOS
    • Jest to konieczne do testowania na prawdziwych urządzeniach oraz przy przesyłaniu aplikacji do sklepu z aplikacjami.
    • Jeśli zamierzasz 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ć łańcuch narzędzi o nowe wersje: npm update -g cca.

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

cca checkenv

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

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ż aplikację Chrome i chcesz ją przenieść na platformę mobilną, możesz użyć flagę --link-to, aby utworzyć do niej link symbolizujący:

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 na komórki pomocy.

Krok 3. Programowanie

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

  • Opcja A: z wiersza poleceń, przy użyciu narzędzia cca lub
  • Opcja B: użycie IDE, takiego jak Eclipse lub Xcode. Korzystanie z IDE jest całkowicie opcjonalne (ale często przydatne) przy uruchamianiu, konfigurowaniu i debugowaniu hybrydowej aplikacji mobilnej.

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

Z poziomu głównego folderu projektu wygenerowanego przez cca:

Android

  • Aby uruchomić aplikację przy użyciu emulatora Androida: cca emulate android
    • Uwaga: to rozwiązanie wymaga skonfigurowania emulatora. Aby to skonfigurować, możesz uruchomić aplikację android avd. Pobierz dodatkowe obrazy emulatora, uruchamiając android. Aby przyspieszyć działanie obrazów Intel, zainstaluj system 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. Programowanie i kompilowanie z użyciem IDE

Android

  1. W Zaćmieniu wybierz File -> Import
  2. Wybierz Android > Existing Android Code Into Workspace
  3. Importuj ze ścieżki utworzonej przed chwilą w usłudze cca.
    • Prawdopodobnie będziesz mieć do zaimportowania 2 projekty, z których 1 jest *-CordovaLib.
  4. Kliknij przycisk Graj, aby uruchomić aplikację.
    • Musisz utworzyć uruchomienie konfiguracji (tak jak w przypadku wszystkich aplikacji w Javie). zwykle otrzymasz pierwszy raz automatycznie.
    • Na początku musisz też zarządzać swoimi urządzeniami/emulatorami.

iOS

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

    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, w którym możesz wybrać projekt docelowy urządzenia. 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 środowisku www/ musisz uruchomić cca prepare przed wdrożeniem aplikacji. Jeśli używasz cca build, cca run lub cca emulate z poziomu wiersza poleceń, jest przeprowadzany automatycznie. Jeśli tworzysz gry za pomocą Eclipse/XCode, cca prepare ręcznie.

Debugowanie

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

Krok 4: Dalsze kroki

Gdy już masz działającą aplikację mobilną Chrome, możesz skorzystać z wielu sposobów urządzeniach mobilnych.

Plik manifestu na urządzenia mobilne

Niektóre ustawienia aplikacji Chrome dotyczą tylko platform mobilnych. Utworzyliśmy www/manifest.mobile.json, który zawiera te elementy oraz określone wartości, w których są odwołania w dokumentacji wtyczki i w tym przewodniku.

Należy odpowiednio dostosować tu 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 to:

  • 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 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

Podczas wczytywania aplikacji na urządzeniach z iOS krótki ekran powitalny. Zestaw domyślnego powitania w Cordovie platforms/ios/[AppName]/Resources/splash.

Potrzebne rozmiary:

  • 320 x 480 piks. + 2 x
  • 768 x 1024 piks. + 2 x (iPad, orientacja pionowa)
  • 1024 x 768 pikseli + 2 piksele (orientacja pozioma na iPadzie)
  • 640 x 1146 piks.

Obrazy ekranu powitalnego nie są obecnie modyfikowane przez usługę cca.

Krok 5. Opublikuj

W katalogu platforms projektu masz 2 pełne projekty natywne: jeden dla Androida oraz jedną na iOS. Możesz tworzyć wersje premierowe tych projektów i publikować je w Google Play lub w 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 i uruchom cca prepare:

    • android:versionName jest ustawiany za pomocą klawisza version w www/manifest.json (powoduje to ustawienie wersji aplikacji na komputer).
    • Pole android:versionCode jest ustawiane za pomocą klawisza versionCode w tabeli www/manifest.mobile.js.

  2. Edytuj (lub utwórz) platforms/android/ant.properties oraz ustaw key.store i key.alias (jak wyjaśniliśmy w dokumentacji dla deweloperów aplikacji na Androida).

  3. Skompiluj projekt:

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

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

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

Opublikuj w App Store na iOS

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

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

    otwórz platformy/ios/*.xcodeproj

  3. Postępuj zgodnie z przewodnikiem Apple App Distribution.

Specjalne uwagi

Jeśli dopiero zaczynasz korzystać z Aplikacji Chrome, największą zaletą jest to, że niektóre funkcje internetowe są wyłączone. Kilka z nich działa jednak obecnie w Cordovie.

Na urządzeniu mobilnym aplikacja Chrome może nie działać od razu po jej uruchomieniu. Niektóre typowe problemy z przenoszeniem na urządzenia mobilne:

  • Problemy z układem w przypadku małych ekranów, zwłaszcza w orientacji pionowej.
    • Proponowane rozwiązanie: użyj zapytań o media CSS, aby zoptymalizować treści pod kątem mniejszych ekranów.
  • Rozmiary okien aplikacji Chrome ustawione w metodzie chrome.app.window są ignorowane. Zamiast tego używana jest wartość zgodnie z wymiarami natywnymi urządzenia.
    • Proponowane rozwiązanie: usuń wpisane na stałe wymiary okna. Zaprojektuj swoją aplikację w różnych rozmiarach, umysł.
  • Małe przyciski i linki trudno będzie dotknąć palcem.
    • Proponowane rozwiązanie: dostosuj docelowe elementy dotykowe tak, aby miały rozmiar co najmniej 44 x 44 punkty.
  • Nieoczekiwane działanie polegające na najechaniu kursorem myszy, które nie występuje na ekranach dotykowych.
    • Proponowane rozwiązanie: oprócz najechania kursorem aktywuj elementy interfejsu, takie jak menu i etykietki kliknij.
  • 300 ms opóźnienia kliknięcia.

Obsługiwane interfejsy API Chrome

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

  • identity – logowanie się użytkowników przy użyciu protokołu OAuth2.
  • płatności – sprzedaż wirtualnych towarów w aplikacji mobilnej.
  • pushMessaging – wiadomości push z Twojego serwera do aplikacji.
  • gniazda – wysyłanie i odbieranie danych przez sieć przy użyciu protokołów TCP i UDP.
  • powiadomienia (tylko Android) – wysyłaj powiadomienia rozszerzone z aplikacji mobilnej.
  • storage – przechowywanie i pobieranie danych par klucz-wartość lokalnie
  • syncFileSystem – służy do przechowywania i pobierania plików przechowywanych na Dysku Google.
  • alarmy – zadania są uruchamiane okresowo.
  • idle – wykrywanie zmian stanu bezczynności maszyny,
  • power – zastąp funkcje zarządzania energią stosowane w systemie

Jednak nie wszystkie interfejsy API JavaScript w Chrome zostały zaimplementowane. A nie wszystkie funkcje Chrome dostępne w wersji na komputer dostępne na urządzeniach mobilnych:

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

Postęp możesz śledzić na 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: pobrać i uruchomić aplikację Chrome bez konfigurowania łańcucha narzędzi dla programistów w sposób opisany powyżej. Używaj ADT, jeśli chcesz 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ę, wyświetl Informacje o wersji ChromeADT.apk zawierające instrukcje instalacji i obsługi.