Skip to content

Diagram relation of WebView2 control, SDK, & Runtime #2450

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 69 commits into
base: main
Choose a base branch
from

Conversation

mikehoffms
Copy link
Collaborator

@mikehoffms mikehoffms commented Feb 17, 2023

* User machine
* Resources

![Full diagram of WebView2](./index-images/full-diagram.png)
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nishitha-burman @peiche-jessica - pls review diagram:

.png link:
https://github.com/mikehoffms/edge-developer/blob/user/mikehoffms/wv2-intro-diagram/microsoft-edge/webview2/index-images/full-diagram.png

gh rendered:
https://github.com/mikehoffms/edge-developer/blob/user/mikehoffms/wv2-intro-diagram/microsoft-edge/webview2/index.md#full-diagram-of-webview2

eg how to describe relation of right-side blocks:

Native-side code | Web-side code

Native control instances | WebView2 control instances

Native-side code includes:

  • Code that's related to WebView2
  • Code that's not related to WebView2

@mikehoffms mikehoffms marked this pull request as ready for review March 31, 2023 00:36
| Resources | The present documentation; the WebView2Samples repo including basic Getting Started WebView2 projects and more full-featured Sample projects; the WebView2Announcements repo; and the WebView2Feedback repo. |


<!-- todo: like the above table, talk through each box of the full diagram: -->
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

talk through each box of the full diagram

* WebView2 control instances -- web content areas of your app. The app's web-side code runs in this control.
* Native control instances -- native controls and panes of your app.
* WebView2 SDK
* Per-platform WebView2 APIs <!-- todo: add to diagram --> including CoreWebView2, CoreWebView2Controller, CoreWebView2Environment. Primarily called by native-side code.
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add to diagram "Per-platform WebView2 APIs"

* Per-platform WebView2 APIs <!-- todo: add to diagram --> including CoreWebView2, CoreWebView2Controller, CoreWebView2Environment. Primarily called by native-side code.
* `AddHostObjectToScript` -- enables exposing platform APIs and WebView2 APIs to JavaScript code.
* [JavaScript APIs](/microsoft-edge/webview2/webview2-api-reference#javascript) (WebView2Script package) -- called by web-side code to communicate with the host application.
* Platform APIs -- non-WebView2 APIs provided by the platform; can be exposed to web-side code. <!-- todo: add to diagram -->
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add to diagram: Platform APIs -- non-WebView2 APIs provided by the platform; can be exposed to web-side code.

<!-- ====================================================================== -->
## How the WebView2 SDK is laid out in relation to how the WebView2 Runtime is laid out

todo: what's the intention here?
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what's the intention of "How the WebView2 SDK is laid out in relation to how the WebView2 Runtime is laid out"?

<!-- ====================================================================== -->
## Differences in the Runtime and the SDK across the frameworks

todo
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add content in "Differences in the Runtime and the SDK across the frameworks"

@@ -67,11 +67,14 @@ For example:
## Scenario: Running a dedicated script file

In this section, you access a dedicated JavaScript file from your WebView2 control.
<!-- todo: clarify the scenario. from native code? "from" is ambiguous. is the file a web-side file?
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

clarify the scenario. from native code? "from" is ambiguous. is the file a web-side file?

@@ -67,11 +67,14 @@ For example:
## Scenario: Running a dedicated script file

In this section, you access a dedicated JavaScript file from your WebView2 control.
<!-- todo: clarify the scenario. from native code? "from" is ambiguous. is the file a web-side file?
what does "dedicated" mean? -->
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what does "dedicated" mean?

Copy link

Learn Build status updates of commit 7425f0d:

✅ Validation status: passed

File Status Preview URL Details
microsoft-edge/toc.yml ✅Succeeded View
microsoft-edge/webview2/concepts/browser-features.md ✅Succeeded View
microsoft-edge/webview2/concepts/data-privacy.md ✅Succeeded View
microsoft-edge/webview2/concepts/distribution.md ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/app-design.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/control-runtime-sdk.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/control-sdk-runtime.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/dev-side-user-side.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/distribute-runtime.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/full-diagram.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/hostapp-wv2ctrl-httpserver.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/resources.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/web-native.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/what-webview.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components-images/app-design.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components-images/control-runtime-sdk.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components-images/control-sdk-runtime.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components-images/dev-side-user-side.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components-images/distribute-runtime.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components-images/hostapp-wv2ctrl-httpserver.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components-images/resources.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components.md ✅Succeeded View
microsoft-edge/webview2/concepts/versioning.md ✅Succeeded View
microsoft-edge/webview2/how-to/context-menus.md ✅Succeeded View
microsoft-edge/webview2/how-to/debug-visual-studio-code.md ✅Succeeded View

This comment lists only the first 25 files in the pull request.
For more details, please refer to the build report.

For any questions, please:

Copy link

Learn Build status updates of commit dae5d12:

✅ Validation status: passed

File Status Preview URL Details
microsoft-edge/toc.yml ✅Succeeded View
microsoft-edge/webview2/concepts/browser-features.md ✅Succeeded View
microsoft-edge/webview2/concepts/data-privacy.md ✅Succeeded View
microsoft-edge/webview2/concepts/distribution.md ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/app-design.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/control-runtime-sdk.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/control-sdk-runtime.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/dev-side-user-side.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/distribute-runtime.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/full-diagram.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/hostapp-wv2ctrl-httpserver.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/resources.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/web-native.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/what-webview.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components-images/app-design.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components-images/control-runtime-sdk.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components-images/control-sdk-runtime.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components-images/dev-side-user-side.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components-images/distribute-runtime.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components-images/hostapp-wv2ctrl-httpserver.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components-images/resources.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components.md ✅Succeeded View
microsoft-edge/webview2/concepts/versioning.md ✅Succeeded View
microsoft-edge/webview2/how-to/context-menus.md ✅Succeeded View
microsoft-edge/webview2/how-to/debug-visual-studio-code.md ✅Succeeded View

This comment lists only the first 25 files in the pull request.
For more details, please refer to the build report.

For any questions, please:

Copy link

Learn Build status updates of commit 4cdbba7:

✅ Validation status: passed

File Status Preview URL Details
microsoft-edge/toc.yml ✅Succeeded View
microsoft-edge/webview2/concepts/browser-features.md ✅Succeeded View
microsoft-edge/webview2/concepts/data-privacy.md ✅Succeeded View
microsoft-edge/webview2/concepts/distribution.md ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/app-design.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/control-runtime-sdk.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/control-sdk-runtime.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/dev-side-user-side.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/distribute-runtime.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/full-diagram.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/hostapp-wv2ctrl-httpserver.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/resources.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/web-native.png ✅Succeeded View
microsoft-edge/webview2/concepts/intro-diagrams-images/what-webview.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components-images/app-design.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components-images/control-runtime-sdk.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components-images/control-sdk-runtime.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components-images/dev-side-user-side.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components-images/distribute-runtime.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components-images/hostapp-wv2ctrl-httpserver.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components-images/resources.png ✅Succeeded View
microsoft-edge/webview2/concepts/platform-components.md ✅Succeeded View
microsoft-edge/webview2/concepts/versioning.md ✅Succeeded View
microsoft-edge/webview2/how-to/context-menus.md ✅Succeeded View
microsoft-edge/webview2/how-to/debug-visual-studio-code.md ✅Succeeded View

This comment lists only the first 25 files in the pull request.
For more details, please refer to the build report.

For any questions, please:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cat: webview2 WebView-related content. in-progress
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants