Hybrid App: What It Is, Hybrid Applications and WebView

What Is a Hybrid App

Hybrid App is a mobile application that uses a native shell to run web content through the WebView component. The user installs the app from the App Store or Google Play, sees an icon on the home screen and launches it like any regular app, but inside an HTML page runs, loaded locally or from a server. Unlike PWA (Progressive Web App), a hybrid app is distributed through app stores and can use native device features via plugins.

The history of hybrid development began in 2009 with PhoneGap — a project by Nitobi Software that later became Apache Cordova (2011). PhoneGap allowed packaging an HTML/CSS/JS application into a native shell for iOS and Android. In 2013, Ionic Framework emerged — a layer on top of Cordova with UI components in Material Design and iOS style. In 2017, Ionic introduced Capacitor — a replacement for Cordova with a more modern architecture and PWA support. As of 2025, Ionic/Capacitor is used in 45% of hybrid projects, Cordova in 35%, and the rest — Framework7, Onsen UI and others.

Hybrid App architecture includes four layers. Presentation Layer — the HTML/CSS/JS application code. Framework Layer — Angular/React/Vue (for Ionic) or plain JS (for Cordova). Bridge Layer — Cordova/Capacitor plugins providing access to native APIs via a JavaScript interface. Native Shell — a WKWebView (iOS) or WebView (Android) wrapper compiled into a native application. Data is transferred between JS and native code via JSON serialization: JS calls a plugin, the plugin executes native code and returns the result as a Promise or callback.

WebView: How the Browser Engine Works in an App

WebView is an embeddable browser component that allows displaying web pages inside a mobile app without opening a separate browser. iOS uses WKWebView (WebKit, the same engine as Safari), Android uses WebView (based on Chromium, updated via Google Play). Unlike a browser, WebView in a hybrid app hides the address bar, navigation buttons and other controls, creating the illusion of a native interface.

WebView performance depends on the operating system version and the device. Modern WKWebView (iOS 14+) uses JIT-compiled JavaScript, achieving JS execution speed up to 80% of native Swift code. Android WebView (based on Chromium 120+) uses the V8 JavaScript Engine with TurboFan and Ignition optimizations, providing JavaScript performance comparable to desktop Chrome. However, rendering a complex DOM (1000+ elements) can yield 25–35 fps vs 60 fps for native UI — the main bottleneck of the hybrid approach.

WebView limitations: file system access is limited by the app sandbox; CORS configuration is required for requests to external APIs; some HTML5 APIs (fullscreen mode, Service Workers) work unreliably; embedded content size should not exceed 100–200 MB for fast loading. On iOS, WKWebView does not support HTTP cookies to the same extent as Safari — synchronization via JavaScript is required.

Cordova vs Ionic: Framework Comparison

Apache Cordova and Ionic Framework are the two main hybrid development tools that are often confused. Cordova is a wrapper platform that compiles HTML/CSS/JS into a native app and provides a JavaScript API for accessing native features (camera, GPS, accelerometer, file system). Ionic is a UI framework built on top of Cordova (or Capacitor) that adds interface components, navigation, form handling and themes.

Architecture differences: Cordova does not impose an app structure or UI framework — the developer can use any JS framework (Vanilla JS, jQuery, React, Vue). Ionic, on the other hand, provides a ready-made ecosystem with Angular (default), React or Vue, including a routing system, services, directives and UI components (cards, buttons, modals, tabs). Capacitor — Cordova's successor from the Ionic team — uses native APIs directly via Swift/Kotlin rather than through the legacy WebView → JavaScript Bridge, which improves the performance of native function access.

Capacitor vs Cordova: Capacitor is an evolutionary replacement for Cordova. The difference: Capacitor uses direct native code calls (Swift/Kotlin) instead of WebView → JavaScript Bridge, speeding up API access by 3–5 times. Capacitor supports PWA mode (one codebase for store and web), has built-in CI/CD integration and greater performance. Cordova remains relevant for legacy projects and apps with many old plugins.

Code Example: Hybrid App in JS/HTML

Let's look at a minimal hybrid app on Cordova with plain JavaScript. The app receives GPS data via a native plugin and displays it on an HTML page.

<!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 — hybrid app logic
// Waiting for Cordova to load
document.addEventListener('deviceready', function() {
    console.log('Cordova is ready');
}, false);

// Getting GPS coordinates via native plugin
function getLocation() {
    navigator.geolocation.getCurrentPosition(
        // Success callback
        function(position) {
            document.getElementById('latitude').innerText = position.coords.latitude;
            document.getElementById('longitude').innerText = position.coords.longitude;
        },
        // Error callback
        function(error) {
            alert('GPS error: ' + error.message);
        },
        // Options
        { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
    );
}

// Working with the camera via Cordova plugin
function takePhoto() {
    navigator.camera.getPicture(
        function(imageData) {
            var img = document.getElementById('photo');
            img.src = 'data:image/jpeg;base64,' + imageData;
        },
        function(error) {
            console.error('Camera error: ' + error);
        },
        { quality: 50, destinationType: Camera.DestinationType.DATA_URL }
    );
}

Key points: deviceready — a Cordova event signaling that native plugins are ready; navigator.geolocation — a JavaScript API that calls the native GPS module via Cordova Bridge; navigator.camera — a camera plugin that returns an image in base64 format. All code runs in WebView as a regular web page, but with access to native functions via plugins. For publishing, the app is compiled via Cordova CLI into APK/AAB (Android) or IPA (iOS): cordova build android or cordova build ios.

When to Choose the Hybrid Approach

The hybrid approach is justified in scenarios where development speed matters more than performance: MVPs and prototypes (time to market in 2–3 months instead of 4–6), internal corporate apps, apps with simple UI (catalogs, news feeds, directories, forms), apps where the design changes more than once a month (server-side update without store publishing via Hot Code Push). The hybrid approach is also chosen when the team consists of web developers with no native development experience.

When the hybrid approach is NOT suitable: games and apps with high frame rate requirements (60 fps animation, 3D graphics), apps with intensive real-time camera use (AR, video calls), financial and medical apps with security and certification requirements, apps with deep platform integration (Bluetooth LE, NFC, HealthKit, Apple Pay, Google Pay). In these cases, native or cross-platform development (Flutter, React Native) will deliver better results.

Notable hybrid apps: Untappd (beer enthusiast app, Cordova), Sworkit (fitness tracker, Ionic), Pacifica (meditation and psychology, Ionic), JustWatch (streaming catalog, Cordova), MarketWatch (financial news, Cordova). These apps use the hybrid approach for cross-platform delivery with minimal costs, while their functionality does not require maximum graphics performance.