diff --git a/microsoft-edge/dev-videos/index.md b/microsoft-edge/dev-videos/index.md index f516e37552..ff10558d14 100644 --- a/microsoft-edge/dev-videos/index.md +++ b/microsoft-edge/dev-videos/index.md @@ -79,7 +79,7 @@ August 17, 2023 The JSON viewer automatically formats and highlights JSON responses and files in browser tabs. When your web server responds to HTTP requests with data encoded as JSON, this data isn't always easy to read and is sometimes returned as one line of text. The JSON viewer changes the returned data to make it easier to read. The JSON syntax is highlighted with different colors, object properties are displayed on their own lines and indented, and objects can be collapsed or expanded. See also: -* [View formatted JSON](../devtools-guide-chromium/json-viewer/json-viewer.md) +* [View formatted JSON responses or files](../devtools-guide-chromium/json-viewer/json-viewer.md) @@ -121,7 +121,7 @@ Covers: See also: * [What's New in DevTools (Microsoft Edge 112)](../devtools-guide-chromium/whats-new/2023/04/devtools-112.md) * [Analyze CSS selector performance during Recalculate Style events](../devtools-guide-chromium/evaluate-performance/selector-stats.md) - CSS selector stats. -* [View formatted JSON](../devtools-guide-chromium/json-viewer/json-viewer.md) +* [View formatted JSON responses or files](../devtools-guide-chromium/json-viewer/json-viewer.md) * [Apply a color theme to DevTools](../devtools-guide-chromium/customize/theme.md) diff --git a/microsoft-edge/developer/index.yml b/microsoft-edge/developer/index.yml index 45cb068e36..92dd0e6cc3 100644 --- a/microsoft-edge/developer/index.yml +++ b/microsoft-edge/developer/index.yml @@ -174,22 +174,45 @@ landingContent: - text: WebView2 API Reference url: ../webview2/webview2-api-reference.md # ============================================================================= -# Card r2c3 - - title: Development tips for Microsoft Edge +# Card r2c3 # 10 items max + - title: Development tips for Microsoft Edge # = /web-platform/ linkLists: - - linkListType: how-to-guide +# - linkListType: overview +# links: +# - text: Development tips for Microsoft Edge +# url: ../web-platform/web-platform.md + - linkListType: whats-new links: - - text: Development tips for Microsoft Edge - url: ../web-platform/web-platform.md - - text: Site compatibility-impacting changes url: ../web-platform/site-impacting-changes.md + - linkListType: how-to-guide + links: + - text: Move users to Microsoft Edge from Internet Explorer + url: ../web-platform/ie-to-microsoft-edge-redirection.md + + - text: Tracking prevention in Microsoft Edge + url: ../web-platform/tracking-prevention.md - text: Detect Microsoft Edge from your website url: ../web-platform/user-agent-guidance.md + - text: Develop experiences for the sidebar in Microsoft Edge + url: ../web-platform/sidebar.md + - text: Detect Windows 11 using User-Agent Client Hints url: ../web-platform/how-to-detect-win11.md + + - text: Customize the password reveal button + url: ../web-platform/password-reveal.md + + - text: Display regional versions of your site, based on OS settings + url: ../web-platform/os-regional-settings.md + + - text: View formatted JSON responses or files + url: ../devtools-guide-chromium/json-viewer/json-viewer.md + + - text: Sign up for the Ad Selection API + url: ../web-platform/ad-selection-api.md # ============================================================================= # Row 3 with 3 cards # ============================================================================= diff --git a/microsoft-edge/devtools-guide-chromium/json-viewer/json-viewer.md b/microsoft-edge/devtools-guide-chromium/json-viewer/json-viewer.md index 46997ec14e..8ae65bbe56 100644 --- a/microsoft-edge/devtools-guide-chromium/json-viewer/json-viewer.md +++ b/microsoft-edge/devtools-guide-chromium/json-viewer/json-viewer.md @@ -1,5 +1,5 @@ --- -title: View formatted JSON +title: View formatted JSON responses or files description: How to use the JSON viewer to view formatted and highlighted JSON responses in a browser tab. author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 04/08/2024 --- -# View formatted JSON +# View formatted JSON responses or files Use the **JSON viewer** to automatically format and syntax highlight JSON responses and files in browser tabs. diff --git a/microsoft-edge/devtools-guide-chromium/network-console/network-console-tool.md b/microsoft-edge/devtools-guide-chromium/network-console/network-console-tool.md index 42b0e2aba8..57433ecd53 100644 --- a/microsoft-edge/devtools-guide-chromium/network-console/network-console-tool.md +++ b/microsoft-edge/devtools-guide-chromium/network-console/network-console-tool.md @@ -111,5 +111,5 @@ See also: ## See also -* [View formatted JSON](../json-viewer/json-viewer.md) +* [View formatted JSON responses or files](../json-viewer/json-viewer.md) diff --git a/microsoft-edge/devtools-guide-chromium/network/index.md b/microsoft-edge/devtools-guide-chromium/network/index.md index dede20fa44..a22213039e 100644 --- a/microsoft-edge/devtools-guide-chromium/network/index.md +++ b/microsoft-edge/devtools-guide-chromium/network/index.md @@ -205,7 +205,7 @@ Select a resource to learn more information about it. Tip: When a file is minified, select the **Format** (![Format](./index-images/format-icon.png)) button at the bottom of the **Response** panel to re-format the contents of the file for readability. - For example, if the response contains minified JSON data, click the **Format** button to re-format the JSON syntax so that each object property is on its own line. You can also use the **JSON viewer** to view formatted and highlighted JSON responses in a browser tab. See [View formatted JSON](../json-viewer/json-viewer.md). + For example, if the response contains minified JSON data, click the **Format** button to re-format the JSON syntax so that each object property is on its own line. You can also use the **JSON viewer** to view formatted and highlighted JSON responses in a browser tab. See [View formatted JSON responses or files](../json-viewer/json-viewer.md). 1. Select the **Timing** panel. A breakdown of the network activity for the resource is displayed: diff --git a/microsoft-edge/devtools-guide-chromium/resources/index.md b/microsoft-edge/devtools-guide-chromium/resources/index.md index d53695e40f..a0771345e3 100644 --- a/microsoft-edge/devtools-guide-chromium/resources/index.md +++ b/microsoft-edge/devtools-guide-chromium/resources/index.md @@ -118,7 +118,7 @@ For example, to go from the **Page** tab's resource list in the **Sources** tool 1. In DevTools, on the **Activity Bar**, select the **Network** tab. If that tab isn't visible, click the **More Tools** (![More Tools icon](./index-images/more-tools-icon-light-theme.png)) button. -1. Press **Ctrl+R** to refresh the page. The received resource files that make up the webpage are now added as rows in the **Network** tab. The **network-tutorial/** folder row represents the HTML page - in this case, [index.html](https://github.com/MicrosoftEdge/Demos/tree/main/network-tutoriql). +1. Press **Ctrl+R** to refresh the page. The received resource files that make up the webpage are now added as rows in the **Network** tab. The **network-tutorial/** folder row represents the HTML page - in this case, [index.html](https://github.com/MicrosoftEdge/Demos/blob/main/network-tutorial/index.html). 1. In DevTools, on the **Activity Bar**, click the **Sources** tab. diff --git a/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md b/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md index 35f67220a4..a575f8f3e3 100644 --- a/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md +++ b/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md @@ -56,7 +56,7 @@ last sync'd April 16, 2024 | postMessage Trace Events | Tests `postMessage` trace events in the **Performance** tool. Used for [View messages between windows, iframes, and dedicated workers](../evaluate-performance/reference.md#view-messages-between-windows-iframes-and-dedicated-workers) in _Performance features reference_. | [/devtools-postmessage-perf-timeline/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-postmessage-perf-timeline) | [postMessage Trace Events demo](https://microsoftedge.github.io/Demos/devtools-postmessage-perf-timeline/) | | CSS :target pseudo-class | Used for [Support forcing the :target CSS state](../whats-new/2021/01/devtools.md#support-forcing-the-target-css-state). | [/devtools-target-pseudo/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-target-pseudo) | [CSS :target pseudo-class demo](https://microsoftedge.github.io/Demos/devtools-target-pseudo/) | | Heap Snapshot Visualizer | Source code for the [Heap Snapshot Visualizer](https://microsoftedge.microsoft.com/addons/detail/heap-snapshot-visualizer/fceldlhognbemkgfacnffkdanocidgce) extension for DevTools. | [/heap-snapshot-visualizer/](https://github.com/MicrosoftEdge/Demos/tree/main/heap-snapshot-visualizer) | n/a | -| JSON dummy data | Simple JSON files. Used for [View formatted JSON](../json-viewer/json-viewer.md). | [/json-dummy-data/](https://github.com/MicrosoftEdge/Demos/tree/main/json-dummy-data) | [JSON dummy data](https://microsoftedge.github.io/Demos/json-dummy-data/) | +| JSON dummy data | Simple JSON files. Used for [View formatted JSON responses or files](../json-viewer/json-viewer.md). | [/json-dummy-data/](https://github.com/MicrosoftEdge/Demos/tree/main/json-dummy-data) | [JSON dummy data](https://microsoftedge.github.io/Demos/json-dummy-data/) | | Inspect Network Activity | Used for [Inspect network activity](../network/index.md). | [/network-tutorial/](https://github.com/MicrosoftEdge/Demos/tree/main/network-tutorial) | [Inspect Network Activity Demo](https://microsoftedge.github.io/Demos/network-tutorial/) | | Photo gallery | Used for [The truth about CSS selector performance](https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/). | [/photo-gallery/](https://github.com/MicrosoftEdge/Demos/tree/main/photo-gallery) | [Photo Gallery](https://microsoftedge.github.io/Demos/photo-gallery/) | | Slow Calendar | Simple calendar demo app to test various DevTools features such as the **Performance** tool and source map support. | [/slow-calendar/](https://github.com/MicrosoftEdge/Demos/tree/main/slow-calendar) | [Slow Calendar](https://microsoftedge.github.io/Demos/slow-calendar/public) | diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/04/devtools-112.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/04/devtools-112.md index 8e024d9a05..44cc48527a 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/04/devtools-112.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/04/devtools-112.md @@ -102,7 +102,7 @@ With code folding turned on, you can now expand and collapse objects and arrays Please send us your [feedback](../../../contact.md)! See also: -* [View formatted JSON](../../../json-viewer/json-viewer.md) +* [View formatted JSON responses or files](../../../json-viewer/json-viewer.md) diff --git a/microsoft-edge/index.yml b/microsoft-edge/index.yml index c237c9383c..2939737531 100644 --- a/microsoft-edge/index.yml +++ b/microsoft-edge/index.yml @@ -331,21 +331,49 @@ conceptualContent: # Card - title: Development tips for Microsoft Edge links: - - text: Development tips for Microsoft Edge - url: ./web-platform/web-platform.md - itemType: overview +# - text: Development tips for Microsoft Edge +# url: ./web-platform/web-platform.md +# itemType: overview - text: Site compatibility-impacting changes url: ./web-platform/site-impacting-changes.md + itemType: whats-new + + - text: Move users to Microsoft Edge from Internet Explorer + url: ./web-platform/ie-to-microsoft-edge-redirection.md + itemType: how-to-guide + + - text: Tracking prevention in Microsoft Edge + url: ./web-platform/tracking-prevention.md itemType: how-to-guide - text: Detect Microsoft Edge from your website url: ./web-platform/user-agent-guidance.md itemType: how-to-guide + - text: Develop experiences for the sidebar in Microsoft Edge + url: ./web-platform/sidebar.md + itemType: how-to-guide + - text: Detect Windows 11 using User-Agent Client Hints url: ./web-platform/how-to-detect-win11.md itemType: how-to-guide + + - text: Customize the password reveal button + url: ./web-platform/password-reveal.md + itemType: how-to-guide + + - text: Display regional versions of your site, based on OS settings + url: ./web-platform/os-regional-settings.md + itemType: how-to-guide + + - text: View formatted JSON responses or files + url: ./devtools-guide-chromium/json-viewer/json-viewer.md + itemType: how-to-guide + + - text: Sign up for the Ad Selection API + url: ./web-platform/ad-selection-api.md + itemType: how-to-guide # Card - title: Accessibility in Microsoft Edge links: diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index 211237fd69..1b8e5f05c5 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -1372,7 +1372,7 @@ href: webview2/concepts/basic-authentication.md displayName: auth, Basic authentication for WebView2 apps # top-of-page title - - name: Windowed vs. visual hosting of WebView2 + - name: Windowed vs. Visual hosting of WebView2 href: webview2/concepts/windowed-vs-visual-hosting.md - name: Custom management of network requests @@ -1704,7 +1704,7 @@ - name: Detect Microsoft Edge from your website href: web-platform/user-agent-guidance.md - - name: Develop for the sidebar + - name: Develop experiences for the sidebar in Microsoft Edge href: web-platform/sidebar.md displayName: sidebar apps, sidebar extensions, pwa, side panel, sidepanel @@ -1714,14 +1714,17 @@ - name: Customize the password reveal button href: web-platform/password-reveal.md - - name: Operating System Regional Data Display + - name: Display regional versions of your site, based on OS settings href: web-platform/os-regional-settings.md displayName: globalization, language, region, limited, intl, date, time, format - - name: View formatted JSON + - name: View formatted JSON responses or files href: devtools-guide-chromium/json-viewer/json-viewer.md displayName: JSON viewer, view JSON + - name: Sign up for the Ad Selection API + href: ./web-platform/ad-selection-api.md + # ============================================================================= # if top-of-page title is longer, add it to displayName comma-delimited list of lookup keywords - name: Microsoft Edge IDE integration diff --git a/microsoft-edge/web-platform/ad-selection-api-images/flags.png b/microsoft-edge/web-platform/ad-selection-api-images/flags.png new file mode 100644 index 0000000000..655d8cc7dd Binary files /dev/null and b/microsoft-edge/web-platform/ad-selection-api-images/flags.png differ diff --git a/microsoft-edge/web-platform/ad-selection-api-images/origin-trials.png b/microsoft-edge/web-platform/ad-selection-api-images/origin-trials.png new file mode 100644 index 0000000000..f2b045f27e Binary files /dev/null and b/microsoft-edge/web-platform/ad-selection-api-images/origin-trials.png differ diff --git a/microsoft-edge/web-platform/ad-selection-api-images/reg-form.png b/microsoft-edge/web-platform/ad-selection-api-images/reg-form.png new file mode 100644 index 0000000000..6d88c37b5c Binary files /dev/null and b/microsoft-edge/web-platform/ad-selection-api-images/reg-form.png differ diff --git a/microsoft-edge/web-platform/ad-selection-api.md b/microsoft-edge/web-platform/ad-selection-api.md new file mode 100644 index 0000000000..68737feee6 --- /dev/null +++ b/microsoft-edge/web-platform/ad-selection-api.md @@ -0,0 +1,303 @@ +--- +title: Sign up for the Ad Selection API +description: Sign up for the Ad Selection API, which provides user-relevant ads on your site without using third-party cookies. +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: conceptual +ms.service: microsoft-edge +ms.date: 10/10/2024 +--- +# Sign up for the Ad Selection API + + +The Ad Selection API provides user-relevant ads on your site without using third-party cookies. See [Ad Selection Overview](https://github.com/WICG/privacy-preserving-ads/blob/main/Ad%20Selection%20Overview.md) in the `privacy-preserving-ads` repo. + +The Ad Selection API can be used by: +* **Sellers** running a supply-side platform (SSP), who can use the API to provide higher-quality ads for their publishers. +* **Buyers** running a demand-side platform (DSP), who can use the API to improve the effectiveness of advertising campaigns. + +To get started using the Ad Selection API and test out the end-to-end flow, sign up for the limited preview of the Ad Selection API. + +As a seller operating a supply-side platform or a buyer operating a demand-side platform, use this guide to: +* Sign up for the Ad Selection API limited preview by registering for the origin trial. +* Complete the API attestation by publishing your attestations JSON file. +* Set up an evaluation environment with a supported cloud provider. +* View the Ad Selection API documentation. +* Prepare your User-Defined Functions (UDFs). +* Deploy your services to Azure. +* Test the Ad Selection API on your site. + + + +## Attestation enrollment and alpha sign-up + + + +#### When and where is the preview available? + +Microsoft Edge versions starting with **130.0.2808.0** have support for the Ad Selection API in a limited, developer opt-in preview outside of the European Economic Area (EEA) and the United Kingdom (UK). + + + +#### Flags for testing + +To change the Ad Selection API platform features on your developer machine, use the **Ad Selection API** testing flags at `edge://flags#edge-ad-selection-api`: + +![The "Ad Selection API" flags](./ad-selection-api-images/flags.png) + +The **Ad Selection API** flag enables the Ad Selection API and associated features such as: +* Attribution Reporting. +* Fenced Frames. +* Shared Storage. +* Private Aggregation. + + + +#### Sign-up and attestation requirements and process + +Developers interested in alpha testing can join the origin trial for the Ad Selection API. This origin trial enables end-to-end testing of Ad Selection API features, covering both the API usage and the deployment of secure container images. + +For each top-level domain that you intend to use with the Ad Selection API, fill in the **Origin Trial Registration** form for that domain, and then submit the form. + +To sign up for the **Ad Selection API** origin trial for a domain: + +1. Open [Microsoft Edge Origin Trials](https://microsoftedge.github.io/MSEdgeExplainers/origin-trials/) in a new window or tab: + + ![The "Ad Selection API" origin trial listing at "Microsoft Edge Origin Trials"](./ad-selection-api-images/origin-trials.png) + +1. In the **Ad Selection API** section, click the **Register** button. The **Origin Trial Registration** form opens: + + ![Registration form](./ad-selection-api-images/reg-form.png) + +1. Fill in the form. + + * In the **Domain** text box, enter a single top-level domain. For example, a top-level domain is `contoso.example`, and optionally includes subdomains such as `subdomain.contoso.example`. + + * In the **Subdomain Support** section, select the **Yes** or **No** option button. + + * In the **Email Address** text box, provide a valid developer contact for the domain. + + * In the **Origin Trial Name** text box, enter **AdSelectionAPI** (with no spaces). This is the ID of this origin trial. + +1. Click the **Submit** button. + + An origin trial token is generated for the top-level domain and is sent to you. + +1. Create a file that's named `ad-selection-attestations.json`, and host the file at the top-level domain, in the `/.well-known/` directory. For example: + + `https://contoso.example/.well-known/ad-selection-attestations.json` + + The `ad-selection-attestations.json` file must be published within **30 days** of receiving the OT token. Hosting this JSON file is required, in order to complete your attestation and allow your code to access the Ad Selection API, to test the Ad Selection API with supported Microsoft Edge clients. + + + +#### Example JSON file + +The attestations JSON file must be named `ad-selection-attestations.json`, and must conform to the following standards below. The following is an example of an `ad-selection-attestations.json` file: + +```json +{ + "ad_selection_api_attestations": [ + { + "attestation_parser_version": "2", + "attestation_version": "2", + "privacy_policy": [ + "https://contoso.example/privacy/" + ], + "ownership_token": "", + "enrollment_site": "https://contoso.example/", + "platform_attestations": [ + { + "platform": "edge", + "attestations": { + "ad_selection_api": { + "ServiceNotUsedForIdentifyingUserAcrossSites": true/false + }, + "attribution_reporting_api": { + "ServiceNotUsedForIdentifyingUserAcrossSites": true/false + }, + "shared_storage_api": { + "ServiceNotUsedForIdentifyingUserAcrossSites": true/false + }, + "private_aggregation_api": { + "ServiceNotUsedForIdentifyingUserAcrossSites": true/false + } + } + }, + { + "platform": "android", + "attestations": {} + } + ] + } + ] +} +``` + + + +###### Important fields and values + +* The `ad-selection-attestations.json` file must include the origin trial token that was generated and sent to you for this top-level domain. `"ownership_token":` is the origin trial token that was generated when registering this domain for the **Ad Selection API** origin trial. + +* In the `"platform_attestations":` section, `"platform":` must be `"edge"` or `"android"`. + +* The file must include a list of APIs (features that are associated with the Ad Services API). In the `"platform_attestations":` section, valid members of `"attestations":` are the following: + * `"ad_selection_api":` - The main API, for private auction logic. + * `"attribution_reporting_api":` - Attribution reporting. + * `"shared_storage_api":` - Shared storage. + * `"private_aggregation_api":` - Private aggregation. + * Requirements: + * Each `"..._api":` entry must have a single field, `"ServiceNotUsedForIdentifyingUserAcrossSites":`, with either a `true` or `false` value. `true` means that this service is not used for identifying the user across sites. `false` means that this service is used for identifying the user across sites. + + + +## Deploy the Ad Selection API services + +The Ad Selection API uses a trusted execution environment (TEE) to provide a level of assurance for data integrity, data confidentiality, and code integrity; see [Confidential Computing: Hardware-Based Trusted Execution for Applications and Data](https://confidentialcomputing.io/wp-content/uploads/sites/85/2021/03/confidentialcomputing_outreach_whitepaper-8-5x11-1.pdf). Services provided by the Ad Selection API must run in a TEE to secure the data used by these services. + +Ad Selection Services running in a TEE should be deployed on a cloud platform that supports the necessary security features. Initially, services can be deployed in Azure by using confidential ACI containers; see [Confidential containers on Azure Container Instances](/azure/container-instances/container-instances-confidential-overview). + +The Ad Selection API provides different services that need to be deployed by sellers or buyers. + + + +#### Images for deploying services + +Add your User-Defined Functions (UDFs) within the provided images of services. The User-Defined Functions can run custom business logic. The User-Defined Functions run in private containers within the deployed services. + +Each image defines one service. Some images don't contain UDFs, and consist entirely of predefined code. Some images contain UDFs, as functions with an empty body or starter code, that are the relevant User-Defined Functions for that service. Fill in the bodies of the User-Defined Functions in these images with your own custom code. + +Microsoft provides an image for each service, which can be deployed on a cloud provider. These are the public images that must be used for deployment. Only official images from Microsoft are able to run private auctions. + +Images for deployment: +* Sellers + * [Ad Selection Seller Front End Service](https://mcr.microsoft.com/product/ad-selection/azure/seller-frontend-service) + * [Ad Selection Auction Service](https://mcr.microsoft.com/product/ad-selection/azure/auction-service) +* Buyers + * [Ad Selection Buyer Front End Service](https://mcr.microsoft.com/product/ad-selection/azure/buyer-frontend-service) + * [Ad Selection Bidding Service](https://mcr.microsoft.com/product/ad-selection/azure/bidding-service) + * [Ad Selection K-Anonymity Service](https://mcr.microsoft.com/product/ad-selection/azure/k-anonymity-service) +* Sellers and buyers + * [Ad Selection Key Value Service](https://mcr.microsoft.com/product/ad-selection/azure/key-value-service/) + + + +#### Services for sellers + +| Service | Description | +| --- | --- | +| **SellerFrontEnd** | Provides a `/SelectAd` HTTPS endpoint, which receives requests from the seller's untrusted ad service to initiate the Protected Audience auction flow. | +| **Auction** | Provides a `/ScoreAds` endpoint, which receives requests from the **SellerFrontEnd** service, containing bids that are participating in the auction. Responds with a score value that the **SellerFrontEnd** service uses to choose the winner. | +| **Key/Value** | Receives requests from the **SellerFrontEnd** service, which contain lookup keys from buyers' bids (such as `ad_render_urls`). Returns real-time scoring signals that are required for the auction. Runs in Bring Your Own Service (BYOS) mode, so the seller does not need to deploy this service in a trusted execution environment (TEE), and can instead use the image that's provided by Microsoft. | + + + +#### Services for buyers + +| Service | Description | +| --- | --- | +| **BuyerFrontEnd** | Provides a `/GetBids` endpoint, which receives requests from the **SellerFrontEnd** service to initiate the bidding flow. | +| **Bidding** | Provides a `/GenerateBids` endpoint, which receives requests from the **BuyerFrontEnd** service to handle the bidding and generate a bid. Generates a bid, chooses the winner, and selects the banner to be rendered. | +| **Key/Value** | Receives requests from the **BuyerFrontEnd** service and returns real-time buyer data required for bidding, corresponding to lookup keys from Interest Groups. Such a request happens once per workflow. Runs in Bring Your Own Service (BYOS) mode. | +| **Bidding Selection & Key/Value** | Receives requests from the **Bidding** service to select and return additional ad banners (candidates) that can participate in bidding. The **Bidding Selection & Key/Value** service can also return additional signals that are needed for bidding. The **Bidding** service may send multiple requests to the **Bidding Selection & Key/Value** service, or may choose not to send any requests, because the **Bidding Selection & Key/Value** service is optional. The **Bidding Selection & Key/Value** service must be deployed in a trusted execution environment (TEE). | +| **K-Anonymity** | Collects k-anonymity counters and checks that the winning ad creative passes the k-anonymity check. | + + + +#### User-Defined Functions + +Sellers and buyers need to provide their own custom code as User-Defined Functions (UDFs) that run in private containers within the deployed services. These User-Defined Functions can execute custom business logic. + +Each buyer or seller can deploy multiple instances of a given service, such as: +* **SellerFrontEnd** and **Auction**. +* **BuyerFrontend**, **Bidding**, and **K-Anonymity**. + +Some of these services take an input which is a JavaScript worklet that defines User-Defined Functions. + + + +###### User-Defined Functions for sellers + +| UDF | Service in which the UDF runs | Description | +| --- | --- | --- | +| `scoreAd()` | **Auction** | Generates a score for each buyer's bid, or rejects the bid. This score is then used by the **SellerFrontEnd** service, to choose a winner from among all buyers. | +| `reportResult()` | **SellerFrontEnd** | For event-level reporting. Runs in the **SellerFrontEnd** service after the final winner has been chosen. Notifies the seller about the winning bidder, and provides the bid value. | + + + +###### User-Defined Functions for buyers + +| UDF | Service in which the UDF runs | Description | +| --- | --- | --- | +| `generateBids()` | **Bidding** | Generates a bid, and chooses the banner that will be shown. | +| `reportWin()` | **SellerFrontEnd** | For event-level reporting. Runs in the **SellerFrontEnd** service, if the buyer's bid wins the auction. Notifies the buyer that they have won the auction, and generates notification URLs that will be triggered later, such as during banner rendering or other client events. | +| `getValues()` | **Bidding Selection & Key/Value** | Runs in the **Bidding Selection & Key/Value** service, if the buyer uses that service. Allows for custom code execution for data lookup and selection. | + + + +#### Deployment guide + +To deploy the Ad Selection API service to Azure: + +1. Create an Azure account and create a subscription at [Microsoft Azure](https://azure.microsoft.com). + +1. Choose the **Confidential ACO containers** option. + +1. Go to [Terraform deployment scripts](https://go.microsoft.com/fwlink/?linkid=2290115) in a new window or tab, and then download the Terraform deployment scripts and view the deployment documentation. **Note:** Make sure the hash of the image you downloaded matches the hash in the script you download. + +1. The Terraform scripts already include links to public images that are provided by Microsoft. Choose the required services and deploy them by following the steps in the included `readme.md`. + + 1. Set any specific flags for your environment, including auction worklet locations. + + 1. Configure all prerequisites and prepare all tools for deployment. + + 1. Create Azure Resources and run the Terraform script that finishes deployment. + +1. Develop worklets including `user-defined-function` (UDF) and start Ad Selection API services. + + + +## Use the Ad Selection API on your website + +To start using the Ad Selection API, sellers and buyers need to modify their websites' JavaScript code that's run when the browser is Microsoft Edge. + +* Sellers: To run private auctions, fetch interest groups, and do reporting, update your code on publishers' websites. + +* Buyers: To create interest groups and store them in the browser, update the code on your advertising partners' websites. You can use the delegation mechanism to restrict and allow Interest Group creation on third-party domains. + +To learn more about which API methods are available and to view example code, see [Ad Selection API details](https://github.com/WICG/privacy-preserving-ads/blob/main/API%20Details.md). + + + +## See also + + +Design and technical documents + * [Ad Selection Overview](https://github.com/WICG/privacy-preserving-ads/blob/main/Ad%20Selection%20Overview.md) + * [Ad Selection API Proposal](https://github.com/WICG/privacy-preserving-ads?tab=readme-ov-file#ad-selection-api-proposal) + * [Ad Selection API details](https://github.com/WICG/privacy-preserving-ads/blob/main/API%20Details.md) + +Images for deployment: +* Sellers + * [Ad Selection Seller Front End Service](https://mcr.microsoft.com/product/ad-selection/azure/seller-frontend-service) + * [Ad Selection Auction Service](https://mcr.microsoft.com/product/ad-selection/azure/auction-service) +* Buyers + * [Ad Selection Buyer Front End Service](https://mcr.microsoft.com/product/ad-selection/azure/buyer-frontend-service) + * [Ad Selection Bidding Service](https://mcr.microsoft.com/product/ad-selection/azure/bidding-service) + * [Ad Selection K-Anonymity Service](https://mcr.microsoft.com/product/ad-selection/azure/k-anonymity-service) +* Sellers and buyers + * [Ad Selection Key Value Service](https://mcr.microsoft.com/product/ad-selection/azure/key-value-service/) + +Deployment scripts: +* [Terraform deployment scripts](https://go.microsoft.com/fwlink/?linkid=2290115) + +Origin trials: +* [Microsoft Edge Origin Trials](https://microsoftedge.github.io/MSEdgeExplainers/origin-trials/) + +Trusted execution environment (TEE): +* [Confidential Computing: Hardware-Based Trusted Execution for Applications and Data](https://confidentialcomputing.io/wp-content/uploads/sites/85/2021/03/confidentialcomputing_outreach_whitepaper-8-5x11-1.pdf) + +Azure: +* [Microsoft Azure](https://azure.microsoft.com) +* [Confidential containers on Azure Container Instances](/azure/container-instances/container-instances-confidential-overview) diff --git a/microsoft-edge/web-platform/os-regional-settings.md b/microsoft-edge/web-platform/os-regional-settings.md index be8d2d080b..907d7a0647 100644 --- a/microsoft-edge/web-platform/os-regional-settings.md +++ b/microsoft-edge/web-platform/os-regional-settings.md @@ -1,5 +1,5 @@ --- -title: Operating System regional data display +title: Display regional versions of your site, based on OS settings description: How users and web developers can use the OS regional format in Microsoft Edge for improved site experiences author: MSEdgeTeam ms.author: msedgedevrel @@ -7,7 +7,7 @@ ms.topic: conceptual ms.service: microsoft-edge ms.date: 08/19/2022 --- -# Operating System regional data display +# Display regional versions of your site, based on OS settings Microsoft Edge provides operating system (OS) regional preference information to help website authors create regional experiences on their website, when viewing your site using Microsoft Edge. This feature allows website authors to deliver value to users who specifically change their regional preferences in the OS to reflect their personal preferences. @@ -17,7 +17,7 @@ Users want to see dates, times, numbers, and other formatting printed according ## Regional format -To reflect a user's regional preferences for how data is displayed (such as the date), Microsoft Edge has a new option in the **Language** section of **Settings**: the **Share additional OS regional format** menu. +To reflect a user's regional preferences for how data is displayed (such as the date), Microsoft Edge has an option in the **Language** section of **Settings**: the **Share additional OS regional format** menu. ![The 'Share additional OS regional format' menu with the Limited (default) option selected](./os-regional-settings-images/os-regional-setting.png) diff --git a/microsoft-edge/web-platform/sidebar.md b/microsoft-edge/web-platform/sidebar.md index e5af0dfa5e..25ef9c277f 100644 --- a/microsoft-edge/web-platform/sidebar.md +++ b/microsoft-edge/web-platform/sidebar.md @@ -1,13 +1,13 @@ --- -title: Develop for the sidebar -description: Learn to develop experiences for the sidebar in Microsoft Edge, by either installing a Progressive Web App, or using the extension sidebar API. +title: Develop experiences for the sidebar in Microsoft Edge +description: Develop experiences for the sidebar in Microsoft Edge, by either installing a Progressive Web App, or using the extension sidebar API. author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.date: 08/04/2023 --- -# Develop for the sidebar +# Develop experiences for the sidebar in Microsoft Edge The sidebar in Microsoft Edge is a persistent pane located on the side of the browser, which coexists with the primary content of the browser. The sidebar allows users to easily access popular websites and utilities alongside their browser tabs. The content in the sidebar augments the user's primary task by enabling side-by-side browsing and minimizing the need to switch contexts between browser tabs. By using the sidebar in Microsoft Edge, users can access the productivity tools they need while staying in their workflow. diff --git a/microsoft-edge/web-platform/web-platform.md b/microsoft-edge/web-platform/web-platform.md index b71d9fc8ec..c5079c9b0e 100644 --- a/microsoft-edge/web-platform/web-platform.md +++ b/microsoft-edge/web-platform/web-platform.md @@ -6,7 +6,7 @@ ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.subservice: devtools -ms.date: 07/24/2023 +ms.date: 10/06/2024 --- # Development tips for Microsoft Edge @@ -78,7 +78,7 @@ As a developer, you can leverage the sidebar for your own experiences in two way * By adapting your existing Progressive Web App (PWA) to run in the sidebar. * By making use of the Sidebar API in your Microsoft Edge extension. -See [Develop for the sidebar](./sidebar.md). +See [Develop experiences for the sidebar in Microsoft Edge](./sidebar.md). @@ -107,6 +107,14 @@ The `password` input control in Microsoft Edge includes a **password reveal** bu See [Customize the password reveal button](./password-reveal.md). + +## Display regional versions of your site, based on OS settings + +Microsoft Edge provides operating system (OS) regional preference information to help website authors create regional experiences on their website, when viewing your site using Microsoft Edge. This feature allows website authors to deliver value to users who specifically change their regional preferences in the OS to reflect their personal preferences. + +See [Display regional versions of your site, based on OS settings](./os-regional-settings.md). + + ## View formatted JSON responses or files @@ -114,4 +122,14 @@ Microsoft Edge includes the **JSON viewer**, a tool that automatically reformats Formatting and highlighting JSON data is useful because sometimes a web server responds to HTTP requests by returning data encoded as JSON. JSON data can be difficult to read when it's formatted as a single long, concatenated line of text. The same can occur when opening a JSON file from disk. The **JSON viewer** reformats JSON server responses and local files, and indicates any lines that have syntax errors. -See [View formatted JSON](../devtools-guide-chromium/json-viewer/json-viewer.md). +See [View formatted JSON responses or files](../devtools-guide-chromium/json-viewer/json-viewer.md). + + + +## Sign up for the Ad Selection API + +The Ad Selection API provides user-relevant ads on your site without using third-party cookies. The Ad Selection API can be used by: +* **Sellers** running a supply-side platform (SSP), who can use the API to provide higher-quality ads for their publishers. +* **Buyers** running a demand-side platform (DSP), who can use the API to improve the effectiveness of advertising campaigns. + +See [Sign up for the Ad Selection API](./ad-selection-api.md). diff --git a/microsoft-edge/webview2/concepts/windowed-vs-visual-hosting.md b/microsoft-edge/webview2/concepts/windowed-vs-visual-hosting.md index f6a006a3b0..cfb95d01b9 100644 --- a/microsoft-edge/webview2/concepts/windowed-vs-visual-hosting.md +++ b/microsoft-edge/webview2/concepts/windowed-vs-visual-hosting.md @@ -1,436 +1,194 @@ --- -title: Windowed vs. visual hosting of WebView2 -description: Deciding whether to have your app use windowed hosting vs. visual hosting of the WebView2 control. Hosting WebView2 in windowed or visual environments. +title: Windowed vs. Visual hosting of WebView2 +description: Deciding whether to have your app use Windowed, Window to Visual, or Visual hosting of the WebView2 control. Hosting WebView2 in Windowed or Visual environments. author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.subservice: webview -ms.date: 10/24/2022 +ms.date: 10/02/2024 --- -# Windowed vs. visual hosting of WebView2 +# Windowed vs. Visual hosting of WebView2 -There are two options for hosting the Microsoft Edge WebView2 control in your app: windowed hosting and visual hosting. +There are three options for hosting the Microsoft Edge WebView2 control in your app: +* The Windowed hosting mode. +* The Window to Visual hosting mode. +* The Visual hosting mode. -If you use windowed hosting, which is a good starting point for most apps, you don't need to read this article. If you want to provide a more custom user experience (UX), and want to use visual hosting, read this article. +You don't need to read this article if you use Windowed hosting in most scenarios. Windowed hosting is a good starting point for most apps. Read this article: +* If you are using Windowed hosting in uncommon scenarios and are experiencing persistent issues with DPI and scaling. In this case, consider Window to Visual hosting. +* If you want to provide a more custom user experience (UX). In this case, consider Visual hosting. + +The different approaches for hosting the WebView2 control in your app are similar in functionality, but they suit different needs depending on the app requirements, as follows: | Approach | Description | Optimized for | |---|---|---| | Windowed hosting | The WebView2 control takes input from the operating system (OS). The OS sends the input to the WebView2. | Displaying web content quickly and easily, without having to include features for inputs, outputs, and accessibility. | -| Visual hosting | Your host app takes spatial input (such as mouse or touch input) from the user. Your app sends this input to the WebView2 control. | More granular control over layout. For example, you can control the positioning of the WebView2 control in the page. The app needs to do specific handling of window management and rendering APIs. | - -These approaches have different requirements, constraints, and benefits. Windowed hosting is simpler to implement than visual hosting. Visual hosting requires all the API calls that Windowed hosting requires, and visual hosting has additional requirements for it to render properly. The API calls are listed in [Windowed hosting](#windowed-hosting) and [Visual hosting](#visual-hosting), below. - - - -## Scenarios for selecting the hosting approach - -Both approaches for hosting the WebView2 control in your app are similar in functionality, but they suit different needs depending on the app requirements. - - -#### Windowed hosting: For displaying content quickly and easily +| Window to Visual hosting | A combination of Windowed and Visual hosting. Similar to Windowed hosting except that WebView2 content is output to a Visual that is hosted in a window rather having content output to the window directly. | A developer experience nearly identical to Windowed hosting, but with improved DPI/scaling handling and the caveat that the Windows Shell Handwriting experience is unsupported. | +| Visual hosting | Your host app takes spatial input (such as mouse or touch input) from the user. Your app sends this input to the WebView2 control. | More granular control over control composition. The app needs to do specific handling of window management and rendering APIs. | -"Windowed" means that in your app, an HWND inherits many default properties from the operating system. +These approaches have different requirements, constraints, and benefits. +* Windowed hosting is simpler to implement than Visual hosting. +* Visual hosting requires all the API calls that Windowed hosting requires, and has additional requirements for it to render properly. -There are instances where you might want to focus on displaying web content as quickly and easily as possible in your app. Windowed hosting allows for a solution that quickly displays web content without having to include features for inputs, outputs, and accessibility. - - -#### Visual hosting: For more granular control over layout - -Visual hosting allows for (and requires) more granular control of layout. When using this approach, the app needs specific handling of window management and rendering APIs. - -With visual hosting, for example you must choose how when the user resizes the window, how the webview scales in relation to the whole page - for example, if you want the webview to scale twice as much as the app. +The supported API lists are linked to in the sections below: +* [APIs for Windowed hosting](#apis-for-windowed-hosting) +* [APIs for Window to Visual hosting](#apis-for-window-to-visual-hosting) +* [APIs for Visual hosting](#apis-for-visual-hosting) -## Compatibility and constraints +## Windowed hosting: For displaying content quickly and easily -Key compatibility limitations include the operating system and rendering in framework and non-framework apps. +_Windowed hosting_ means that in your app, WebView2 content is hosted directly in a window; that is, an HWND. The WebView2 HWND inherits many default properties from the operating system (OS). The WebView2 control takes input from the OS, and the OS sends the input to the WebView2 control. You can have multiple HWNDs in your app that will each be used as a WebView2 component to access web content. +The benefit of this is that some of the Input/Output commands are handled for you by the OS or by the framework. However, you will still need to handle some aspects of window management. - -#### Operating systems - -Windows 7 and Windows 8 can only do windowed hosting, not visual hosting. - -See [Windows 7 and 8](../index.md#windows-7-and-8) in _Introduction to Microsoft Edge WebView2_. +For general information about Window management and `HWND` functionality, see [About Windows](/windows/win32/winmsg/about-windows). -#### Rendering WebView2 in framework and non-framework apps +#### Advantages -If you're using a UI framework for your app, you should use the corresponding WebView2 element for that UI framework. If you aren't using a UI framework for your app (such as Win32 or React Native) or your UI framework doesn't have a WebView2 element, you'll need to create `CoreWebView2Controller` and render it into the desired app. +* Windowed hosting allows for a solution that quickly displays web content without having to implement functionality for inputs, outputs, and accessibility. -**Note:** If your app's UI is built using `DirectComposition` or `Windows.UI.Composition`, then you should use `CoreWebView2CompositionController`, otherwise you should use `CoreWebView2Controller`. +* Owned and child windows (such as menus and context menus) automatically scale to match the app's parent `HWND` scaling. -The `CoreWebView2Controller` properties and methods: +* Windowed hosting handles how the WebView2 control manages being focused and tabbing in or out of itself when pressing **Tab** reaches the final element. -##### [.NET/C#](#tab/dotnetcsharp) +* You don't have to manage the various composition-based rendering controls (such as Inputs, Outputs, and Accessibility controls) if you don't want to. -* [CoreWebView2Controller.CoreWebView2 Property](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.corewebview2) -* [CoreWebView2Controller.Close Method](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.close) -* [CoreWebView2Environment.CreateCoreWebView2ControllerAsync Method](/dotnet/api/microsoft.web.webview2.core.corewebview2environment.createcorewebview2controllerasync) -##### [WinRT/C#](#tab/winrtcsharp) + +#### Disadvantages -* [CoreWebView2Controller.CoreWebView2 Property](/microsoft-edge/webview2/reference/win32/icorewebview2controller#get_corewebview2) -* [CoreWebView2Controller.Close Method](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2controller#close) -* [CoreWebView2Environment.CreateCoreWebView2ControllerAsync Method](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2environment#createcorewebview2controllerasync) +Windowed hosting mode can run into DPI issues in some scenarios, such as when sharing a user data folder (and therefor sharing a browser process) across different applications with different DPI awareness. -##### [Win32/C++](#tab/win32cpp) -* [ICoreWebView2Controller::CoreWebView2 property](/microsoft-edge/webview2/reference/win32/icorewebview2controller#get_corewebview2) -* [ICoreWebView2Controller::Close method](/microsoft-edge/webview2/reference/win32/icorewebview2controller#close) -* [ICoreWebView2Environment::CreateCoreWebView2Controller method](/microsoft-edge/webview2/reference/win32/icorewebview2environment#createcorewebview2controller) + +#### APIs for Windowed hosting ---- +For a list of APIs that can be used when configuring WebView2 for Windowed hosting (or for Window to Visual hosting), see [Rendering WebView2 in non-framework apps](./overview-features-apis.md#rendering-webview2-in-non-framework-apps) in _Overview of WebView2 features and APIs_. -## Windowed hosting +## Window to Visual hosting: For a similar experience as Windowed hosting, with added benefits and tradeoff -Windowed hosting can be described as an HWND that stores information. You can have multiple HWNDs in your app that will each be used as a WebView component to access web content. Some of the Output/Input commands are handled for you by the framework you choose; however, you will still need to handle window management. +_Window-to-Visual hosting_ means that the WebView2 content is outputted to a Visual that is hosted in an HWND, rather than outputting content to a window directly or to a Visual directly. By hosting content in an HWND, Window to Visual hosting is easy to use, in the same ways as Windowed hosting. But by displaying content by using a Visual, Window-to-Visual hosting avoids some DPI and input issues that can result when using Windowed hosting. -Benefits for Windowed hosting include: +Window to Visual hosting doesn't require you to use the WebView2 Visual hosting APIs. -* Zooming and rasterization scales (for example, menus, context menus, and so on) will also automatically scale to the app's parent `HWND`. It also handles how the WebView manages being focused and tabbing in/out of itself when it reaches the final element. +To enable Window to Visual hosting, the environment variable `COREWEBVIEW2_FORCED_HOSTING_MODE` must be set to the value `COREWEBVIEW2_HOSTING_MODE_WINDOW_TO_VISUAL` before initializing your WebView2. -* The app handles keyboard accelerators and keyboard shortcuts when in the WebView. For example, **Ctrl+C** in a WebView will know that you are trying to copy content in the WebView, and not pressing **Ctrl** and **C** separately. - -* You don't have to manage the various composition-based rendering (for example, Inputs, Outputs, and Accessibility controls) if you don't want to. - -For general information regarding Window management and `HWND` functionality, see [About Windows](/windows/win32/winmsg/about-windows). +In Window-to-Visual hosting and Visual hosting, a _Visual_ is a basic graphical unit that can be used to compose graphical experiences on Windows. The Windows graphics APIs that expose this functionality and are relevant to WebView2 are `DirectComposition` and `Windows.UI.Composition`. The "Visual" in "Visual hosting" can be any one of `IDCompositionVisual`, `IDCompositionTarget`, or `Windows.UI.Composition.Visual`, which are Visuals that are exposed through the `DirectComposition` and `Windows.UI.Composition` APIs. (Window to Visual hosting uses `IDCompositionVisual` specifically.) See: +* [Basic concepts](/windows/win32/directcomp/basic-concepts) in the Windows App Development > DirectComposition docs. +* [Composition visual](/windows/uwp/composition/composition-visual-tree) in the Windows App Development > UWP docs. -#### Window management - -The following aspects of window management are handled in a windowed hosting environment. - - - -###### Sizing, positioning, and visibility - -`CoreWebView2Controller` takes a parent `HWND`. The `Bounds` property sizes and positions the WebView2 relative to the parent `HWND`. The visibility of WebView2 can be toggled by using `IsVisible`. - -##### [.NET/C#](#tab/dotnetcsharp) +#### Advantages -* [CoreWebView2Controller.Bounds Property](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.bounds#microsoft-web-webview2-core-corewebview2controller-bounds) -* [CoreWebView2Controller.IsVisible Property](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.isvisible) +* Different apps that share a WebView2 user data folder can have different DPI awareness. -##### [WinRT/C#](#tab/winrtcsharp) +* Different apps that share a WebView2 user data folder can have different integrity levels. -* [CoreWebView2Controller.Bounds Property](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2controller#bounds) -* [CoreWebView2Controller.IsVisible Property](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2controller#isvisible) +* Different apps that share a WebView2 user data folder won't potentially cause each other to hang due to attached window input queues. -##### [Win32/C++](#tab/win32cpp) - -* [ICoreWebView2Controller::Bounds property (get](/microsoft-edge/webview2/reference/win32/icorewebview2controller#get_bounds), [put)](/microsoft-edge/webview2/reference/win32/icorewebview2controller#put_bounds) -* [ICoreWebView2Controller::IsVisible property (get](/microsoft-edge/webview2/reference/win32/icorewebview2controller#get_isvisible), [put)](/microsoft-edge/webview2/reference/win32/icorewebview2controller#put_isvisible) - ---- - - - -###### Zooming - -WebView2 `ZoomFactor` is used to scale just the web content. This is also updated when the user zooms the content through **Ctrl**+Mouse Wheel. - -##### [.NET/C#](#tab/dotnetcsharp) - -* [CoreWebView2Controller.ZoomFactor Property](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.zoomfactor#microsoft-web-webview2-core-corewebview2controller-zoomfactor) -* [CoreWebView2Controller.ZoomFactorChanged Event](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.zoomfactorchanged) -* [CoreWebView2Controller.SetBoundsAndZoomFactor Method](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.setboundsandzoomfactor) - -##### [WinRT/C#](#tab/winrtcsharp) - -* [CoreWebView2Controller.ZoomFactor Property](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2controller#zoomfactor) -* [CoreWebView2Controller.ZoomFactorChanged Event](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2controller#zoomfactorchanged) -* [CoreWebView2Controller.SetBoundsAndZoomFactor Method](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2controller#setboundsandzoomfactor) - -##### [Win32/C++](#tab/win32cpp) - -* [ICoreWebView2Controller::ZoomFactor property (get](/microsoft-edge/webview2/reference/win32/icorewebview2controller#get_zoomfactor), [put)](/microsoft-edge/webview2/reference/win32/icorewebview2controller#put_zoomfactor) -* [ICoreWebView2Controller::ZoomFactorChanged event (add](/microsoft-edge/webview2/reference/win32/icorewebview2controller#add_zoomfactorchanged), [remove)](/microsoft-edge/webview2/reference/win32/icorewebview2controller#remove_zoomfactorchanged) -* [ICoreWebView2Controller::SetBoundsAndZoomFactor method](/microsoft-edge/webview2/reference/win32/icorewebview2controller#setboundsandzoomfactor) - ---- +* When hosting a WebView2 in a VSTO Add-in, changing monitor scale won't potentially cause the app to hang. See [VSTO Add-ins](/visualstudio/vsto/office-solutions-development-overview-vsto#vsto-add-ins) in _Office solutions development overview (VSTO)_. -#### Rasterization scale - -The `RasterizationScale` API scales all WebView2 UI including context menus, tooltip, and popups. The app can set whether the WebView2 should detect monitor scale changes and automatically update the `RasterizationScale`. `BoundsMode` is used to configure whether the `Bounds` property is interpreted as raw pixels, or DIPs (which need to be scaled by `RasterizationScale`). - -##### [.NET/C#](#tab/dotnetcsharp) - -* [CoreWebView2Controller.BoundsMode Property](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.boundsmode#microsoft-web-webview2-core-corewebview2controller-boundsmode) - * [CoreWebView2BoundsMode Enum](/dotnet/api/microsoft.web.webview2.core.corewebview2boundsmode) -* [CoreWebView2Controller.RasterizationScale Property](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.rasterizationscale) -* [CoreWebView2Controller.RasterizationScaleChanged Event](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.rasterizationscalechanged) -* [CoreWebView2Controller.ShouldDetectMonitorScaleChanges Property](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.shoulddetectmonitorscalechanges) - -##### [WinRT/C#](#tab/winrtcsharp) - -* [CoreWebView2Controller.BoundsMode Property](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2controller#boundsmode) - * [CoreWebView2BoundsMode Enum](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2boundsmode) -* [CoreWebView2Controller.RasterizationScale Property](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2controller#rasterizationscale) -* [CoreWebView2Controller.RasterizationScaleChanged Event](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2controller#rasterizationscalechanged) -* [CoreWebView2Controller.ShouldDetectMonitorScaleChanges Property](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2controller#shoulddetectmonitorscalechanges) - -##### [Win32/C++](#tab/win32cpp) - -* [ICoreWebView2Controller::BoundsMode property (get](/microsoft-edge/webview2/reference/win32/icorewebview2controller#get_bounds), [put)](/microsoft-edge/webview2/reference/win32/icorewebview2controller#put_bounds) - * [COREWEBVIEW2_BOUNDS_MODE enum](/microsoft-edge/webview2/reference/win32/icorewebview2#corewebview2_bounds_mode) -* [ICoreWebView2Controller::RasterizationScale property (get](/microsoft-edge/webview2/reference/win32/icorewebview2controller3#get_rasterizationscale), [put)](/microsoft-edge/webview2/reference/win32/icorewebview2controller3#put_rasterizationscale) -* [ICoreWebView2Controller::RasterizationScaleChanged event (add](/microsoft-edge/webview2/reference/win32/icorewebview2controller3#add_rasterizationscalechanged), [remove)](/microsoft-edge/webview2/reference/win32/icorewebview2controller3#remove_rasterizationscalechanged) -* [ICoreWebView2Controller::ShouldDetectMonitorScaleChanges property (get](/microsoft-edge/webview2/reference/win32/icorewebview2controller3#get_shoulddetectmonitorscalechanges), [put)](/microsoft-edge/webview2/reference/win32/icorewebview2controller3#put_rasterizationscale) - ---- - - - -###### Focus and tabbing - -WebView2 raises events to let the app know when it gains or loses focus. For tabbing, there's an API to move focus into WebView2, and an event for WebView2 to request the app to take focus back. - -##### [.NET/C#](#tab/dotnetcsharp) - -* [CoreWebView2Controller.MoveFocus Method](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.movefocus) - * [CoreWebView2MoveFocusReason Enum](/dotnet/api/microsoft.web.webview2.core.corewebview2movefocusreason) -* [CoreWebView2Controller.MoveFocusRequested Event](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.movefocusrequested) - * [CoreWebView2MoveFocusRequestedEventArgs Class](/dotnet/api/microsoft.web.webview2.core.corewebview2movefocusrequestedeventargs) -* [CoreWebView2Controller.GotFocus Event](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.gotfocus) -* [CoreWebView2Controller.LostFocus Event](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.lostfocus) - -##### [WinRT/C#](#tab/winrtcsharp) +#### Disadvantages -* [CoreWebView2Controller.MoveFocus Method](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2controller#movefocus) - * [CoreWebView2MoveFocusReason Enum](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2movefocusreason) -* [CoreWebView2Controller.MoveFocusRequested Event](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2controller#movefocusrequested) - * [CoreWebView2MoveFocusRequestedEventArgs Class](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2movefocusrequestedeventargs) -* [CoreWebView2Controller.GotFocus Event](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2controller#gotfocus) -* [CoreWebView2Controller.LostFocus Event](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2controller#lostfocus) +Enabling Window to Visual hosting mode removes support for Windows Shell Handwriting within the WebView2. -##### [Win32/C++](#tab/win32cpp) +See also: +* [Ink input](/windows/win32/input_ink/input-ink-portal) - Windows App Development > User Interaction. +* [shellhandwriting.h header](/windows/win32/api/shellhandwriting/) - Win32 API. -* [ICoreWebView2Controller::MoveFocus method](/microsoft-edge/webview2/reference/win32/icorewebview2controller#movefocus) - * [COREWEBVIEW2_MOVE_FOCUS_REASON enum](/microsoft-edge/webview2/reference/win32/icorewebview2#corewebview2_move_focus_reason) -* [ICoreWebView2Controller::MoveFocusRequested event (add](/microsoft-edge/webview2/reference/win32/icorewebview2controller#add_movefocusrequested), [remove)](/microsoft-edge/webview2/reference/win32/icorewebview2controller#remove_movefocusrequested) - * [ICoreWebView2MoveFocusRequestedEventArgs interface](/microsoft-edge/webview2/reference/win32/icorewebview2movefocusrequestedeventargs) -* [ICoreWebView2Controller::GotFocus event (add](/microsoft-edge/webview2/reference/win32/icorewebview2controller#add_gotfocus), [remove)](/microsoft-edge/webview2/reference/win32/icorewebview2controller#remove_gotfocus) -* [ICoreWebView2Controller::LostFocus event (add](/microsoft-edge/webview2/reference/win32/icorewebview2controller#add_lostfocus), [remove)](/microsoft-edge/webview2/reference/win32/icorewebview2controller#remove_lostfocus) ---- - - - -###### Parent window - -WebView2 can be re-parented to a different parent `HWND`. WebView2 also needs to be notified when the app's position on the screen changes. - - -##### [.NET/C#](#tab/dotnetcsharp) - -* [CoreWebView2Controller.NotifyParentWindowPositionChanged Method](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.notifyparentwindowpositionchanged) -* [CoreWebView2Controller.ParentWindow Property](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.notifyparentwindowpositionchanged) - -##### [WinRT/C#](#tab/winrtcsharp) - -* [CoreWebView2Controller.NotifyParentWindowPositionChanged Method](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.notifyparentwindowpositionchanged) -* [CoreWebView2Controller.ParentWindow Property](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.parentwindow) - -##### [Win32/C++](#tab/win32cpp) - -* [ICoreWebView2Controller::NotifyParentWindowPositionChanged method](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2controller#notifyparentwindowpositionchanged) -* [ICoreWebView2Controller::ParentWindow property (get)](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2controller#parentwindow) - ---- - - - -###### Keyboard accelerators - -When WebView2 has focus, it receives input directly from the user. An app may want to intercept and handle certain accelerator key combinations or disable the normal browser accelerator key behaviors. - -##### [.NET/C#](#tab/dotnetcsharp) - -* [CoreWebView2Settings.AreBrowserAcceleratorKeysEnabled Property](/dotnet/api/microsoft.web.webview2.core.corewebview2settings.arebrowseracceleratorkeysenabled) -* [CoreWebView2Controller.AcceleratorKeyPressed Event](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.acceleratorkeypressed) - * [CoreWebView2AcceleratorKeyPressedEventArgs Class](/dotnet/api/microsoft.web.webview2.core.corewebview2acceleratorkeypressedeventargs) - * [CoreWebView2KeyEventKind Enum](/dotnet/api/microsoft.web.webview2.core.corewebview2keyeventkind) - * [CoreWebView2PhysicalKeyStatus Struct](/dotnet/api/microsoft.web.webview2.core.corewebview2physicalkeystatus) - -##### [WinRT/C#](#tab/winrtcsharp) - -* [CoreWebView2Settings.AreBrowserAcceleratorKeysEnabled Property](/dotnet/api/microsoft.web.webview2.core.corewebview2settings.arebrowseracceleratorkeysenabled) -* [CoreWebView2Controller.AcceleratorKeyPressed Event](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.acceleratorkeypressed) - * [CoreWebView2AcceleratorKeyPressedEventArgs Class](/dotnet/api/microsoft.web.webview2.core.corewebview2acceleratorkeypressedeventargs) - * [CoreWebView2KeyEventKind Enum](/dotnet/api/microsoft.web.webview2.core.corewebview2keyeventkind) - * [CoreWebView2PhysicalKeyStatus Struct](/dotnet/api/microsoft.web.webview2.core.corewebview2physicalkeystatus) - -##### [Win32/C++](#tab/win32cpp) - -* [ICoreWebView2Settings::AreBrowserAcceleratorKeysEnabled property (get](/microsoft-edge/webview2/reference/win32/icorewebview2settings3#get_arebrowseracceleratorkeysenabled), [put)](/microsoft-edge/webview2/reference/win32/icorewebview2settings3#put_arebrowseracceleratorkeysenabled) -* [ICoreWebView2Controller::AcceleratorKeyPressed event (add](/microsoft-edge/webview2/reference/win32/icorewebview2controller#add_acceleratorkeypressed), [remove)](/microsoft-edge/webview2/reference/win32/icorewebview2controller#remove_acceleratorkeypressed) - * [ICoreWebView2AcceleratorKeyPressedEventArgs class](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2acceleratorkeypressedeventargs) - * [ICoreWebView2KeyEventKind enum](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2keyeventkind) - * [ICoreWebView2PhysicalKeyStatus struct](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2physicalkeystatus) - ---- - - - -###### Default background color - -WebView2 can specify a default background color. This can be any opaque color or transparent color. This color will be used if the webpage doesn't set its own background color. - -##### [.NET/C#](#tab/dotnetcsharp) - -* [CoreWebView2Controller.DefaultBackgroundColor Property](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.defaultbackgroundcolor) - * [CoreWebView2Color Struct](/dotnet/api/microsoft.web.webview2.core.corewebview2color) - -##### [WinRT/C#](#tab/winrtcsharp) - -* [CoreWebView2Controller.DefaultBackgroundColor Property](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.defaultbackgroundcolor#microsoft-web-webview2-core-corewebview2controller-defaultbackgroundcolor) - * [CoreWebView2Color Struct](/dotnet/api/microsoft.web.webview2.core.corewebview2color) - -##### [Win32/C++](#tab/win32cpp) - -* [ICoreWebView2Controller::DefaultBackgroundColor property (get](/microsoft-edge/webview2/reference/win32/icorewebview2controller2#get_defaultbackgroundcolor), [put)](/microsoft-edge/webview2/reference/win32/icorewebview2controller2#put_defaultbackgroundcolor) - * [COREWEBVIEW2_COLOR struct](/microsoft-edge/webview2/reference/win32/icorewebview2#corewebview2_color) + +#### APIs for Window to Visual hosting ---- +For a list of APIs that can be used when configuring WebView2 Window to Visual hosting (or for Windowed hosting), see [Rendering WebView2 in non-framework apps](./overview-features-apis.md#rendering-webview2-in-non-framework-apps) in _Overview of WebView2 features and APIs_. -## Visual hosting - -In visual hosting, content is embedded to a given location on the application. This location must handle how content will scale and behave in an app when the user interacts with the application. In addition to the window management described for windowed hosting, visual hosting will need the app to manage the composition-based rendering, when it receives any user interactions. For more information about visual hosting, see [Using the Visual layer in desktop apps](/windows/apps/desktop/modernize/visual-layer-in-desktop-apps). - -If your WebView2 app uses visual hosting: +## Visual hosting: For more granular control over layout -* Inputs are routed to the app's `HWND` and must be configured to send the spatial input (for example, mouse, touch, and pen) based on positions, _not_ what currently has focus, such as a keyboard. - -The following APIs can be used when configuring WebView2 in a visual hosting environment: +When using _Visual hosting_, your host app receives spatial input (such as mouse or touch input) from the user, and forwards this input to the WebView2 control. Visual hosting requires the app to do the same window management as Windowed hosting, but has additional window management requirements regarding: +* Scaling the contents. +* Routing spatial inputs (such as mouse, touch, or pen). -#### Composition-based rendering - -For composition-based WebView2 rendering, use the `CoreWebView2Environment` to create a `CoreWebView2CompositionController`. The `CoreWebView2CompositionController` implements all the APIs as `CoreWebView2Controller`, but includes additional APIs specific to composition-based rendering. - -##### [.NET/C#](#tab/dotnetcsharp) - -* [CoreWebView2CompositionController Class](/dotnet/api/microsoft.web.webview2.core.corewebview2compositioncontroller) -* [CoreWebView2Environment.CreateCoreWebView2CompositionControllerAsync Method](/dotnet/api/microsoft.web.webview2.core.corewebview2environment.createcorewebview2compositioncontrollerasync) +#### Requirements for scaling the contents -##### [WinRT/C#](#tab/winrtcsharp) +Per composition-based rendering, a WebView2 control is part of a Visual tree, so by default, it's rendered at a scale that's based on the scales of all of its ancestor Visuals. For example, if a WebView2's ancestor Visual is scaled (zoomed) 2x, then the WebView2's contents are also rendered at 2x scale. If the WebView2's parent Visual is scaled 2x and that Visual's parent is also scaled 2x, then the WebView2 is scaled 4x. But because the WebView2 isn't scaling its own contents, they're blurry. -* [CoreWebView2CompositionController Class](/dotnet/api/microsoft.web.webview2.core.corewebview2compositioncontroller) -* [CoreWebView2Environment.CreateCoreWebView2CompositionControllerAsync Method](/dotnet/api/microsoft.web.webview2.core.corewebview2environment.createcorewebview2compositioncontrollerasync) - -##### [Win32/C++](#tab/win32cpp) - -* [ICoreWebView2CompositionController interface](/microsoft-edge/webview2/reference/win32/icorewebview2compositioncontroller) -* [ICoreWebView2Environment::CreateCoreWebView2CompositionController method](/microsoft-edge/webview2/reference/win32/icorewebview2environment3#createcorewebview2compositioncontroller) - ---- +To resolve this, the app can undo the default Visual scaling of the WebView2, and instead use the Rasterization Scale APIs to apply the intended Visual scaling. This results in the WebView2's contents rendering at the correct scale. See [Rasterization scale](./overview-features-apis.md#rasterization-scale) in _Overview of WebView2 features and APIs_. -#### Output +#### Requirements for routing spatial inputs (mouse, touch, or pen) -WebView2 can connect its composition tree to `IDCompositionVisual`, `IDCompositionTarget`, or `Windows::UI::Composition::ContainerVisual`. +If your WebView2 app uses Visual hosting, no spatial inputs (such as mouse, touch, or pen) are sent to the WebView2 control, unless the app manages such input. Input is sent to the app's `HWND`, and the app is responsible for forwarding this spatial input to the WebView2, if the input's position is over the WebView2. -##### [.NET/C#](#tab/dotnetcsharp) +The app is also responsible for any necessary transformation of input positions into the WebView2's coordinate space. -* [CoreWebView2CompositionController.RootVisualTarget Property](/dotnet/api/microsoft.web.webview2.core.corewebview2compositioncontroller.rootvisualtarget) -##### [WinRT/C#](#tab/winrtcsharp) +See also: +* [Using the Visual layer in desktop apps](/windows/apps/desktop/modernize/visual-layer-in-desktop-apps) in Windows > App development docs. -* [CoreWebView2CompositionController.RootVisualTarget Property](/dotnet/api/microsoft.web.webview2.core.corewebview2compositioncontroller.rootvisualtarget) -##### [Win32/C++](#tab/win32cpp) + +#### Advantages and disadvantages -* [ICoreWebView2CompositionController::RootVisualTarget property (get](/microsoft-edge/webview2/reference/win32/icorewebview2compositioncontroller#get_rootvisualtarget), [put)](/microsoft-edge/webview2/reference/win32/icorewebview2compositioncontroller#put_rootvisualtarget) +Visual hosting allows for (and requires) more granular control of layout. When using this approach, the app needs specific handling of window management and rendering APIs. ---- +For example, if a user action causes the WebView2's Visual tree to scale, the app must adjust the WebView2's scale to render correctly relative to its parent Visuals. -#### Input - -Spatial input such as mouse, touch, or pen is received by the app and must be sent to WebView2. WebView2 notifies the app when the cursor should be updated based on the input device's position. - -##### [.NET/C#](#tab/dotnetcsharp) - -* [CoreWebView2CompositionController.Cursor Property](/dotnet/api/microsoft.web.webview2.core.corewebview2compositioncontroller.cursor) -* [CoreWebView2CompositionController.CursorChanged Event](/dotnet/api/microsoft.web.webview2.core.corewebview2compositioncontroller.cursorchanged) -* [CoreWebView2CompositionController.SystemCursorId Property](/dotnet/api/microsoft.web.webview2.core.corewebview2compositioncontroller.systemcursorid) -* [CoreWebView2CompositionController.SendMouseInput Method](/dotnet/api/microsoft.web.webview2.core.corewebview2compositioncontroller.sendmouseinput) - * [CoreWebView2MouseEventKind Enum](/dotnet/api/microsoft.web.webview2.core.corewebview2mouseeventkind) - * [CoreWebView2MouseEventVirtualKeys Enum](/dotnet/api/microsoft.web.webview2.core.corewebview2mouseeventvirtualkeys) -* [CoreWebView2CompositionController.SendPointerInput Method](/dotnet/api/microsoft.web.webview2.core.corewebview2compositioncontroller.sendpointerinput) - * [CoreWebView2PointerEventKind Enum](/dotnet/api/microsoft.web.webview2.core.corewebview2pointereventkind) -* [CoreWebView2Environment.CreateCoreWebView2PointerInfo Method](/dotnet/api/microsoft.web.webview2.core.corewebview2environment.createcorewebview2pointerinfo) - * [CoreWebView2PointerInfo Class](/dotnet/api/microsoft.web.webview2.core.corewebview2pointerinfo) - -##### [WinRT/C#](#tab/winrtcsharp) - -* [CoreWebView2CompositionController.Cursor Property](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2compositioncontroller#cursor) -* [CoreWebView2CompositionController.CursorChanged Event](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2compositioncontroller#cursorchanged) -* [CoreWebView2CompositionController.SendMouseInput Method](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2compositioncontroller#sendmouseinput) - * [CoreWebView2MouseEventKind Enum](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2mouseeventkind) - * [CoreWebView2MouseEventVirtualKeys Enum](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2mouseeventvirtualkeys) -* [CoreWebView2CompositionController.SendPointerInput Method](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2compositioncontroller#sendpointerinput) - * [CoreWebView2PointerEventKind Enum](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2mouseeventkind) -* [CoreWebView2Environment.CreateCoreWebView2PointerInfo Method](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2environment#createcorewebview2pointerinfo) - * [CoreWebView2PointerInfo Class](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2pointerinfo) - - - -##### [Win32/C++](#tab/win32cpp) - -* [ICoreWebView2CompositionController::Cursor property (get)](/microsoft-edge/webview2/reference/win32/icorewebview2compositioncontroller#get_cursor) -* [ICoreWebView2CompositionController::CursorChanged event (add](/microsoft-edge/webview2/reference/win32/icorewebview2compositioncontroller#add_cursorchanged), [remove)](/microsoft-edge/webview2/reference/win32/icorewebview2compositioncontroller#remove_cursorchanged) -* [ICoreWebView2CompositionController::SystemCursorId property (get)](/microsoft-edge/webview2/reference/win32/icorewebview2compositioncontroller#get_systemcursorid) -* [ICoreWebView2CompositionController::SendMouseInput method](/microsoft-edge/webview2/reference/win32/icorewebview2compositioncontroller#sendmouseinput) - * [COREWEBVIEW2_MOUSE_EVENT_KIND enum](/microsoft-edge/webview2/reference/win32/icorewebview2#corewebview2_mouse_event_kind) - * [COREWEBVIEW2_MOUSE_EVENT_VIRTUAL_KEYS enum](/microsoft-edge/webview2/reference/win32/icorewebview2#corewebview2_mouse_event_virtual_keys) -* [ICoreWebView2CompositionController::SendPointerInput method](/microsoft-edge/webview2/reference/win32/icorewebview2compositioncontroller#sendpointerinput) - * [COREWEBVIEW2_POINTER_EVENT_KIND enum](/microsoft-edge/webview2/reference/win32/icorewebview2#corewebview2_pointer_event_kind) -* [ICoreWebView2Environment::CreateCoreWebView2PointerInfo method](/microsoft-edge/webview2/reference/win32/icorewebview2environment3#createcorewebview2pointerinfo) - * [ICoreWebView2PointerInfo interface](/microsoft-edge/webview2/reference/win32/icorewebview2pointerinfo) +#### APIs for Visual hosting ---- +For a list of APIs that can be used when configuring WebView2 in a Visual hosting environment, see [Rendering WebView2 using Composition](./overview-features-apis.md#rendering-webview2-using-composition) in _Overview of WebView2 features and APIs_. - -#### Accessibility + +## Compatibility and constraints -By default, WebView2 will show up in the accessibility tree as a child of the parent `HWND`. WebView2 provides an API to better position the WebView2 content relative to other elements in the app. +Key compatibility limitations include the operating system and rendering in framework and non-framework apps. -##### [.NET/C#](#tab/dotnetcsharp) -Not applicable. + +#### Operating systems -##### [WinRT/C#](#tab/winrtcsharp) +All hosting modes are supported wherever WebView2 is supported; that is, Windows 10 and later, and certain Windows Server versions. Windows 7, 8 and 8.1 are no longer supported; Windows 7 and Windows 8 only support Windowed hosting, not Visual hosting. -Not applicable. +See also: +* [Windows 7 and 8](../index.md#windows-7-and-8) in _Introduction to Microsoft Edge WebView2_. -##### [Win32/C++](#tab/win32cpp) -* [ICoreWebView2CompositionController::AutomationProvider property (get)](/microsoft-edge/webview2/reference/win32/icorewebview2compositioncontroller2#get_automationprovider) -* [ICoreWebView2Environment::GetAutomationProviderForWindow method](/microsoft-edge/webview2/reference/win32/icorewebview2environment4#getautomationproviderforwindow) + +#### Framework constraints ---- +`CreateCoreWebView2CompositionController` does not support WinAppSDK Visuals; that is, Visual objects in the `Microsoft.UI.Composition` namespace, described in [Enhance UI with the Visual layer (Windows App SDK/WinUI 3)](/windows/apps/windows-app-sdk/composition). - - - +## See also + + +* [Overview of WebView2 features and APIs](./overview-features-apis.md) +* [Windows 7 and 8](../index.md#windows-7-and-8) in _Introduction to Microsoft Edge WebView2_. + + +External: +* [About Windows](/windows/win32/winmsg/about-windows) - Window management and `HWND` functionality. +* [Using the Visual layer in desktop apps](/windows/apps/desktop/modernize/visual-layer-in-desktop-apps) - Windows App Development. +* [Basic concepts](/windows/win32/directcomp/basic-concepts) - Windows App Development > DirectComposition. +* [Composition visual](/windows/uwp/composition/composition-visual-tree) - Windows App Development > UWP. +* [Ink input](/windows/win32/input_ink/input-ink-portal) - Windows App Development > User Interaction. +* [shellhandwriting.h header](/windows/win32/api/shellhandwriting/) - Win32 API.