You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -20,14 +20,14 @@ A web browser built with the [Microsoft Edge WebView2](https://aka.ms/webview2)
20
20
21
21
WebView2Browser is a sample Windows desktop application demonstrating the WebView2 control capabilities. It is built as a Win32 [Visual Studio 2019](https://visualstudio.microsoft.com/vs/) project and makes use of both C++ and JavaScript in the WebView2 environment to power its features.
22
22
23
-
WebView2Browser shows some of the simplest uses of WebView2 -such as creating and navigating a WebView, but also some more complex workflows like using the [PostWebMessageAsJson API](https://docs.microsoft.com/microsoft-edge/webview2/reference/win32/0-9-538/icorewebview2#postwebmessageasjson) to communicate WebViews in separate environments. It is intended as a rich code sample to look at how you can use WebView2 APIs to build your own app.
23
+
WebView2Browser shows some of the simplest uses of WebView2 -such as creating and navigating a WebView, but also some more complex workflows like using the [PostWebMessageAsJson API](https://docs.microsoft.com/microsoft-edge/webview2/reference/win32/0-9-622/icorewebview2#postwebmessageasjson) to communicate WebViews in separate environments. It is intended as a rich code sample to look at how you can use WebView2 APIs to build your own app.
24
24
25
25
## Requisites
26
26
27
27
*[Microsoft Edge (Chromium)](https://www.microsoftedgeinsider.com/download/) installed on a supported OS.
28
28
*[Visual Studio](https://visualstudio.microsoft.com/vs/) with C++ support installed.
29
29
30
-
The Edge Canary channel is recommended for the installation and the minimum version is 85.0.538.0.
30
+
The [WebView2 Runtime](https://developer.microsoft.com/microsoft-edge/webview2/)is recommended for the installation and the minimum version is 86.0.622.11.
31
31
32
32
## Build the browser
33
33
@@ -41,7 +41,7 @@ Clone the repository and open the solution in Visual Studio. WebView2 is already
41
41
42
42
That's it. Everything should be ready to just launch the app.
43
43
44
-
*You can get the WebView2 NugetPackage through the Visual Studio NuGet Package Manager.
44
+
*You can get the WebView2 NuGet Package through the Visual Studio NuGet Package Manager.
45
45
**You can also use Visual Studio 2017 by changing the project's Platform Toolset in Project Properties/Configuration properties/General/Platform Toolset. You might also need to change the Windows SDK to the latest version available to you.
46
46
47
47
## Using versions below Windows 10
@@ -157,7 +157,7 @@ The sections below describe how some of the features in WebView2Browser were imp
157
157
158
158
### Set up the environment, create a WebView
159
159
160
-
WebView2 allows you to host web content in your Windows app. It exposes the globals [CreateCoreWebView2Environment](https://docs.microsoft.com/microsoft-edge/webview2/reference/win32/0-9-538/webview2-idl#createcorewebview2environment) and [CreateCoreWebView2EnvironmentWithOptions](https://docs.microsoft.com/microsoft-edge/webview2/reference/win32/0-9-538/webview2-idl#createcorewebview2environmentwithoptions) from which we can create the two separate environments for the browser's UI and content.
160
+
WebView2 allows you to host web content in your Windows app. It exposes the globals [CreateCoreWebView2Environment](https://docs.microsoft.com/microsoft-edge/webview2/reference/win32/0-9-622/webview2-idl#createcorewebview2environment) and [CreateCoreWebView2EnvironmentWithOptions](https://docs.microsoft.com/microsoft-edge/webview2/reference/win32/0-9-622/webview2-idl#createcorewebview2environmentwithoptions) from which we can create the two separate environments for the browser's UI and content.
161
161
162
162
```cpp
163
163
// Get directory for user data. This will be kept separated from the
We use the [ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler](https://docs.microsoft.com/microsoft-edge/webview2/reference/win32/0-9-538/icorewebview2createcorewebview2environmentcompletedhandler) to create the UI WebViews once the environment is ready.
214
+
We use the [ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler](https://docs.microsoft.com/microsoft-edge/webview2/reference/win32/0-9-622/icorewebview2createcorewebview2environmentcompletedhandler) to create the UI WebViews once the environment is ready.
We're setting up a few things here. The [ICoreWebView2Settings](https://docs.microsoft.com/microsoft-edge/webview2/reference/win32/0-9-538/icorewebview2settings) interface is used to disable DevTools in the WebView powering the browser controls. We're also adding a handler for received web messages. This handler will enable us to do something when the user interacts with the controls in this WebView.
254
+
We're setting up a few things here. The [ICoreWebView2Settings](https://docs.microsoft.com/microsoft-edge/webview2/reference/win32/0-9-622/icorewebview2settings) interface is used to disable DevTools in the WebView powering the browser controls. We're also adding a handler for received web messages. This handler will enable us to do something when the user interacts with the controls in this WebView.
255
255
256
256
### Navigate to web page
257
257
@@ -456,7 +456,7 @@ function reloadActiveTabContent() {
456
456
457
457
### Communicating the WebViews
458
458
459
-
We need to communicate the WebViews powering tabs and UI so that user interactions in one have the desired effect in the other. WebView2Browser makes use of set of very useful WebView2 APIs for this purpose, including [PostWebMessageAsJson](https://docs.microsoft.com/microsoft-edge/webview2/reference/win32/0-9-538/icorewebview2#postwebmessageasjson), [add_WebMessageReceived](https://docs.microsoft.com/microsoft-edge/webview2/reference/win32/0-9-538/icorewebview2#add_webmessagereceived) and [ICoreWebView2WebMessageReceivedEventHandler](https://docs.microsoft.com/microsoft-edge/webview2/reference/win32/0-9-538/icorewebview2webmessagereceivedeventhandler). On the JavaScript side, we're making use of the `window.chrome.webview` object exposed to call the `postMessage` method and add an event lister for received messages.
459
+
We need to communicate the WebViews powering tabs and UI so that user interactions in one have the desired effect in the other. WebView2Browser makes use of set of very useful WebView2 APIs for this purpose, including [PostWebMessageAsJson](https://docs.microsoft.com/microsoft-edge/webview2/reference/win32/0-9-622/icorewebview2#postwebmessageasjson), [add_WebMessageReceived](https://docs.microsoft.com/microsoft-edge/webview2/reference/win32/0-9-622/icorewebview2#add_webmessagereceived) and [ICoreWebView2WebMessageReceivedEventHandler](https://docs.microsoft.com/microsoft-edge/webview2/reference/win32/0-9-622/icorewebview2webmessagereceivedeventhandler). On the JavaScript side, we're making use of the `window.chrome.webview` object exposed to call the `postMessage` method and add an event lister for received messages.
@@ -556,7 +556,7 @@ function createNewTab(shouldBeActive) {
556
556
}
557
557
```
558
558
559
-
On the host app side, the registered [ICoreWebView2WebMessageReceivedEventHandler](https://docs.microsoft.com/microsoft-edge/webview2/reference/win32/0-9-538/icorewebview2webmessagereceivedeventhandler) will catch the message and create the WebView for that tab.
559
+
On the host app side, the registered [ICoreWebView2WebMessageReceivedEventHandler](https://docs.microsoft.com/microsoft-edge/webview2/reference/win32/0-9-622/icorewebview2webmessagereceivedeventhandler) will catch the message and create the WebView for that tab.
We use the [CallDevToolsProtocolMethod](https://docs.microsoft.com/microsoft-edge/webview2/reference/win32/0-9-538/icorewebview2#calldevtoolsprotocolmethod) to enable listening for security events. Whenever a `securityStateChanged` event is fired, we will use the new state to update the security icon on the controls WebView.
674
+
We use the [CallDevToolsProtocolMethod](https://docs.microsoft.com/microsoft-edge/webview2/reference/win32/0-9-622/icorewebview2#calldevtoolsprotocolmethod) to enable listening for security events. Whenever a `securityStateChanged` event is fired, we will use the new state to update the security icon on the controls WebView.
675
675
676
676
```cpp
677
677
// Enable listening for security events to update secure icon
<ErrorText>This project references NuGet package(s) that are missing on this computer. Use NuGet Package Restore to download them. For more information, see http://go.microsoft.com/fwlink/?LinkID=322105. The missing file is {0}.</ErrorText>
0 commit comments