Takéhybrid mobile app, WebView aplikace, hybridní mobilní appkaPokročilý
Definice
Hybridní aplikace je aplikace kombinující webové technologie, například HTML, CSS a JavaScript, s nativním obalem pro konkrétní platformu. Uživatel ji obvykle instaluje jako běžnou mobilní aplikaci, ale část rozhraní a logiky běží ve WebView nebo podobné vrstvě. Výhodou je sdílení kódu, kompromisem výkon a integrace se systémem.
Webový kód uvnitř nativního balíčku
Hybridní aplikace spojuje webové rozhraní s distribučním modelem nativní aplikace. Vývojový tým obvykle napíše velkou část obrazovek v HTML, CSS a JavaScriptu a výsledný webový balíček vloží do nativního kontejneru pro iOS, Android nebo desktop. Kontejner zajišťuje ikonu, instalaci, oprávnění, spuštění ze systému a publikaci v obchodě s aplikacemi.
WebView je vykreslovací vrstva, ve které běží webová část. Nativní část může doplnit most mezi JavaScriptem a funkcemi zařízení, třeba kamerou, úložištěm, geolokací nebo push notifikacemi. Hybridní přístup proto není prosté zabalení webu do okna. Kvalitní aplikace musí řešit stav aplikace, offline režim, aktualizace, výkon a rozdíly mezi platformami.
Kde hybrid ušetří vývoj a kde přidá vrstvu navíc
Hybridní aplikace bývá atraktivní, když má produkt podobné obrazovky na webu i v mobilu. Sdílený kód zrychlí dodávání funkcí, sjednotí vizuální systém a zmenší počet specializovaných týmů. Výhoda je výrazná u formulářů, katalogů, interních nástrojů, zákaznických portálů a aplikací, kde nejde o extrémní grafiku nebo velmi nízkou latenci.
Dodatečná vrstva má cenu. Animace mohou být citlivější na výkon WebView, integrace se systémem závisí na pluginech a ladění chyb někdy zahrnuje webový kód, nativní obal i konkrétní verzi operačního systému. Projekt proto potřebuje disciplínu podobnou webové aplikaci i mobilnímu vývoji. Podrobnější rozhodování mezi nativním přístupem a Capacitor modelem rozebírá článek Nativní aplikace vs. Capacitor.
Přístup k zařízení není samozřejmý
Hybridní aplikace může používat hardware telefonu, ale cesta vede přes oprávnění, pluginy a bezpečnostní pravidla platformy. Kamera, soubory, biometrie nebo NFC nemusí mít stejné chování na všech zařízeních. Vývojový tým musí počítat s testováním na reálných telefonech, protože desktopový prohlížeč neodhalí všechny rozdíly WebView.
Bezpečnostní hranice je také důležitá. Webový kód nesmí nekontrolovaně volat citlivé nativní funkce a nativní most by měl povolovat jen přesně definované operace. U platebních nebo klientských aplikací se navíc řeší ochrana tokenů, bezpečné úložiště a pravidla obchodů s aplikacemi.
Dva konkrétní scénáře
Interní servisní aplikace pro techniky
Servisní firma má webový portál pro zakázky a chce rychle mobilní aplikaci pro techniky v terénu. Hybridní aplikace znovu použije formuláře, přidá přístup ke kameře pro fotky závad a uloží rozpracovaný protokol při výpadku signálu. Výsledkem je kratší vývoj, ale tým musí otestovat offline synchronizaci a práci s velkými fotografiemi.
{
"appId": "cz.firma.servis",
"appName": "Servis",
"webDir": "dist"
}E-shop s věrnostní kartou
E-shop chce aplikaci kvůli push notifikacím a věrnostní kartě, ale katalog a košík už má stabilně postavené jako web. Hybridní aplikace vloží nákupní rozhraní do mobilního obalu a nativně doplní čtečku čárového kódu na prodejně. Dopad je rychlé uvedení do obchodů, zatímco složitější částí zůstane plynulost košíku a přihlášení mezi webem a aplikací.
Rozhodnutí podle rizika produktu
Hybridní aplikace dává smysl, když obchodní hodnota leží ve sdíleném obsahu, formulářích a rychlých iteracích. Nativní vývoj bývá lepší pro hry, náročnou grafiku, hlubokou integraci se systémem nebo aplikace, kde každá milisekunda ovlivňuje uživatelský zážitek. Správná volba proto nevychází z popularity frameworku, ale z požadavků na výkon, dostupnost funkcí zařízení, týmové znalosti a dlouhodobou údržbu.
Příklady z praxe
Interní servisní aplikace pro techniky
Servisní firma má webový portál pro zakázky a chce rychle mobilní aplikaci pro techniky v terénu. Hybridní aplikace znovu použije formuláře, přidá přístup ke kameře pro fotky závad a uloží rozpracovaný protokol při výpadku signálu. Výsledkem je kratší vývoj, ale tým musí otestovat offline synchronizaci a práci s velkými fotografiemi.
{ "appId": "cz.firma.servis", "appName": "Servis", "webDir": "dist" }E-shop s věrnostní kartou
E-shop chce aplikaci kvůli push notifikacím a věrnostní kartě, ale katalog a košík už má stabilně postavené jako web. Hybridní aplikace vloží nákupní rozhraní do mobilního obalu a nativně doplní čtečku čárového kódu na prodejně. Dopad je rychlé uvedení do obchodů, zatímco složitější částí zůstane plynulost košíku a přihlášení mezi webem a aplikací.
Časté omyly
- MýtusHybridní aplikace je jen web otevřený v mobilním okně.
- Ve skutečnostiHybridní aplikace může vypadat podobně jako web ve WebView, ale produkční řešení obvykle obsahuje nativní obal, oprávnění, pluginy, správu aktualizací a integraci se systémem. Kvalita závisí na architektuře, ne jen na způsobu zobrazení.
- MýtusHybridní aplikace je vždy pomalá a nepoužitelná pro seriózní produkt.
- Ve skutečnostiHybridní aplikace může být dostatečně rychlá pro mnoho obchodních, obsahových a interních scénářů. Slabé místo vzniká hlavně u náročné grafiky, velmi jemných animací a hluboké platformní integrace.
Časté dotazy
- Kdy hybridní aplikace dává větší smysl než nativní vývoj?
- Hybridní aplikace dává větší smysl než nativní vývoj, když aplikace pracuje hlavně s obsahem, formuláři, katalogem, účtem uživatele nebo administrací a nevyžaduje špičkový grafický výkon. Sdílení webového kódu může zrychlit vývoj a snížit náklady. Nativní vývoj bývá vhodnější, když aplikace intenzivně používá hardware, složité animace, práci na pozadí nebo funkce dostupné jen přes platformní API.
- Proč může hybridní aplikace působit pomaleji při animacích?
- Hybridní aplikace může působit pomaleji, protože část rozhraní běží ve WebView a ne přímo v nativních UI komponentách platformy. Rozdíl se projeví hlavně u dlouhých seznamů, složitých animací, map, grafů nebo slabších zařízení. Dobrá optimalizace webového kódu, omezení zbytečných překreslení a testování na reálných telefonech mohou výkon výrazně zlepšit, ale úplně neodstraní všechny limity této vrstvy.
- Může hybridní aplikace projít schvalováním v App Store a Google Play?
- Hybridní aplikace může být publikovaná v App Store i Google Play, pokud splní technická, bezpečnostní a obsahová pravidla konkrétního obchodu. Samotné použití WebView obvykle není problém. Problém může nastat, když aplikace jen kopíruje web bez přidané hodnoty, obchází pravidla plateb, stahuje neschválený spustitelný kód nebo žádá oprávnění bez jasného důvodu.
- Jak hybridní aplikace souvisí s PWA?
- Hybridní aplikace a PWA používají podobné webové technologie, ale liší se distribučním a integračním modelem. PWA běží primárně v prohlížeči nebo jako instalovatelná webová aplikace. Hybridní aplikace je zabalena do nativního balíčku, může být v obchodě s aplikacemi a přes nativní most často získá přístup k funkcím zařízení, které běžný web nemusí mít dostupné stejně.
Zdroje
- Progressive web apps(otevře se v novém okně)
- Web APIs(otevře se v novém okně)
- HTML Standard(otevře se v novém okně)
- ASP.NET Core Blazor Hybrid(otevře se v novém okně)
Související pojmy
