I Didn’t Want “Built with Web Tech” to Mean Compromise [Capacitor/Cordova]

Description and use

Hybrid mobile apps built with Capacitor/Cordova struggled to integrate native UI elements and native ads with web content, causing visual and interaction inconsistencies. By using @rdlabo/capacitor-native-ui, a Cordova plugin, and a “Projection” technique, the developer achieved seamless coexistence of native UI and ads, delivering a smooth user experience.

Problem

Hybrid mobile apps built with Capacitor/Cordova struggle to integrate native UI elements and native ads seamlessly with web content, causing visual and interaction inconsistencies.

Outcome

Native UI elements and native ads can now coexist with web content in Capacitor/Cordova apps, providing a seamless user experience without visual or interaction glitches.

Workflow

• 1. Identify Ionic or plain HTML components that should be rendered natively.
• 2. Use @rdlabo/capacitor-native-ui to read component definitions and render native counterparts with UIKit/SwiftUI.
• 3. For native ads, integrate Google Mobile Ads SDK and render ads between web posts, synchronizing scroll behavior.
• 4. Apply the Projection technique: capture a snapshot of the native view, display it in the web layer, temporarily show the same image on the native side during handoff, then remove the native image once the web image appears.
• 5. Adjust layout for device-specific UI (e.g., iPhone Duo vertical bars) by moving native navigation to sides and reserving space in web content.

Evidence

I built @rdlabo/capacitor-native-ui to use this native UI alongside web content. It reads supported Ionic components and renders their native counterparts with UIKit and SwiftUI.

Source

Native ads that scroll with the posts. The posts and photos are web content; the ads between them are rendered by the Google Mobile Ads SDK.

Source

The native UI itself doesn't need to enter the DOM. Only its appearance does. That realization was a thrill. I call the approach “Projection.”

Source