Első lépések pwa vagy hibrid webalkalmazás androidos fejlesztéséhez

Ez az útmutató segítséget nyújt egy hibrid webalkalmazás vagy progresszív webalkalmazás (PWA) windowsos létrehozásának megkezdéséhez egyetlen HTML/CSS/JavaScript kódbázis használatával, amely használható a weben és az eszközplatformokon (Android, iOS, Windows).

A megfelelő keretrendszerek és összetevők használatával a webalapú alkalmazások úgy működhetnek androidos eszközökön, hogy a natív alkalmazásokhoz hasonlóan néznek ki a felhasználók számára.

A PWA- vagy hibrid webalkalmazások funkciói

A webalkalmazások két fő típusa telepíthető androidos eszközökön. A fő különbség az, hogy az alkalmazáskód egy alkalmazáscsomagba (hibrid) vagy egy webkiszolgálón (pwa) van beágyazva.

• Hibrid webalkalmazások: A kód (HTML, JS, CSS) egy APK-ban van csomagolva, és a Google Play Áruházon keresztül terjeszthető. A megtekintési motor el van különítve a felhasználók internetböngészőitől, nincs munkamenet- vagy gyorsítótármegosztás.

• Progresszív webalkalmazások (PWA-k): A kód (HTML, JS, CSS) a weben található, és nem kell APK-ként csomagolni. A rendszer szükség szerint letölti és frissíti az erőforrásokat egy szolgáltatásvégző használatával. A Chrome böngésző megjeleníti az alkalmazást, de úgy fog kinézni, mintha natív lenne, és nem tartalmazza a szokásos böngésző címsorát stb. Megoszthatja a tárterületet, a gyorsítótárat és a munkameneteket a böngészővel. Ez alapvetően olyan, mint a Chrome böngésző parancsikonjának telepítése speciális módban. A PWA-k a Google Play Áruházban is listázhatók megbízható webes tevékenység használatával.

A PWA-k és a hibrid webalkalmazások nagyon hasonlóak a natív Android-alkalmazásokhoz, mivel:

• Telepíthető az App Store-on keresztül (Google Play Áruház és/vagy Microsoft Store)
• Hozzáféréssel rendelkezik a natív eszközfunkciókhoz, például a kamerához, a GPS-hez, a Bluetoothhoz, az értesítésekhez és a névjegyek listájához
• Offline munka (nincs internetkapcsolat)

A PWA-k néhány egyedi funkcióval is rendelkeznek:

• Közvetlenül az internetről telepíthető az Android kezdőképernyőjére (App Store nélkül)
• Ezenkívül a Google Play Áruházon keresztül is telepíthető egy Megbízható Webaktivitás segítségével .
• Felderíthető webes kereséssel vagy URL-hivatkozáson keresztül megosztva
• A natív kód csomagolásának elkerülése érdekében támaszkodjon egy szolgáltatásvégző

Hibrid alkalmazás vagy PWA létrehozásához nincs szükség keretrendszerre, de az útmutató néhány népszerű keretrendszert tartalmaz, például a PhoneGap -t (Cordovával) és az Ionic-t (Cordova vagy Capacitor Angular vagy React használatával).

Apache Cordova

Az Apache Cordova egy nyílt forráskódú keretrendszer, amely beépülő modulok használatával egyszerűsítheti a natív WebView-ban élő JavaScript-kód és a natív Android-platform közötti kommunikációt. Ezek a beépülő modulok JavaScript-végpontokat fednek le, amelyek meghívhatók a kódból, és natív Android-eszköz API-k meghívására használhatók. A Cordova beépülő moduljai közé tartoznak például az eszközszolgáltatásokhoz való hozzáférés, például az akkumulátor állapota, a fájlhozzáférés, a rezgés/gyűrű tónusok stb. Ezek a funkciók általában nem érhetők el webalkalmazások vagy böngészők számára.

A Cordova két népszerű eloszlása van:

• PhoneGap: Az Adobe megszüntette a támogatást.

• Ionos

Ionos

Az Ionic egy keretrendszer, amely az alkalmazás felhasználói felületét (felhasználói felületét) úgy állítja be, hogy megfeleljen az egyes platformok (Android, iOS, Windows) tervezési nyelvének. Az Ionic lehetővé teszi az Angular vagy a React használatát.

Megjegyzés:

Van egy új Ionic verzió, amely a Cordova alternatíváját, a Capacitor-t használja. Ez az alternatíva a tárolók használatával teszi alkalmazását webbarátabbá.

Az Ionic használatának első lépései a szükséges eszközök telepítésével

A PWA- vagy hibrid webalkalmazások Ionic-nal való létrehozásának megkezdéséhez először telepítenie kell a következő eszközöket:

• Node.js az Ionic ökoszisztémával való interakcióhoz. NodeJS letöltése Windows-ra vagy kövesse a NodeJS telepítési útmutatóját, a Windows Alrendszer a Linuxhoz (WSL) használatával. Érdemes lehet megfontolni a Node Version Manager (nvm) használatát, ha több projekttel és a NodeJS-verzióval fog dolgozni.

• VS Code a kód írásához. Töltse le a VS Code-ot Windowsra. Akkor is érdemes lehet telepíteni a WSL távoli bővítményt , ha inkább linuxos parancssort szeretne létrehozni az alkalmazáshoz.

• Windows Terminál az előnyben részesített parancssori felület (CLI) használatával való munkához. Telepítse a Windows Terminált a Microsoft Store-ból.

• Git verziókövetéshez. Gitletöltése.

Új projekt létrehozása Ionic Cordova és Angular használatával

Telepítse az Ionic és a Cordova műveletet a parancssorba az alábbiak beírásával:

npm install -g @ionic/cli cordova

Hozzon létre egy Ionic Angular-alkalmazást a Tabs alkalmazássablon használatával a parancs beírásával:

ionic start photo-gallery tabs

Váltás az alkalmazásmappára:

cd photo-gallery

Futtassa az alkalmazást a webböngészőben:

ionic serve

További információért tekintse meg a Ionic Cordova Angular docs. Az Ionic dokumentációk Az Angular-alkalmazás PWA-vá alakítása szakaszban megtudhatja, hogyan helyezheti át az alkalmazást hibridről PWA-ra.

Új projekt létrehozása az Ionic Capacitor és az Angular használatával

Telepítse az Ionicot és a Cordova-Res-t a következő paranccsal a parancssorban:

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

Hozzon létre egy Ionic Angular-alkalmazást a Tabs alkalmazássablon használatával, és adja hozzá a Kondenzátort a parancs beírásával:

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

Váltás az alkalmazásmappára:

cd photo-gallery

Összetevők hozzáadása az alkalmazás PWA-vá alakításához:

npm install @ionic/pwa-elements

A(z) @ionic/pwa-elements importálásához adja hozzá a következőket a src/main.ts fájlhoz:

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

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

Futtassa az alkalmazást a webböngészőben:

ionic serve

További információért tekintse meg az Ionic Capacitor Angular-dokumentációt. Látogasson el az Ionic dokumentáció Az Angular-alkalmazás PWA- szekciójára, hogy megtudja, miként változtathatja alkalmazását hibridről PWA-vá.

Új projekt létrehozása az Ionic és a React használatával

Telepítse az Ionic CLI-t a parancssorba az alábbiak beírásával:

npm install -g @ionic/cli

Hozzon létre egy új projektet a React használatával a következő paranccsal:

ionic start myApp blank --type=react

Váltás az alkalmazásmappára:

cd myApp

Futtassa az alkalmazást a webböngészőben:

ionic serve

További információért lásd a Ionic React dokumentációt. Látogasson el az Ionic dokumentáció Making your React app a PWA szakaszába, hogy megtudja, hogyan alakíthatja át alkalmazását hibridről PWA-vá.

Ionic-alkalmazás tesztelése eszközön vagy emulátoron

Az Ionic-alkalmazás Android-eszközön való teszteléséhez csatlakoztassa az eszközét (győződjön meg arról, hogy először engedélyezve van a fejlesztési célra), majd írja be ezt a parancssorba:

ionic cordova run android

Az Ionic-alkalmazás Android-eszközemulátoron való teszteléséhez a következőt kell tennie:

1. Telepítse a szükséges összetevőket – Java Development Kit (JDK), Gradle és Android SDK.

2. Android rendszerű virtuális eszköz (AVD) létrehozása: Lásd az [Android fejlesztői útmutató]](https://developer.android.com/studio/run/managing-avds.html) című cikket.

3. Adja meg az Ionic parancsot az alkalmazás emulátorban való létrehozásához és üzembe helyezéséhez: ionic cordova emulate [<platform>] [options]. Ebben az esetben a parancsnak a következőnek kell lennie:

ionic cordova emulate android --list

További információért tekintse meg a Cordova Emulatort az Ionic-dokumentációban.