{"id":114,"date":"2022-10-18T09:54:22","date_gmt":"2022-10-18T09:54:22","guid":{"rendered":"https:\/\/blogs.igalia.com\/jkim\/?p=114"},"modified":"2022-10-26T10:49:50","modified_gmt":"2022-10-26T10:49:50","slug":"a-webview-tag-in-chromium","status":"publish","type":"post","link":"https:\/\/blogs.igalia.com\/jkim\/2022\/10\/18\/a-webview-tag-in-chromium\/","title":{"rendered":"A <webview> tag in Chromium"},"content":{"rendered":"\nI often talk about a webview as a common term. For instance, when I worked on AGL<\/a> project, we integrated Web Runtime<\/a> in order to support a webview to native applications from AGL like Android WebView. However, I wasn\u2019t aware of <webview> tag implementation for a web page in Chromium.

\n\n\n\n\n

<webview><\/em><\/h2>\n\n\n\n\n<webview> is a tag that Chromium Apps and chrome:\/\/\u2026 pages could use.

\n\n\n\nChromium has some samples using <webview><\/a> for testing. I launched one of these examples with some modification to include <div> at the same level with a <webview>.

\n\n\n\n
\"\"<\/figure>\n\n\n\nThe green box is a <webview> and the blue box is <div>.\n\n\n\n
\"\"<\/figure>\n\n\n\nA web page includes <webview> that has another web page inside it. Note that a <webview> tag is not a standard and it\u2019s used for Chrome Apps and chrome:\/\/ pages.


\n\n\n\n\n

WebContents is
<\/h2>\n\n\n\n\n\n
A reusable component that is the main class of the Content module. It’s easily embeddable to allow multiprocess rendering of HTML into a view. <\/p><\/blockquote>\n\n\n\n\nThis image shows the conceptual application layers in Chromium.\n\n\n\n
\"\"\n\n
https:\/\/www.chromium.org\/developers\/design-documents\/displaying-a-web-page-in-chrome\/<\/a><\/figcaption>\n\n<\/figure>\n\n\n\nWhen we open a web page in Chromium, you can imagine that Chromium creates a WebContents and it shows us the rendered web page.


\n\n\n\n\n

Current implementation<\/h2>\n\n\n\n\nWhen <webview> exists in a web page, how does it work and where is it located on these layers from the image above?

\n\n\n\nBased on the current implementation, WebContents can have inner WebContents. Chromium implements a <webview> tag with a GuestVIew<\/a> which is the templated base class for out-of-process frames in the chrome layer. A GuestView maintains an association between a guest WebContents and an owner WebContents.

\n\n\n\n
\"\"<\/figure>\n\n\n\nFor a <webview> interface at Javascript, Chromium has custom bindings. When a <webview> tag is attached, the API connected by the custom bindings is called from the renderer. The request for attaching it is sent to the browser through Mojo interface<\/a>.


\n\n\n\n\n
interface GuestViewHost {\n\/\/ We have a RenderFrame with routing id of |embedder_local_frame_routing_id|.\n\/\/ We want this local frame to be replaced with a remote frame that points\n\/\/ to a GuestView. This message will attach the local frame to the guest.\n\/\/ The GuestView is identified by its ID: |guest_instance_id|.\n AttachToEmbedderFrame(\n     int32 embedder_local_frame_routing_id,\n     int32 element_instance_id,\n     int32 guest_instance_id,\n     mojo_base.mojom.DictionaryValue params) => ();<\/pre>\n\n\n\n\nIt triggers WebContentsImpl::AttachInnerWebContents()<\/strong> to attach the inner WebContents to the outer WebContents.

\n\n\n\nChromium has also another type of GuestView internally. That is MimeHandlerViewGuest<\/a> to handle mime types from tags such as <object> or <embed>. For instance, if <embed> tag is linked to pdf file, it\u2019s also managed by a GuestView.


\n\n\n\n\n
MPArch<\/h2>\n\n\n\n\nThese days I\u2019m working on MPArch, that 
\n\n\n\n\n
\u2022 enables one WebContents to host multiple (active \/ inactive, visible \/ invisible) pages.\n\nfrom MPArch document<\/a><\/p><\/blockquote>\n\n\n\n\nFor the detail for MPArch, you could refer to this blog post, ‘MPArch(Multiple Page Architecture) project in Chromium<\/a>‘.

\n\n\n\nAs a GuestView is implemented with a Multiple-WebContents model, it\u2019s also considered for MPArch. 
After working on Prerendering and fenced frames intensively<\/a>, our team started to migrate GuestView tests in order to avoid direct access to WebContents and manage it based on RenderFrameHost.
Once we have some progress regarding GuestView, I hope we could share the status, as well.


\n\n\n\nWe’re hiring. https:\/\/www.igalia.com\/jobs\/<\/a>


\n","protected":false},"excerpt":{"rendered":"
I often talk about a webview as a common term. For instance, when I worked on AGL project, we integrated Web Runtime in order to support a webview to native applications from AGL like Android WebView. However, I wasn\u2019t aware … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":55,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[14,15,13],"class_list":["post-114","post","type-post","status-publish","format-standard","hentry","category-chromium","tag-guestview","tag-mparch","tag-webview"],"_links":{"self":[{"href":"https:\/\/blogs.igalia.com\/jkim\/wp-json\/wp\/v2\/posts\/114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.igalia.com\/jkim\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.igalia.com\/jkim\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.igalia.com\/jkim\/wp-json\/wp\/v2\/users\/55"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.igalia.com\/jkim\/wp-json\/wp\/v2\/comments?post=114"}],"version-history":[{"count":56,"href":"https:\/\/blogs.igalia.com\/jkim\/wp-json\/wp\/v2\/posts\/114\/revisions"}],"predecessor-version":[{"id":182,"href":"https:\/\/blogs.igalia.com\/jkim\/wp-json\/wp\/v2\/posts\/114\/revisions\/182"}],"wp:attachment":[{"href":"https:\/\/blogs.igalia.com\/jkim\/wp-json\/wp\/v2\/media?parent=114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.igalia.com\/jkim\/wp-json\/wp\/v2\/categories?post=114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.igalia.com\/jkim\/wp-json\/wp\/v2\/tags?post=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}