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.

Источник