AngularJS i Apache Cordova – hybrydowe aplikacje mobilne

desi9n.pl logo desi9n.pl

Mapa strony
PL EN

Autor: Krzysztof Ścira

AngularJS i Apache Cordova razem umożliwiały budowanie jednej aplikacji działającej na Android, iOS i Windows Phone. Dowiedz się, jak połączyć oba frameworki, jakich wtyczek używać i co zoptymalizować, by aplikacja hybrydowa działała płynnie.

Schemat działania Apache Cordova i AngularJS w hybrydowej aplikacji mobilnej – WebView, natywne API, plugins
Ilustracja pokazująca architekturę aplikacji hybrydowej: AngularJS jako warstwa UI, Apache Cordova jako most do natywnych API urządzenia – kamera, GPS, push notifications.

AngularJS i Apache Cordova – jak tworzyć hybrydowe aplikacje mobilne?

W październiku 2015 roku Krzysztof Ścira stanął na scenie konferencji Mobilization V w Łodzi i opowiedział o tym, jak łączyć AngularJS z Apache Cordovą, żeby tworzyć hybrydowe aplikacje mobilne na Android, iOS i Windows Phone — jednocześnie, z jednej bazy kodu. Jedenaście lat później wracamy do tej prelekcji, żeby zobaczyć, co z tamtej wiedzy przetrwało próbę czasu.

Dziś, z perspektywy 2026 roku, wiele z ówczesnych rozwiązań odeszło do historii — AngularJS przestał być wspierany w 2021 roku, Cordovę w dużej mierze zastąpiły Capacitor, React Native i Flutter, a WebView na Androidzie aktualizuje się automatycznie przez Google Play. Mimo to ten materiał jest wart przeczytania: zasady architektury, pułapki asynchroniczności i lekcje optymalizacji mobilnej, które Krzysztof omawiał, pozostają aktualnym punktem odniesienia — niezależnie od frameworka.

Aplikacje hybrydowe — mit o powolności

W 2011 roku, gdy hybrydowe aplikacje mobilne robiły pierwsze kroki, panowała powszechna opinia, że są nieakceptowalnie wolne. Wynikała ona z obiektywnych ograniczeń tamtego czasu: PhoneGap nie był jeszcze w wersji stabilnej, Android 2.3 dominował na rynku z fatalną obsługą HTML5, a większość deweloperów wpadła w pułapkę jQuery Mobile ze skokową animacją i ciężkim DOM-em.

Do roku 2016 sytuacja zmieniła się zasadniczo. Cordova dojrzała do wersji 5, Android 4.4 (KitKat) wprowadził WebView oparty na silniku Chromium, a smartfony nawet z niższej półki dysponowały mocą obliczeniową niedostępną w flagowcach sprzed kilku lat. Mit o powolności aplikacji hybrydowych przestał być argumentem — pod warunkiem, że pisano je rozważnie.

Aplikacja hybrydowa czy natywna? Wady i zalety

Przed wyborem technologii warto zestawić obie ścieżki. Podejście hybrydowe (Cordova + HTML5/JS) daje kilka konkretnych korzyści:

  • Jeden zespół deweloperski — ten sam kod trafia na Android, iOS i Windows Phone
  • Znacznie szybszy development — widoki buduje się w HTML i CSS, co jest dużo sprawniejsze niż składanie UI natywnie na każdej platformie osobno
  • Jednolity wygląd na wszystkich platformach — użytkownicy zawsze widzą tę samą aplikację, co ułatwia budowanie spójnego wizerunku marki
  • Możliwość pracy z poziomu przeglądarki — kod webowy można testować w przeglądarce bez konieczności budowania natywnych paczek na każdej iteracji

Wady podejścia hybrydowego to przede wszystkim ograniczenia przeglądarek i WebView na poszczególnych platformach, konieczność dogłębnego testowania na urządzeniach (nie tylko w emulatorze) oraz fakt, że dostęp do bardziej zaawansowanego sprzętu wymaga zewnętrznych wtyczek. Programowanie natywne pozostaje niezastąpione przy aplikacjach intensywnie korzystających z GPU (gry 3D, rozszerzona rzeczywistość) lub wymagających pełnej integracji z systemem operacyjnym.

Czym jest Apache Cordova i czym różni się od PhoneGap?

Apache Cordova to otwartoźródłowy framework, który pozwala budować aplikacje mobilne w HTML5, CSS i JavaScript, a następnie pakować je jako natywne paczki (APK dla Androida, IPA dla iOS, XAP dla Windows Phone). Silnikiem wykonawczym jest komponent WebView osadzony w natywnej powłoce aplikacji.

PhoneGap to de facto to samo — różnica jest wyłącznie licencyjna (PhoneGap należy do Adobe/Apache), podobnie jak LibreOffice i OpenOffice wywodzą się ze wspólnego kodu. Drobne różnice pojawiają się przy zarządzaniu wtyczkami, ale rdzeń technologiczny jest identyczny.

Główna wartość Cordovy względem zwykłego WebView polega na dostępie do natywnych API urządzenia poprzez system wtyczek: kamera, GPS, powiadomienia push, skaner kodów kreskowych i wiele innych funkcji niedostępnych w czystym HTML-u.

Schemat architektury hybrydowej aplikacji mobilnej – warstwy AngularJS, Apache Cordova bridge i natywne API urządzenia
Uproszczony schemat architektury: AngularJS jako warstwa UI, Apache Cordova jako bridge do natywnych API urządzenia (kamera, GPS, push, barcode). Prezentacja: Krzysztof Ścira, Mobilization 2015, Łódź.

WebView — serce i bolączka aplikacji hybrydowych

WebView to komponent przeglądarki osadzony wewnątrz aplikacji. W 2016 roku jego zachowanie różniło się znacząco zależnie od platformy:

  • Android < 4.2 (Ice Cream Sandwich, Jelly Bean) — stary WebView z ograniczoną obsługą HTML5. Można było go zastąpić wtyczką Crosswalk, która podnosiła silnik do wersji Chromium z KitKata — jednak kosztem 15 MB doliczonego do rozmiaru aplikacji
  • Android 4.4+ (KitKat) — WebView oparty na Chromium, zauważalna poprawa wydajności i zgodności ze standardami
  • iOS 9 — Apple wprowadził dwa warianty WebView: standardowy oraz rozszerzony z silnikiem Nitro (z optymalizatorem JavaScript znany z Safari). Cordova 5 nie obsługiwała jeszcze nowego wariantu, co powodowało ograniczenia wydajnościowe
  • Windows Phone 8.1 vs Windows 10 — dwie oddzielne platformy w Cordovie, wymagające osobnego konfigurowania

Nowości w Cordova 5.0

Wersja 5.0 przyniosła kilka istotnych zmian, o których każdy deweloper zaczynający projekt hybrydowy w tym czasie musiał wiedzieć:

  • Wtyczki przeniesione do npm — dotychczas wtyczki trzymano w centralnym repozytorium Cordovy z nazwami w stylu org.apache.cordova.camera. Od wersji 5.0 nazewnictwo przeszło na konwencję npm: cordova-plugin-camera (z łącznikami). Wtyczek w nowym formacie nie można instalować na starszej Cordovie i odwrotnie
  • Gradle zastąpił Ant dla Androida — Gradle pobiera się automatycznie podczas pierwszego buildu, poprawnie czeka na uruchomienie emulatora i nie pozostawia przestarzałych plików DEX blokujących zmiany webowe. Ant na Windowsie wymagał ręcznej konfiguracji i przysparzał licznych problemów
  • Crosswalk jako wtyczka — wtyczkę Crosswalk można teraz instalować standardową komendą cordova plugin add
  • Zaostrzone polityki bezpieczeństwa — każde odwołanie do zewnętrznych adresów (linki, API, tel:, mailto:) wymaga jawnego zezwolenia w pliku konfiguracyjnym

Tworzenie projektu Cordova — pierwszy krok

Nowy projekt tworzy się jedną komendą:

cordova create MyProject com.example.myapp MyProject
cordova platform add android
cordova run android

Ważna wskazówka: nazwa projektu (trzeci parametr) powinna zaczynać się od wielkiej litery i nie zawierać spacji ani znaków specjalnych. Ignorowanie tej zasady nie psuje projektu od razu — problemy ujawniają się dopiero przy instalacji wtyczek pod iOS, co potrafi zająć wiele godzin debugowania.

Integracja AngularJS z Cordovą — pułapka deviceready

Połączenie AngularJS z Cordovą wymaga rozwiązania jednego podstawowego problemu: AngularJS uruchamia się natychmiast po załadowaniu DOM-u, natomiast Cordova emituje zdarzenie deviceready dopiero po zainicjowaniu wszystkich wtyczek natywnych. Jeśli w serwisie lub kontrolerze AngularJS odwołamy się do API Cordovy (np. navigator.camera) przed tym zdarzeniem — obiekt jeszcze nie istnieje i aplikacja rzuci błędem.

Rozwiązanie: zamiast uruchamiać Angulara przez dyrektywę ng-app w HTML-u, inicjalizujemy go programowo po zdarzeniu deviceready:

document.addEventListener('deviceready', function() { angular.bootstrap(document, ['myApp']);
}, false);

Drugie ważne zagadnienie to $scope.$apply(). Ilekroć zmieniamy dane w AngularJS z poziomu callbacku natywnej wtyczki (spoza cyklu życia Angulara), musimy wywołać $scope.$apply(), aby framework zaktualizował widok. Jest to obejście, które sygnalizuje, że „coś się zmieniło spoza Angulara" — stosujemy je tylko w uzasadnionych przypadkach, np. przy odbieraniu danych z aparatu czy skanera.

Serwisy i deferred — właściwy wzorzec architektury

Jeśli ta sama funkcjonalność natywna (np. barcode scanner) jest potrzebna w kilku widokach, umieszczamy ją w serwisie AngularJS. Wywołania wtyczek Cordovy są asynchroniczne, dlatego serwis musi zwracać promise zamiast wartości bezpośredniej:

app.service('BarcodeService', function($q) { this.scan = function() { var deferred = $q.defer(); cordova.plugins.barcodeScanner.scan( function(result) { deferred.resolve(result); }, function(error) { deferred.reject(error); } ); return deferred.promise; };
});

Wtyczki — które działają niezawodnie, a których unikać

Na podstawie praktycznych doświadczeń z 2016 roku można było podzielić wtyczki na dwie grupy:

Stabilne i godne zaufania:

  • Barcode Scanner
  • Kamera (z obsługą kadrowania — od Cordova 5.0 działającego też na Androidzie)
  • Lokalne powiadomienia (cordova-plugin-local-notifications)
  • Push notifications
  • Geolokacja

Problematyczne lub niezalecane:

  • Facebook Connect — bardzo odradzany ze względu na liczne problemy z zależnościami
  • Google Plus — niestabilne zachowanie
  • Płatności wewnątrzaplikacyjne — w praktyce niefunkcjonalne
  • AdMob — teoretycznie dostępny, ale instalacja pociąga za sobą tyle zależności, że bez silnej potrzeby lepiej go omijać

Optymalizacja wydajności aplikacji hybrydowych

Wydajność aplikacji hybrydowej zależy w dużej mierze od kilku praktycznych decyzji projektowych:

  • Rozmiar DOM-u — im mniejsza i płytsza struktura HTML, tym płynniejsze działanie. Każda modyfikacja DOM-u (dodawanie, usuwanie, przesuwanie węzłów) kosztuje czas renderowania
  • Animacje CSS zamiast JS — przejścia i animacje realizowane przez transition i @keyframes są obsługiwane sprzętowo. Animowanie właściwości piksele-po-pikselu w JavaScript (znane z jQuery .animate()) to podejście zbyt kosztowne dla mobilnych GPU
  • Unikaj ciężkich box-shadowów — duże, rozmyte cienie (szczególnie przy elementach przewijanych) znacząco obciążają GPU na starszych urządzeniach. Testuj z cieniem 5px, potem 100px, potem 1000px — różnica w płynności scrollowania będzie widoczna
  • SVG używaj ostrożnie — w kontekście aplikacji mobilnych SVG nadaje się do wykresów, ale i tu warto rozważyć Canvas jako alternatywę
  • Biblioteki utility zamiast zagnieżdżonych pętli — operacje na tablicach przez kilka poziomów for to antywzorzec; biblioteka underscore.js lub lodash mają lepiej zoptymalizowane implementacje
  • Widoki pokazywane/ukrywane CSS-em — gdy użytkownik nawiguje między kilkoma widokami bardzo szybko, przeładowywanie całego DOM-u co raz jest niepotrzebne. Lepiej mieć wszystkie widoki w DOM i przełączać ich widoczność CSS-em

Ghost clicks — znany problem, proste rozwiązanie

W aplikacjach mobilnych na WebView zdarzają się ghost clicks: kliknięcie otwiera nowy widok, ale nim animacja przejścia się skończy, to samo kliknięcie „trafia" w element nowego widoku. Skutecznym i prostym rozwiązaniem jest blokowanie kliknięć przez krótki czas po każdym zdarzeniu:

// Po kliknięciu — dodaj klasę blokującą zdarzenia wskaźnika
document.body.classList.add('anti-clickable');
// CSS: .anti-clickable * { pointer-events: none; }
// Zdejmij blokadę po 500ms
setTimeout(function() { document.body.classList.remove('anti-clickable');
}, 500);

Środowisko deweloperskie — co jest potrzebne?

Do pracy z Cordovą i Angularem w 2016 roku potrzebny był następujący zestaw narzędzi (dla platformy Android):

  • JDK (Java Development Kit)
  • Android SDK
  • Ruby 2.0+ — potrzebny do SASS (optional, ale praktyczny)
  • Node.js i npm w aktualnej wersji (stary Node z serii 0.x powodował problemy z Cordovą 5)
  • Z pakietów npm: Cordova, Bower (menedżer paczek JS), Yeoman (scaffolding projektów), Gulp (narzędzie buildowe)

Ważna uwaga: zmienne środowiskowe na Linuksie ustaw w /etc/environment, nie w profilu użytkownika. Procesy budowania (Gradle) mogą uruchamiać się jako system, nie jako zalogowany użytkownik, i wtedy nie znajdą ścieżek ustawionych tylko dla konta dewelopera.

Do budowania pod iOS niezbędny jest Mac z Xcode — Krzysztof trzymał kod na Linuksie, a do kompilacji przenosił go przez Git na Mac. Wszystkie inne etapy (pisanie kodu, budowanie i testowanie pod Androidem) można realizować bez IDE — wystarczy edytor tekstu i wiersz poleceń.

Publikacja w sklepach — o czym nie zapomnieć

Dla web deweloperów wchodzących w świat aplikacji mobilnych publikacja w sklepach jest nowym procesem. Krzysztof wymieniał najważniejsze kroki:

  • Przygotowanie ikony we wszystkich wymaganych rozmiarach (Inkscape + skrypt automatyzujący eksport)
  • Opisy i zrzuty ekranu do sklepu Google Play / App Store
  • Klasyfikacja treści aplikacji (rating wiekowy)
  • Podpisanie APK certyfikatem release'owym (keystore); można to zrobić z linii poleceń bez uruchamiania Android Studio

Co zmieniło się od 2016 roku?

Minęło niemal 10 lat od tej prelekcji i ekosystem aplikacji mobilnych zmienił się fundamentalnie:

  • AngularJS (wersja 1.x) osiągnął koniec wsparcia w grudniu 2021 roku. Jego następca — Angular (od wersji 2 pisany jako oddzielny framework) — to dziś dojrzała platforma z TypeScriptem, komponentami i RxJS
  • Apache Cordova jest nadal aktywna, ale jej popularność przejęły nowsze rozwiązania: Capacitor (twórcy Ionic), React Native i Flutter
  • WebView na Androidzie jest od 2014 roku aktualizowany jako osobna aplikacja przez Google Play — nie trzeba już martwić się o fragment urządzeń z przestarzałym silnikiem
  • Problem ghost clicks jest mniej powszechny dzięki nowoczesnym bibliotekom nawigacji i lepszym obsłudze zdarzeń dotykowych w przeglądarkach
  • Cordova 5 z Gradlem to dziś standard — stary Ant odszedł w niepamięć

Fundamentalne wyzwania — zarządzanie cyklem życia aplikacji, asynchroniczność API natywnych, wydajność renderowania na słabszym sprzęcie — pozostają aktualne niezależnie od frameworka. To właśnie te lekcje z 2016 roku stanowią trwałą wartość omówionej prelekcji.

Podsumowanie

Podejście hybrydowe z AngularJS i Apache Cordovą pozwoliło w połowie dekady 2010–2020 firmom takim jak desi9n.pl dostarczać aplikacje mobilne na kilka platform z jednym zespołem i jedną bazą kodu. Kluczem do sukcesu było zrozumienie ograniczeń WebView, właściwa architektura serwisów AngularJS z deferami, ostrożny dobór wtyczek i konsekwentna optymalizacja wydajności warstwy CSS.

Tworzysz aplikację mobilną i chcesz wybrać właściwe podejście technologiczne? Dowiedz się, jak tworzymy aplikacje mobilne w desi9n.pl i skonsultuj projekt z naszym zespołem.

Skąd pochodzi ta wiedza – konferencje i prelekcje

Prelekcja z Mobilization V 2015 była jedną z wielu okazji, przy których Krzysztof Ścira dzielił się doświadczeniami z budowania aplikacji mobilnych na konferencjach branżowych. Temat aplikacji hybrydowych powracał też na innych wydarzeniach:

Wątek aplikacji mobilnych jest nadal aktywny w działalności desi9n.pl – śledź zapowiedź naszego udziału w jubileuszowej 25. edycji Mobile Trends Conference 2026.

Tagi artykułu:

Czy podobał Ci się ten artykuł? Szukasz partnera, który pomoże Ci w realizacji nowoczesnych rozwiązań? Jeśli chcesz wdrożyć omawiane rozwiązania w swoim projekcie, skontaktuj się z nami i rozpocznijmy współpracę!

Kontakt