search

WebView-CG / usage-and-challenges

Documenting usage scenarios for WebView and the challenges they create
https://webview-cg.github.io/usage-and-challenges/
Other
12 stars 4 forks source link

Render WebView Components and Native Components in same layer #17

Open QingAn opened 2 years ago

QingAn commented 2 years ago

Render WebView Components and Native Components in same layer

Submitter(s)

Qing An, Alibaba

Motivation

Hybrid Native/Webview App and MiniApp often use both WebView Components (text, label, button, image, etc.) and Native Components (such as video).

  1. Add a map: due to that developing a Web-based map component is difficult and not so good performance, developers may choose to use the Native map component. Usually, developers cover the WebView with the Native map component. But very often, the Native map will cover all the Web components rendered by WebView. And it is difficult to display one or several Web components on the Native map.
  2. Integrate a third-party content into WebView: from the business perspective, Native App needs to integrate third-party advertisements into the some App UI pages which are rendered by WebView. Many third-party advertisements are implemented based on Native components. How to integrate Native components with WebView smoothly?
  3. WebView interacts with Native component: developers have implemented a fancy UI page based on WebView, and then the WebView needs to use an extra Native component. How can the Native component interact with WebView smoothly? Like how to let Native component reuse the event handling and message interaction that have been implemented in WebView?

Unlike WebView Components, the Native Components are rendered by Native App instead of WebView. While Native Components can bring more features by complementing WebView Components, Native Components also bring issue for developers due to that Native rendering is independent of WebView rendering. Therefore, Native Component cannot be controlled by z-index property, and cannot overlap with WebView components, as illustrated below.

Without-same-layer-rendering

But if the Native Components can be rendered in the same layer of WebView Component, AKA in the WebView Layer, developers can easily control the Native Components as well as the overlapping with other WebView Components, as illustrated below.

With-same-layer-rendering

Stakeholders

Analysis

Currently, Native rendering is independent of WebView rendering. Therefore, Native Component cannot be controlled by z-index property, and cannot overlap with WebView components.

Related W3C deliverables and/or work items

N/A

How is the issue solved in the Browser, and what’s more is needed?

N/A

QingAn commented 2 years ago

To further explain this use cases, some scenarios are added. https://github.com/WebView-CG/usage-and-challenges/issues/17#issue-1262873372

  1. Add a map: due to that developing a Web-based map component is difficult and not so good performance, developers may choose to use the Native map component. Usually, developers cover the WebView with the Native map component. But very often, the Native map will cover all the Web components rendered by WebView. And it is difficult to display one or several Web components on the Native map.
  2. Integrate a third-party content into WebView: from the business perspective, Native App needs to integrate third-party advertisements into the some App UI pages which are rendered by WebView. Many third-party advertisements are implemented based on Native components. How to integrate Native components with WebView smoothly?
  3. WebView interacts with Native component: developers have implemented a fancy UI page based on WebView, and then the WebView needs to use an extra Native component. How can the Native component interact with WebView smoothly? Like how to let Native component reuse the event handling and message interaction that have been implemented in WebView?
QingAn commented 2 years ago

As discussed in 2022-07-6 meeting, we agree this is a valid use case. Next would be to collect the current practices and see whether it can inspire us on the solution.