How to efficiently implement feed UI of mixed HTML and native panels?

Issue

I want to implement an app who's main view is something like a heterogenous Twitter feed -- some of the cards in the feed will be rendered HTML, others will be rendered natively. Why:

• provide a native look and feel
• provide some openGL sexyness
• ensure that the feed window itself is NOT a webview and managed natively to avoid HTML-jitter-suck)
• ensure that new type of content can be pushed to the app without requiring an app update.

I suspect having very many independent webview components will be very expensive, particularly since each HTML card will share a common set of CSS and JS.

So, is there a way to optimize for this case? Because I have many HTML cards, I'd like them to share common resources. For example can a WebView support multiple DOM windows, each of which can be targeted to a separate Android panel in my feed view? (or can I share a HTML execution component between multiple WebViews?)

Like this...

(NB. the HTML cards all contain interactive elements -- rendering as images does not help)

Can share single webkit WebViewClient for multiple WebViews?

Solution

As far as I know, no, you can't use a single WebView to provide multiple physical views.

However, what you describe looks like cards in a RecyclerView (what you describe as 'native container'). In that case, you're only ever going to have as many WebViews as there are visible cards (plus, perhaps 2 buffered offscreen), so only a few at a time, not hundreds.

You might be able to save some rendering time if necessary by re-using a small set of WebViews, re-assigning them to item UIs during the adapter's bind phase.

And yes, you certainly can share a single WebViewClient among multiple WebViews - that's why virtually all of WebViewClient's methods have the WebView as the first parameter.

Answered By - GreyBeardedGeek