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

说明与用途

使用 Capacitor/Cordova 构建的混合移动应用在将原生 UI 元素和原生广告与 Web 内容集成时，曾出现视觉和交互不一致的问题。通过使用 @rdlabo/capacitor-native-ui、Cordova 插件和“Projection”技术，开发者实现了原生 UI 与广告的无缝共存，提供了流畅的用户体验。

问题

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.

结果

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.

工作流

• 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.

证据

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.

来源

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.

来源

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.”

来源