Hybrid App: co to je, hybridní aplikace a WebView

Co je Hybrid App

Hybrid App — je mobilní aplikace, která používá nativní shell ke spouštění webového obsahu prostřednictvím komponenty WebView. Uživatel nainstaluje aplikaci z App Store nebo Google Play, vidí ikonu na ploše a spouští ji jako běžnou aplikaci, ale uvnitř běží HTML stránka načtená lokálně nebo ze serveru. Na rozdíl od PWA (Progressive Web App) je hybridní aplikace distribuována prostřednictvím obchodů s aplikacemi a může využívat nativní funkce zařízení prostřednictvím pluginů.

Historie hybridního vývoje začala v roce 2009 s PhoneGap — projektem Nitobi Software, který se později stal Apache Cordova (2011). PhoneGap umožňoval zabalit HTML/CSS/JS aplikaci do nativního shellu pro iOS a Android. V roce 2013 se objevil Ionic Framework — vrstva nad Cordovou s komponentami UI ve stylu Material Design a iOS. V roce 2017 Ionic představil Capacitor — náhradu za Cordovu s modernější architekturou a podporou PWA. K roku 2025 se Ionic/Capacitor používá ve 45 % hybridních projektů, Cordova — ve 35 %, zbytek — Framework7, Onsen UI a další.

Architektura Hybrid App zahrnuje čtyři vrstvy. Presentation Layer — HTML/CSS/JS kód aplikace. Framework Layer — Angular/React/Vue (pro Ionic) nebo čistý JS (pro Cordovu). Bridge Layer — pluginy Cordova/Capacitor, které zajišťují přístup k nativním API přes JavaScript rozhraní. Native Shell — obal WKWebView (iOS) nebo WebView (Android), zkompilovaný do nativní aplikace. Data jsou přenášena mezi JS a nativním kódem přes JSON serializaci: JS zavolá plugin, plugin provede nativní kód a vrátí výsledek jako Promise nebo callback.

WebView: jak funguje prohlížečový engine v aplikaci

WebView — je vložitelná komponenta prohlížeče, která umožňuje zobrazovat webové stránky uvnitř mobilní aplikace bez otevření samostatného prohlížeče. Na iOS se používá WKWebView (WebKit, stejný engine jako v Safari), na Androidu — WebView (založený na Chromium, aktualizovaný přes Google Play). Na rozdíl od prohlížeče WebView v hybridní aplikaci skrývá adresní řádek, navigační tlačítka a další ovládací prvky, čímž vytváří iluzi nativního rozhraní.

Výkon WebView závisí na verzi operačního systému a zařízení. Moderní WKWebView (iOS 14+) používá JIT kompilaci JavaScriptu a dosahuje rychlosti provádění JS až 80 % nativního Swift kódu. Android WebView (založený na Chromium 120+) používá V8 JavaScript Engine s optimalizacemi TurboFan a Ignition, poskytující výkon JavaScriptu srovnatelný s desktopovým Chrome. Vykreslování komplexního DOM (1000+ prvků) však může dosahovat 25–35 fps oproti 60 fps u nativního UI — hlavní úzké hrdlo hybridního přístupu.

Omezení WebView: přístup k souborovému systému je omezen Sandboxem aplikace; je vyžadována konfigurace CORS pro požadavky na externí API; některá HTML5 API (režim celé obrazovky, Service Workers) pracují nestabilně; velikost vloženého obsahu by neměla překročit 100–200 MB pro rychlé načtení. Na iOS WKWebView nepodporuje HTTP cookies ve stejném rozsahu jako Safari — je vyžadována synchronizace přes JavaScript.

Cordova vs Ionic: srovnání frameworků

Apache Cordova a Ionic Framework — jsou dva hlavní nástroje hybridního vývoje, které jsou často zaměňovány. Cordova je platformový obal, který kompiluje HTML/CSS/JS do nativní aplikace a poskytuje JavaScript API pro přístup k nativním funkcím (kamera, GPS, akcelerometr, souborový systém). Ionic je UI framework, postavený nad Cordovou (nebo Capcitorem), který přidává komponenty rozhraní, navigaci, práci s formuláři a designová témata.

Architektonické rozdíly: Cordova nevnucuje strukturu aplikace ani UI framework — vývojář může použít jakýkoli JS framework (Vanilla JS, jQuery, React, Vue). Ionic naopak poskytuje hotový ekosystém s Angular (výchozí), React nebo Vue, včetně systému routování, služeb, direktiv a UI komponent (karty, tlačítka, modální okna, záložky). Capacitor — nástupce Cordovy od týmu Ionic — používá nativní API přímo přes Swift/Kotlin, nikoli přes zastaralý WebView → JavaScript Bridge, což zvyšuje výkon přístupu k nativním funkcím.

Capacitor vs Cordova: Capacitor — evoluční náhrada Cordovy. Rozdíl: Capacitor používá přímé volání nativního kódu (Swift/Kotlin) místo WebView → JavaScript Bridge, což zrychluje přístup k API 3–5krát. Capacitor podporuje režim PWA (jedna kódová základna pro obchod a web), má vestavěnou integraci s CI/CD a vyšší výkon. Cordova zůstává relevantní pro legacy projekty a aplikace s velkým množstvím starých pluginů.

Příklad kódu: hybridní aplikace v JS/HTML

Podívejme se na minimální hybridní aplikaci na Cordově s čistým JavaScriptem. Aplikace získává GPS data přes nativní plugin a zobrazuje je na HTML stránce.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, width=device-width">
    <title>GPS Trackertitle>
    <link rel="stylesheet" href="style.css">
head>
<body>
    <div id="app">
        <h1>GPS Locationh1>
        <p>Latitude: <span id="latitude">--span>p>
        <p>Longitude: <span id="longitude">--span>p>
        <button onclick="getLocation()">Get GPS Positionbutton>
    div>
    <script src="cordova.js">script>
    <script src="js/app.js">script>
body>
html>

// js/app.js — logika hybridní aplikace
// Čekání na načtení Cordovy
document.addEventListener('deviceready', function() {
    console.log('Cordova je připravena k práci');
}, false);

// Získání GPS souřadnic přes nativní plugin
function getLocation() {
    navigator.geolocation.getCurrentPosition(
        // Callback úspěchu
        function(position) {
            document.getElementById('latitude').innerText = position.coords.latitude;
            document.getElementById('longitude').innerText = position.coords.longitude;
        },
        // Callback chyby
        function(error) {
            alert('Chyba GPS: ' + error.message);
        },
        // Možnosti
        { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
    );
}

// Práce s kamerou přes plugin Cordova
function takePhoto() {
    navigator.camera.getPicture(
        function(imageData) {
            var img = document.getElementById('photo');
            img.src = 'data:image/jpeg;base64,' + imageData;
        },
        function(error) {
            console.error('Chyba kamery: ' + error);
        },
        { quality: 50, destinationType: Camera.DestinationType.DATA_URL }
    );
}

Klíčové body: deviceready — událost Cordovy signalizující připravenost nativních pluginů; navigator.geolocation — JavaScript API volající nativní GPS modul přes Cordova Bridge; navigator.camera — plugin kamery vracející obrázek ve formátu base64. Celý kód běží ve WebView jako běžná webová stránka, ale s přístupem k nativním funkcím přes pluginy. Pro publikaci je aplikace zkompilována přes Cordova CLI do APK/AAB (Android) nebo IPA (iOS): cordova build android nebo cordova build ios.

Kdy zvolit hybridní přístup

Hybridní přístup je opodstatněný ve scénářích, kde je rychlost vývoje důležitější než výkon: MVP a prototypy (vstup na trh za 2–3 měsíce místo 4–6), interní podnikové aplikace, aplikace s jednoduchým UI (katalogy, zpravodajské kanály, příručky, formuláře), aplikace, jejichž design se mění častěji než jednou za měsíc (aktualizace přes server bez publikace v obchodě pomocí Hot Code Push). Hybridní přístup se také volí, když tým tvoří weboví vývojáři bez zkušeností s nativním vývojem.

Kdy hybridní přístup NENÍ vhodný: hry a aplikace s vysokými nároky na snímkovou frekvenci (60 fps animace, 3D grafika), aplikace s intenzivním používáním kamery v reálném čase (AR, videohovory), finanční a lékařské aplikace s požadavky na zabezpečení a certifikaci, aplikace s hlubokou platformovou integrací (Bluetooth LE, NFC, HealthKit, Apple Pay, Google Pay). V těchto případech poskytne nativní nebo multiplatformní vývoj (Flutter, React Native) lepší výsledek.

Známé hybridní aplikace: Untappd (aplikace pro milovníky piva, Cordova), Sworkit (fitness tracker, Ionic), Pacifica (meditace a psychologie, Ionic), JustWatch (katalog streamovacích služeb, Cordova), MarketWatch (finanční zprávy, Cordova). Tyto aplikace používají hybridní přístup pro multiplatformní doručení s minimálními náklady a jejich funkčnost nevyžaduje maximální grafický výkon.