Skip to content

Commit

Permalink
remove preview channel Step
Browse files Browse the repository at this point in the history
  • Loading branch information
mikehoffms committed Aug 1, 2024
1 parent ee92916 commit ff40afa
Show file tree
Hide file tree
Showing 11 changed files with 89 additions and 179 deletions.
36 changes: 14 additions & 22 deletions microsoft-edge/webview2/get-started/win32.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,7 @@ Then return to this page and continue below.


<!-- ====================================================================== -->
## Step 2 - Install a preview channel of Microsoft Edge

1. If it's not installed already, install a preview channel of Microsoft Edge. To do that, in a new window or tab, see [Install a preview channel of Microsoft Edge](../how-to/machine-setup.md#install-a-preview-channel-of-microsoft-edge) in _Set up your Dev environment for WebView2_.

Then continue below.


<!-- ====================================================================== -->
## Step 3 - Clone or download the WebView2Samples repo
## Step 2 - Clone or download the WebView2Samples repo

The code that you add in this tutorial's steps, has already been added to the sample repo, for you. An optional step below allows you to delete the WebView2 code from `HelloWebView.cpp`, so that you can add it yourself, if you want.

Expand All @@ -71,7 +63,7 @@ Then return here after you've copied the repo to your local drive, and continue


<!-- ====================================================================== -->
## Step 4 - Open the finished solution (WebView2GettingStarted.sln)
## Step 3 - Open the finished solution (WebView2GettingStarted.sln)

You start with a basic desktop project that contains a single main window. We'll start with an existing app project from the **WebView2Samples** repo, which you cloned or downloaded from GitHub in the previous step.

Expand All @@ -81,7 +73,7 @@ You start with a basic desktop project that contains a single main window. We'l


<!-- ====================================================================== -->
## Step 5 - Install workloads if prompted
## Step 4 - Install workloads if prompted

Visual Studio Installer might open and prompt you to install a Workload:

Expand Down Expand Up @@ -110,7 +102,7 @@ The **WebView2GettingStarted** solution opens in Visual Studio. The solution co


<!-- ====================================================================== -->
## Step 6 - View the opened project in Visual Studio
## Step 5 - View the opened project in Visual Studio

If the **WebView2GettingStarted** project isn't open in Visual Studio, open it in Visual Studio:

Expand Down Expand Up @@ -153,7 +145,7 @@ Continue with the steps below.


<!-- ====================================================================== -->
## Step 7 - Build and run the repo's finished project
## Step 6 - Build and run the repo's finished project

At this point, your Dev environment is set up to run Win32 WebView2 apps in debug mode in Visual Studio and add WebView2 features.

Expand All @@ -178,7 +170,7 @@ To confirm that your system is set up for WebView2 coding, run the project in De


<!-- ====================================================================== -->
## Step 8 - Update or install the Windows Implementation Libraries (WIL)
## Step 7 - Update or install the Windows Implementation Libraries (WIL)

WIL is already installed into the project at the repo, but walk through these steps to learn about setup and to check the project's setup.

Expand Down Expand Up @@ -229,7 +221,7 @@ Continue with the steps below.
[Install or update the WebView2 SDK](../how-to/machine-setup.md#install-or-update-the-webview2-sdk) in _Set up your Dev environment for WebView2_
-->
<!-- ====================================================================== -->
## Step 9 - Update or install the WebView2 SDK
## Step 8 - Update or install the WebView2 SDK

The finished project in the repo already has a version of the WebView2 SDK installed for the project. If you were creating a project from scratch by starting by using a Win32 project template, you'd need to install the WebView SDK package for the project, as described here.

Expand Down Expand Up @@ -271,7 +263,7 @@ Continue with the steps below.


<!-- ====================================================================== -->
## Step 10 - Optionally delete the WebView2 code from HelloWebView.cpp
## Step 9 - Optionally delete the WebView2 code from HelloWebView.cpp

If you want to follow the steps below to add the WebView2 code to `HelloWebView.cpp` yourself, delete the two blocks of WebView2 code, as follows:

Expand All @@ -288,7 +280,7 @@ If you want to follow the steps below to add the WebView2 code to `HelloWebView.
```

<!-- ====================================================================== -->
## Step 11 - Include the WebView2.h header in HelloWebView.cpp
## Step 10 - Include the WebView2.h header in HelloWebView.cpp

Above, we did the following:
* Cloned or downloaded the samples repo including an existing project that contains a standard C++ Windows desktop application.
Expand Down Expand Up @@ -334,7 +326,7 @@ Continue with the steps below.


<!-- ====================================================================== -->
## Step 12 - Build your empty sample app
## Step 11 - Build your empty sample app

1. Select **Debug** > **Start debugging** (**F5**) to build and run the project.

Expand All @@ -350,7 +342,7 @@ Continue with the steps below.


<!-- ====================================================================== -->
## Step 13 - Add a WebView2 control in the parent window
## Step 12 - Add a WebView2 control in the parent window

Next, add a WebView2 control to the main window.

Expand Down Expand Up @@ -454,7 +446,7 @@ maintenance link (keep)
* [Navigation events for WebView2 apps](../concepts/navigation-events.md) - main copy; update it and then propagate/copy to these h2 sections:
-->
<!-- ====================================================================== -->
## Step 14 - Navigation events
## Step 13 - Navigation events

In the previous step, we discussed navigating to URL by using the `ICoreWebView2::Navigate` method. During navigation, WebView2 fires a sequence of events, which the host can listen for:

Expand Down Expand Up @@ -492,7 +484,7 @@ Continue with the steps below.


<!-- ====================================================================== -->
## Step 15 - Scripting
## Step 14 - Scripting

Use host apps to inject JavaScript code into WebView2 controls at runtime. You can task WebView2 to run arbitrary JavaScript or add initialization scripts. The injected JavaScript applies to all new top-level documents and any child frames until the JavaScript is removed.

Expand Down Expand Up @@ -524,7 +516,7 @@ Continue with the steps below.


<!-- ====================================================================== -->
## Step 16 - Communication between host and web content
## Step 15 - Communication between host and web content

The host and the web content can also communicate with each other through the `postMessage` method. The web content running within a WebView2 control can post to the host through the `window.chrome.webview.postMessage` method, and the message is handled by any registered `ICoreWebView2WebMessageReceivedEventHandler` event handler on the host.

Expand Down
20 changes: 5 additions & 15 deletions microsoft-edge/webview2/get-started/winui.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,17 +45,7 @@ For this sample, you don't need to separately install the WebView2 SDK. Below,


<!-- ====================================================================== -->
## Step 2 - Install a preview channel of Microsoft Edge

1. Install the WebView2 Runtime on devices that have Windows 10 version 1803 (build 17134) or later, by installing from either location:
* To directly download just the Runtime, use the **Download the WebView2 Runtime** section of the [Microsoft Edge WebView2](https://developer.microsoft.com/microsoft-edge/webview2) page at `developer.microsoft.com`.
* To download and install a Microsoft Edge preview channel (Beta, Dev, or Canary), go to [Become a Microsoft Edge Insider](https://www.microsoft.com/edge/download/insider). The preview channels are also called _Insider channels_. The preview channels include the WebView2 Runtime.

Then continue with the steps below.


<!-- ====================================================================== -->
## Step 3 - Create a blank WinUI 3 project
## Step 2 - Create a blank WinUI 3 project

To create a WebView2 app, start by creating a basic desktop project, to create a desktop app that contains a single main window:

Expand Down Expand Up @@ -124,7 +114,7 @@ The above values represent:


<!-- ====================================================================== -->
## Step 4 - Add a WebView2 control
## Step 3 - Add a WebView2 control

This tutorial project is based on the project template **Blank App, Packaged (WinUI in Desktop)**. This project template uses the WindowsAppSDK, which includes the WebView2 SDK.

Expand Down Expand Up @@ -218,7 +208,7 @@ API Reference:


<!-- ====================================================================== -->
## Step 5 - Add navigation controls
## Step 4 - Add navigation controls

To allow users to control which webpage is displayed in the WebView2 control, add an address bar to the app, as follows:

Expand Down Expand Up @@ -291,7 +281,7 @@ maintenance link (keep)
* [Navigation events for WebView2 apps](../concepts/navigation-events.md) - main copy; update it and then propagate/copy to these h2 sections:
-->
<!-- ====================================================================== -->
## Step 6 - Navigation events
## Step 5 - Navigation events

In this section, you add code to import the WebView2 Core library.

Expand Down Expand Up @@ -365,7 +355,7 @@ In this section, you add code to import the WebView2 Core library.


<!-- ====================================================================== -->
## Step 7 - Scripting
## Step 6 - Scripting

You can use host apps to inject JavaScript code into WebView2 controls at runtime. You can task WebView2 to run arbitrary JavaScript or add initialization scripts. The injected JavaScript applies to all new top-level documents and any child frames until the JavaScript is removed. The injected JavaScript is run with specific timing, to either:

Expand Down
28 changes: 8 additions & 20 deletions microsoft-edge/webview2/get-started/wpf.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,19 +54,7 @@ This tutorial also works with Visual Studio 2017. See [Visual Studio older down


<!-- ====================================================================== -->
## Step 2 - Install a preview channel of Microsoft Edge

1. Download any Microsoft Edge preview channel (Beta, Dev, or Canary) on a supported operating system:
* Windows 10
* Windows 11

To do this, go to [Become a Microsoft Edge Insider](https://www.microsoft.com/edge/download/insider). The preview channels are also called _Insider channels_.

We recommend using the Canary channel of Microsoft Edge. The minimum required version is 82.0.488.0.


<!-- ====================================================================== -->
## Step 3 - Create a single-window WebView2 app
## Step 2 - Create a single-window WebView2 app

Start by creating a basic desktop project that contains a single main window.

Expand Down Expand Up @@ -160,7 +148,7 @@ If you are creating a WPF App (.NET Framework) project, do the following steps.


<!-- ====================================================================== -->
## Step 4 - Build and run the initial project without WebView2
## Step 3 - Build and run the initial project without WebView2

1. Select **File** > **Save All** to save the project.

Expand Down Expand Up @@ -199,7 +187,7 @@ If you are creating a WPF App (.NET Framework) project, do the following steps.
[Install or update the WebView2 SDK](../how-to/machine-setup.md#install-or-update-the-webview2-sdk) in _Set up your Dev environment for WebView2_
-->
<!-- ====================================================================== -->
## Step 5 - Install the WebView2 SDK
## Step 4 - Install the WebView2 SDK

In Visual Studio, use NuGet Package Manager to add the WebView2 SDK to the project, as follows:

Expand Down Expand Up @@ -229,7 +217,7 @@ In Visual Studio, use NuGet Package Manager to add the WebView2 SDK to the proje


<!-- ====================================================================== -->
## Step 6 - Create a single WebView2 control
## Step 5 - Create a single WebView2 control

Add a WebView2 control to your app.

Expand Down Expand Up @@ -280,7 +268,7 @@ Add a WebView2 control to your app.


<!-- ====================================================================== -->
## Step 7 - Navigation
## Step 6 - Navigation

Enable users to change the URL that the WebView2 control displays, by adding an address bar to the app.

Expand Down Expand Up @@ -374,7 +362,7 @@ maintenance link (keep)
* [Navigation events for WebView2 apps](../concepts/navigation-events.md) - main copy; update it and then propagate/copy to these h2 sections:
-->
<!-- ====================================================================== -->
## Step 8 - Navigation events
## Step 7 - Navigation events

During webpage navigation, the WebView2 control raises events. The app that hosts WebView2 controls listens for the following events:

Expand Down Expand Up @@ -451,7 +439,7 @@ To demonstrate how to use the events, register a handler for `NavigationStarting


<!-- ====================================================================== -->
## Step 9 - Scripting
## Step 8 - Scripting

You can use host apps to inject JavaScript code into WebView2 controls at runtime. You can task WebView2 to run arbitrary JavaScript or add initialization scripts. The injected JavaScript applies to all new top-level documents and any child frames until the JavaScript is removed.

Expand Down Expand Up @@ -486,7 +474,7 @@ For example, add scripts that send an alert when a user navigates to non-HTTPS s


<!-- ====================================================================== -->
## Step 10 - Communication between host and web content
## Step 9 - Communication between host and web content

The host and web content can communicate in the following ways using `postMessage`:

Expand Down
20 changes: 7 additions & 13 deletions microsoft-edge/webview2/samples/webview2_sample_uwp.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,19 +39,13 @@ Microsoft Visual Studio is required. Microsoft Visual Studio Code is not suppor


<!-- ====================================================================== -->
## Step 2 - Install a preview channel of Microsoft Edge

1. If a preview channel of Microsoft Edge (Beta, Dev, or Canary) is not already installed, in a separate window or tab, see [Install a preview channel of Microsoft Edge](../how-to/machine-setup.md#install-a-preview-channel-of-microsoft-edge) in _Set up your Dev environment for WebView2_. Follow the steps in that section, and then return to this page and continue the steps below.


<!-- ====================================================================== -->
## Step 3 - Clone or download the WebView2Samples repo
## Step 2 - Clone or download the WebView2Samples repo

1. If not done already, clone or download the `WebView2Sample` repo to your local drive. In a separate window or tab, see [Download the WebView2Samples repo](../how-to/machine-setup.md#download-the-webview2samples-repo) in _Set up your Dev environment for WebView2_. Follow the steps in that section, and then return to this page and continue below.


<!-- ====================================================================== -->
## Step 4 - Open the solution in Visual Studio
## Step 3 - Open the solution in Visual Studio

1. On your local drive, open the `.sln` file in Visual Studio, in the directory:

Expand All @@ -63,13 +57,13 @@ Microsoft Visual Studio is required. Microsoft Visual Studio Code is not suppor


<!-- ====================================================================== -->
## Step 5 - Install workloads if prompted
## Step 4 - Install workloads if prompted

1. If prompted, install any Visual Studio workloads that are requested. In a separate window or tab, see [Install Visual Studio workloads](../how-to/machine-setup.md#install-visual-studio-workloads) in _Set up your Dev environment for WebView2_. Follow the steps in that section, and then return to this page and continue below.


<!-- ====================================================================== -->
## Step 6 - Build and run the project using pre-installed packages
## Step 5 - Build and run the project using pre-installed packages

Solution Explorer shows the **webview2_sample_uwp** project:

Expand Down Expand Up @@ -103,7 +97,7 @@ Next, update the NuGet packages for the project, per the following sections.


<!-- ====================================================================== -->
## Step 7 - Update the NuGet packages
## Step 6 - Update the NuGet packages

In this step, we'll update the project's NuGet packages, to get the latest prerelease version of the WinUI 2 SDK. The WinUI 2 SDK includes a compatible prerelease or release version of the WebView2 SDK.

Expand Down Expand Up @@ -166,7 +160,7 @@ Update the project's NuGet packages:


<!-- ====================================================================== -->
## Step 8 - Build and run the project with updated packages
## Step 7 - Build and run the project with updated packages

Now that the NuGet packages have been updated, build and run the project again:

Expand All @@ -188,7 +182,7 @@ Now that the NuGet packages have been updated, build and run the project again:


<!-- ====================================================================== -->
## Step 9 - Inspect the code
## Step 10 - Inspect the code

1. In the Visual Studio code editor, inspect the code:

Expand Down
Loading

0 comments on commit ff40afa

Please sign in to comment.