Wprowadzenie do tworzenia aplikacji PWA lub hybrydowej aplikacji internetowej dla systemu Android

Ten przewodnik pomoże Ci rozpocząć tworzenie hybrydowej aplikacji internetowej lub progresywnej aplikacji internetowej (PWA) w systemie Windows przy użyciu pojedynczej bazy kodu HTML/CSS/JavaScript, która może być używana w internecie i na różnych platformach urządzeń (Android, iOS, Windows).

Korzystając z odpowiednich struktur i składników, aplikacje internetowe mogą działać na urządzeniu z systemem Android w sposób, który wygląda bardzo podobnie do aplikacji natywnej.

Funkcje aplikacji internetowej PWA lub hybrydowej aplikacji internetowej

Istnieją dwa główne typy aplikacji internetowych, które można zainstalować na urządzeniach z systemem Android. Główną różnicą jest to, czy kod aplikacji jest osadzony w pakiecie aplikacji (hybrydowym) lub hostowanym na serwerze internetowym (pwa).

• Hybrydowe aplikacje internetowe: kod (HTML, JS, CSS) jest pakowany w pakiecie APK i może być dystrybuowany za pośrednictwem Sklepu Google Play. Silnik wyświetlania jest odizolowany od przeglądarki internetowej użytkowników; nie ma udostępniania sesji ani pamięci podręcznej.

• Progresywne aplikacje internetowe (PWA): kod (HTML, JS, CSS) działa w Internecie i nie musi być spakowany jako plik APK. Zasoby są pobierane i aktualizowane zgodnie z potrzebami przy użyciu Service Workera. Przeglądarka Chrome będzie renderować i wyświetlać aplikację, ale z wyglądu przypominać aplikację natywną i nie będzie zawierać normalnego paska adresu przeglądarki itp. Możesz udostępniać przestrzeń dyskową, pamięć podręczną i sesje z przeglądarką. Jest to w zasadzie jak zainstalowanie skrótu do przeglądarki Chrome w trybie specjalnym. Aplikacje PWA można również wyświetlać w Sklepie Google Play przy użyciu zaufanej aktywności internetowej.

Aplikacje PWA i hybrydowe aplikacje internetowe są bardzo podobne do natywnej aplikacji systemu Android, w której:

• Można zainstalować za pośrednictwem sklepu App Store (Sklep Google Play i/lub Microsoft Store)
• Dostęp do natywnych funkcji urządzeń, takich jak aparat GPS, Bluetooth, powiadomienia i lista kontaktów
• Praca w trybie offline (brak połączenia internetowego)

Aplikacje PWA mają również kilka unikatowych funkcji:

• Można zainstalować na ekranie głównym systemu Android bezpośrednio z Internetu (bez sklepu App Store)
• Można również zainstalować za pośrednictwem sklepu Google Play przy użyciu zaufanej aktywności internetowej
• Można odnaleźć za pośrednictwem wyszukiwarek internetowych lub udostępnić za pomocą linku URL.
• Polegaj na Service Worker, aby uniknąć konieczności pakowania kodu natywnego.

Nie potrzebujesz frameworku, aby utworzyć aplikację hybrydową lub aplikację typu PWA, ale istnieje kilka popularnych frameworków, które zostaną omówione w tym przewodniku, w tym PhoneGap (z Cordova) i Ionic (z Cordova lub Capacitor przy użyciu platformy Angular lub React).

Apache Cordova

Apache Cordova jest frameworkiem open source, który może uprościć komunikację między kodem JavaScript znajdującym się w natywnym WebView a natywną platformą systemu Android za pomocą wtyczek . Te wtyczki uwidaczniają punkty końcowe języka JavaScript, które mogą być wywoływane z kodu i używane do wywoływania natywnych interfejsów API urządzeń z systemem Android. Niektóre przykładowe wtyczki Cordova obejmują dostęp do usług urządzenia, takich jak stan baterii, dostęp do plików, drgania lub dzwonki itp. Te funkcje zazwyczaj nie są dostępne dla aplikacji internetowych ani przeglądarek.

Istnieją dwie popularne dystrybucje Cordova:

• PhoneGap: Wsparcie zostało wycofane przez firmę Adobe.

• Jonowych

Jonowy

Ionic to struktura, która dostosowuje interfejs użytkownika aplikacji do języka projektowania każdej platformy (Android, iOS, Windows). Ionic umożliwia korzystanie z Angular lub React.

Wprowadzenie do Ionic przez zainstalowanie wymaganych narzędzi

Aby rozpocząć tworzenie aplikacji PWA lub hybrydowej aplikacji internetowej za pomocą Ionic, należy najpierw zainstalować następujące narzędzia:

• Node.js służy do interakcji z ekosystemem Ionic. Pobierz Node.js dla systemu Windows lub postępuj zgodnie z przewodnikiem instalacji Node.js korzystając z Windows Subsystem for Linux (WSL). Warto rozważyć użycie programu Node Version Manager (nvm), jeśli będziesz pracować z wieloma projektami i wersją środowiska NodeJS.

• Program VS Code do pisania kodu. Pobierz program VS Code dla systemu Windows. Możesz również zainstalować rozszerzenia zdalnego WSL, jeśli wolisz skompilować aplikację przy użyciu wiersza polecenia systemu Linux.

• Terminal systemu Windows do pracy z preferowanym interfejsem wiersza polecenia (CLI). Zainstaluj terminal systemu Windows ze sklepu Microsoft Store.

• Usługa Git do kontroli wersji. pobierzGit.

Tworzenie nowego projektu przy użyciu platformY Ionic Cordova i Angular

Zainstaluj oprogramowanie Ionic i Cordova, wprowadzając następujące polecenie w wierszu polecenia:

npm install -g @ionic/cli cordova

Utwórz aplikację Angular Ionic przy użyciu szablonu aplikacji "Tabs", wprowadzając polecenie:

ionic start photo-gallery tabs

Przejdź do folderu aplikacji:

cd photo-gallery

Uruchom aplikację w przeglądarce internetowej:

ionic serve

Aby uzyskać więcej informacji, zobacz dokumentację Ionic Cordova Angular. Odwiedź sekcję Zamienianie aplikacji Angular w PWA w dokumentacji Ionic, aby dowiedzieć się, jak przekształcić aplikację hybrydową w aplikację PWA.

Utwórz nowy projekt za pomocą Ionic Capacitor i Angular

Zainstaluj język Ionic i Cordova-Res, wprowadzając następujące polecenie w wierszu polecenia:

npm install -g @ionic/cli native-run cordova-res

Utwórz aplikację Ionic Angular przy użyciu szablonu aplikacji "Tabs" i dodaj Capacitor, wpisując polecenie:

ionic start photo-gallery tabs --type=angular --capacitor

Przejdź do folderu aplikacji:

cd photo-gallery

Dodaj komponenty, aby przekształcić aplikację w PWA.

npm install @ionic/pwa-elements

Zaimportuj @ionic/pwa-elements , dodając następujące elementy do src/main.ts pliku:

import { defineCustomElements } from '@ionic/pwa-elements/loader';

// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);

Uruchom aplikację w przeglądarce internetowej:

ionic serve

Aby uzyskać więcej informacji, zobacz dokumentację Ionic Capacitor Angular. Odwiedź sekcję Przekształcanie aplikacji Angular w PWA w dokumentacji Ionic, aby dowiedzieć się, jak przenieść aplikację z hybrydowej na PWA.

Tworzenie nowego projektu przy użyciu platform Ionic i React

Zainstaluj narzędzie wiersza poleceń Ionic, wpisując następujące polecenie w terminalu:

npm install -g @ionic/cli

Utwórz nowy projekt za pomocą platformy React, wprowadzając polecenie:

ionic start myApp blank --type=react

Przejdź do folderu aplikacji:

cd myApp

Uruchom aplikację w przeglądarce internetowej:

ionic serve

Aby uzyskać więcej informacji, zobacz Ionic React docs. Odwiedź sekcję Tworzenie aplikacji React jako PWA w dokumentacji Ionic, aby dowiedzieć się, jak przenieść swoją aplikację z hybrydowej do aplikacji PWA.

Testowanie aplikacji Ionic na urządzeniu lub emulatorze

Aby przetestować aplikację Ionic na urządzeniu z systemem Android, podłącz urządzenie (upewnij się, że jest ono najpierw włączone do trybu programistycznego), a następnie w wierszu polecenia wprowadź:

ionic cordova run android

Aby przetestować aplikację Ionic w emulatorze urządzenia z systemem Android, musisz:

1. Zainstaluj wymagane składniki — Zestaw Java Development Kit (JDK), Gradle i zestaw Android SDK.

2. Tworzenie urządzenia wirtualnego z systemem Android (AVD): zobacz [Przewodnik dla deweloperów systemu Android]](https://developer.android.com/studio/run/managing-avds.html).

3. Wprowadź polecenie Ionic, aby skompilować i wdrożyć aplikację w emulatorze: ionic cordova emulate [<platform>] [options]. W takim przypadku polecenie powinno mieć następującą wartość:

ionic cordova emulate android --list

Zobacz Emulator Cordova w dokumentacji Ionic, aby uzyskać więcej informacji.