Projection: Real Native UI in WebViews

说明与用途

投影技术通过在模态窗口和滚动时将真实原生 UI 替换为图像，使其在 WebView 中无缝显示，从而提供统一的视觉和交互体验。

问题

WebView apps often recreate native UI in web code, but cannot truly integrate native components like tab bars or ads, leading to visual and interaction gaps.

结果

Projection allows native UI to appear within a WebView without duplication or interaction loss, improving visual consistency and user experience.

工作流

• 1. Detect when native UI is non‑interactive (modal open, scrolling starts).
• 2. Capture a snapshot of the native UI on the native side.
• 3. Temporarily display the snapshot on the native side to bridge handoff.
• 4. Send the image to the web side during idle time.
• 5. Render the image inside a DOM container (Web Projection).
• 6. Notify native side to remove temporary copy via requestAnimationFrame.
• 7. When interaction resumes, restore live native UI.
• 8. Synchronize scrolling positions so native ads follow web content and clip behind headers.

证据

Web content and native UI live in separate rendering layers.

来源

When a modal is open, you can't use the tab bar it covers.

来源

I capture the image on the native side and decode it on the web side during idle time, before the switch.

来源

The same idea works for scrolling. Switch to an image when scrolling starts, then back to the real view when it stops.

来源