diff --git a/microsoft-edge/devtools/network/reference.md b/microsoft-edge/devtools/network/reference.md index ca5f5b66df..8314cbf032 100644 --- a/microsoft-edge/devtools/network/reference.md +++ b/microsoft-edge/devtools/network/reference.md @@ -858,7 +858,7 @@ The **Requests** table displays the following columns by default: - **Time**. The total duration, from the start of the request to the receipt of the final byte in the response. - **Fulfilled by**. Whether the request was fulfilled by the HTTP cache or the app's service worker. -The **Waterfall** column is off by default. To turn on the The **Waterfall** column, right-click a **Requests** table header, and then select the plain **Waterfall** menuitem that doesn't have a submenu. +The **Waterfall** column is off by default. To turn on the **Waterfall** column, right-click a **Requests** table header, and then select the plain **Waterfall** menuitem that doesn't have a submenu. @@ -931,7 +931,7 @@ To group requests by iframes: Use the **Waterfall** column of the **Requests** pane to view the timing relationships of requests. The default organization of the **Waterfall** column uses the start time of the requests. So, requests that are farther to the left started earlier than the requests that are farther to the right. -The **Waterfall** column is off by default. To turn on the The **Waterfall** column, right-click a **Requests** table header, and then select the plain **Waterfall** menuitem that doesn't have a submenu. +The **Waterfall** column is off by default. To turn on the **Waterfall** column, right-click a **Requests** table header, and then select the plain **Waterfall** menuitem that doesn't have a submenu. To see the different ways that you can sort the Waterfall, see [Sort by activity phase](#sort-by-activity-phase), above. @@ -1365,7 +1365,7 @@ For more information about each of the phases that may be displayed in the **Tim To display a preview of the timing breakdown of a request, in the **Waterfall** column of the **Requests** table, hover on the entry for the request. -The **Waterfall** column is off by default. To turn on the The **Waterfall** column, right-click a **Requests** table header, and then select the plain **Waterfall** menuitem that doesn't have a submenu. +The **Waterfall** column is off by default. To turn on the **Waterfall** column, right-click a **Requests** table header, and then select the plain **Waterfall** menuitem that doesn't have a submenu. ![Previewing the timing breakdown of a request](./reference-images/resources-waterfall-hover.png) @@ -1428,7 +1428,7 @@ DevTools displays the timing of the `DOMContentLoaded` and `load` events in mult * In the **Overview** pane with vertical lines. -* In the **Waterfall** column of the Request table with vertical lines. The **Waterfall** column is off by default. To turn on the The **Waterfall** column, right-click a **Requests** table header, and then select the plain **Waterfall** menuitem that doesn't have a submenu. +* In the **Waterfall** column of the Request table with vertical lines. The **Waterfall** column is off by default. To turn on the **Waterfall** column, right-click a **Requests** table header, and then select the plain **Waterfall** menuitem that doesn't have a submenu. * In the **Summary** pane, at the bottom of the **Network** tool, with timing labels. diff --git a/microsoft-edge/devtools/rendering-tools/js-runtime.md b/microsoft-edge/devtools/rendering-tools/js-runtime.md index 2e89bc8858..3fe67d3a6a 100644 --- a/microsoft-edge/devtools/rendering-tools/js-runtime.md +++ b/microsoft-edge/devtools/rendering-tools/js-runtime.md @@ -129,7 +129,7 @@ Click the **Restore all functions** (![Restore all functions](./js-runtime-image The **Chart** view provides a visual representation of the Sampling Profile over time. -After you record a memory allocation sampling profile, view the recording as a flame chart. Select **Chart** in the the **Profile view mode** dropdown list (which initially says **Heavy (Bottom Up)**): +After you record a memory allocation sampling profile, view the recording as a flame chart. Select **Chart** in the **Profile view mode** dropdown list (which initially says **Heavy (Bottom Up)**): ![Flame chart view](./js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-chart.png) diff --git a/microsoft-edge/devtools/workspaces/workspace-tutorial.md b/microsoft-edge/devtools/workspaces/workspace-tutorial.md index 58588ce306..5e7af61642 100644 --- a/microsoft-edge/devtools/workspaces/workspace-tutorial.md +++ b/microsoft-edge/devtools/workspaces/workspace-tutorial.md @@ -226,7 +226,7 @@ The DevTools **Workspace** tab is similar to using an editor to edit the HTML so The **index.html** tab opens in the **Sources** tool. -1. In the the `

` tag, replace "DevTools Workspaces Demo" with "I Love Cake". +1. In the `

` tag, replace "DevTools Workspaces Demo" with "I Love Cake". An asterisk appears next to `index.html`. diff --git a/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/app-available-icon.png b/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/app-available-icon.png new file mode 100644 index 0000000000..563fe3bf4d Binary files /dev/null and b/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/app-available-icon.png differ diff --git a/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/application-icon.png b/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/application-icon.png new file mode 100644 index 0000000000..8737a8a039 Binary files /dev/null and b/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/application-icon.png differ diff --git a/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/devtools-go-offline.png b/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/devtools-go-offline.png deleted file mode 100644 index 13f55127e2..0000000000 Binary files a/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/devtools-go-offline.png and /dev/null differ diff --git a/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/devtools-offline.png b/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/devtools-offline.png new file mode 100644 index 0000000000..66bb6bfb37 Binary files /dev/null and b/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/devtools-offline.png differ diff --git a/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/enter-comment-offline.png b/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/enter-comment-offline.png new file mode 100644 index 0000000000..d146204e4e Binary files /dev/null and b/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/enter-comment-offline.png differ diff --git a/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/enter-comment.png b/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/enter-comment.png new file mode 100644 index 0000000000..a01394bf8a Binary files /dev/null and b/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/enter-comment.png differ diff --git a/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/my-movie-list-pwa-demo-offline.png b/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/my-movie-list-pwa-demo-offline.png deleted file mode 100644 index 79c5d3f382..0000000000 Binary files a/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/my-movie-list-pwa-demo-offline.png and /dev/null differ diff --git a/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/my-movie-list-pwa-demo.png b/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/my-movie-list-pwa-demo.png deleted file mode 100644 index dfe58f6036..0000000000 Binary files a/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/my-movie-list-pwa-demo.png and /dev/null differ diff --git a/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/network-icon.png b/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/network-icon.png new file mode 100644 index 0000000000..bfeb632d4d Binary files /dev/null and b/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/network-icon.png differ diff --git a/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/sent-after-removed-throttling.png b/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/sent-after-removed-throttling.png new file mode 100644 index 0000000000..e8492d2b21 Binary files /dev/null and b/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/sent-after-removed-throttling.png differ diff --git a/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/will-try-later.png b/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/will-try-later.png new file mode 100644 index 0000000000..c37d3d02d9 Binary files /dev/null and b/microsoft-edge/progressive-web-apps/how-to/background-syncs-images/will-try-later.png differ diff --git a/microsoft-edge/progressive-web-apps/how-to/background-syncs.md b/microsoft-edge/progressive-web-apps/how-to/background-syncs.md index 4151f4bb4d..1377b61be4 100644 --- a/microsoft-edge/progressive-web-apps/how-to/background-syncs.md +++ b/microsoft-edge/progressive-web-apps/how-to/background-syncs.md @@ -6,7 +6,7 @@ ms.author: msedgedevrel ms.topic: article ms.service: microsoft-edge ms.subservice: pwa -ms.date: 09/14/2021 +ms.date: 12/15/2025 --- # Synchronize and update a PWA in the background @@ -26,6 +26,26 @@ All three of these use cases are possible with PWAs, by using the following APIs Although these APIs have similar names, they are different in nature. +**Detailed contents:** +* [Use the Background Sync API to synchronize data with the server](#use-the-background-sync-api-to-synchronize-data-with-the-server) + * [Check for support](#check-for-support) + * [Request a sync](#request-a-sync) + * [React to the sync event](#react-to-the-sync-event) + * [Demo app: PWA Background Sync](#demo-app-pwa-background-sync) + * [Debug background syncs with DevTools](#debug-background-syncs-with-devtools) +* [Use the Periodic Background Sync API to regularly get fresh content](#use-the-periodic-background-sync-api-to-regularly-get-fresh-content) + * [Periodic sync when on a known network](#periodic-sync-when-on-a-known-network) + * [Check for support](#check-for-support-1) + * [Ask the user for permission](#ask-the-user-for-permission) + * [Register a periodic sync](#register-a-periodic-sync) + * [React to periodic sync events](#react-to-periodic-sync-events) + * [Demo app: DevTools Tips](#demo-app-devtools-tips) + * [Debug periodic background syncs with DevTools](#debug-periodic-background-syncs-with-devtools) +* [Use the Background Fetch API to fetch large files when the app or service worker isn't running](#use-the-background-fetch-api-to-fetch-large-files-when-the-app-or-service-worker-isnt-running) + * [Check for support](#check-for-support-2) + * [Start a background fetch](#start-a-background-fetch) +* [Use the App Badging API and Notifications API to re-engage users](#use-the-app-badging-api-and-notifications-api-to-re-engage-users) + ## Use the Background Sync API to synchronize data with the server @@ -39,6 +59,8 @@ Another example for using the Background Sync API is loading content in the back > [!NOTE] > The Background Sync API should be used for small amounts of data. The Background Sync API requires the service worker to be alive for the entire duration of the data transfer. The Background Sync API shouldn't be used to fetch large files, because devices can decide to terminate service workers, to preserve battery life. Instead, use the [Background Fetch API](#use-the-background-fetch-api-to-fetch-large-files-when-the-app-or-service-worker-isnt-running). + + #### Check for support The Background Sync API is available in Microsoft Edge, but you should make sure that Background Sync API is supported in the other browsers and devices that your app runs in. To make sure that the Background Sync API is supported, test whether the `ServiceWorkerRegistration` object has a `sync` property: @@ -55,6 +77,8 @@ navigator.serviceWorker.ready.then(registration => { To learn more about the `ServiceWorkerRegistration` interface, see [ServiceWorkerRegistration](https://developer.mozilla.org/docs/Web/API/ServiceWorkerRegistration) at MDN. + + #### Request a sync The first thing to do is to request a sync. This can be done by your app frontend or your service worker. @@ -81,6 +105,8 @@ async function requestBackgroundSync() { The `my-tag-name` string above should be a unique tag that identifies this sync request, so that multiple requests can be done. + + #### React to the sync event As soon as a connection can be used and the service worker is running, a `sync` event is sent to the service worker, which can use it to synchronize the necessary data. The `sync` event can be listened to with the following code: @@ -99,34 +125,107 @@ Typically, the `doTheWork` function will send the information to the server that For more information about the `Sync` event, the `ServiceWorkerRegistration`, and the `SyncManager` interface, see the [Background Synchronization draft specification](https://wicg.github.io/background-sync/spec/) and the [Background Synchronization API documentation](https://developer.mozilla.org/docs/Web/API/Background_Synchronization_API). -#### Demo app -[My Movie List PWA](https://quirky-rosalind-ac1e65.netlify.app/) is a demo app that uses the Background Sync API to fetch movie information later, if the user is offline. + +#### Demo app: PWA Background Sync + +**PWA Background Sync** is a demo app that uses the Background Sync API to fetch information later, if the user is offline: + +![PWA Background Sync demo app](./background-syncs-images/will-try-later.png) + +* [/pwa-background-sync/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-background-sync/) - Readme and source code. +* [PWA Background Sync API demo](https://microsoftedge.github.io/Demos/pwa-background-sync/) - live demo. + +To use the demo: + +1. Go to the [PWA Background Sync API demo](https://microsoftedge.github.io/Demos/pwa-background-sync/) in a new window or tab. + + + **Install the app:** + +1. In the Address bar, click the **App available. Install PWA Background Sync API demo** (![App available icon](./background-syncs-images/app-available-icon.png)) button. + + The **Install PWA Background Sync API demo** dialog opens in Edge. + +1. Click the **Install** button. + + The **PWA file handlers demo** app window opens. The **App installed** dialog opens. + +1. Click the **Allow** button. + + The PWA Background Sync API demo app opens in a dedicated window. The Windows **Apps** dialog prompts whether to pin the app to the taskbar. + +1. Click the **Yes** button. + + + **Use the app, connected to the network:** + +1. In the installed **PWA Background Sync API demo** app, in the **Comment** text box, enter a comment, such as **Hello**, and then click the **Send** button. + + A message is sent. The message that you entered appears below the **Comment** text box, with initial status of **Sending**, and then the status: *Sent*✅: + + ![Comment entered in the demo app](./background-syncs-images/enter-comment.png) + + + **Disconnect from the network:** + +1. Right-click within the app window, and then select **Inspect**. + + DevTools opens in a dedicated window. + +1. In DevTools, select the **Network** (![Network icon](./background-syncs-images/network-icon.png)) tool. -![My Movie List PWA demo app](./background-syncs-images/my-movie-list-pwa-demo.png) +1. In the **Network throttling** dropdown list, instead of **No throttling**, select **Offline**: -To test background syncing: + ![DevTools Network throttling: offline](./background-syncs-images/devtools-offline.png) -1. Install the app. + A warning icon is added to the **Network** tab, to remind you that there's network throttling. -1. Search for movies using the search input field. + + **Use the app, disconnected from the network:** -1. Go offline. To do this, open DevTools (**F12**), and then select the **Application** > **Service Workers** > **Offline** checkbox. +1. In the installed **PWA Background Sync API demo** app, in the **Comment** text box, enter a comment, such as **Hello again**, and then click the **Send** button. - ![Simulate being offline with DevTools](./background-syncs-images/devtools-go-offline.png) + The message that you entered appears, momentarily with the status of **Sending**, and then with the status of *Failed*❌. The **Try sending again** button appears within the message rectangle: -1. In one of the movie results, select **More info**. + ![Try sending again button](./background-syncs-images/enter-comment-offline.png) -1. A message appears in the app informing you that you are offline, and that the movie details will be retrieved automatically later. +1. Click the **Try sending again** button. - ![The offline message](./background-syncs-images/my-movie-list-pwa-demo-offline.png) + Within the message rectangle, the status changes to *Will try later*🛜, and the **Try sending again** button goes away: -1. Go online. To do this, in DevTools, clear the **Application** > **Service Workers** > **Offline** checkbox. + ![Will try later](./background-syncs-images/will-try-later.png) -1. Reload the app. The movie details now appear. + If the status remains *Failed*❌, you can reset the service worker so that the status becomes *Will try later*🛜 when appropriate: -To see the sample code, check out the [movies-db-pwa](https://github.com/captainbrosset/movies-db-pwa/) repo. + 1. In DevTools, select the **Application** (![Application icon](./background-syncs-images/application-icon.png)) tool. + 1. In the navigation pane on the left, select **Service workers**, and then in the upper right, click **Unregister**. + + 1. In the app window, right-click in the webpage, and then select **Refresh**. + + + **Connect to the network:** + +1. In the dedicated DevTools window, in the **Network throttling** dropdown list, instead of **Offline**, select **No throttling**. + + The throttling warning icon is removed from the **Network** tab. + + + **Use the app, connected to the network again:** + +1. Switch to the installed **PWA Background Sync API demo** app. + + The displayed status is *Sent*✅: + + ![Sent](./background-syncs-images/sent-after-removed-throttling.png) + +1. Optionally, right-click in the webpage, and then select **Refresh**. + + The messages are removed. + + + #### Debug background syncs with DevTools To test your background sync code, you don't have to go offline, then go online, and then wait for Microsoft Edge to trigger a `sync` event. Instead, DevTools lets you simulate the background sync event. @@ -134,7 +233,7 @@ To test your background sync code, you don't have to go offline, then go online, To simulate a `sync` event: 1. Open DevTools (**F12**). -1. Select **Application** > **Service Workers**. +1. Select **Application** > **Service Workers**. 1. Type the tag name you used when registering the sync in the **Sync** input field. 1. Select the **Sync** button. @@ -158,9 +257,16 @@ The Periodic Background Sync API lets PWAs retrieve fresh content periodically, Using the Periodic Background Sync API, PWAs don't have to download new content (such as new articles) while the user is using the app. Downloading content could slow down the experience, so instead, retrieve the content at a more convenient time. -> [!NOTE] -> The periodic sync only occurs when the device is on a known network (that is, a network that the device has already been connected to before). Microsoft Edge limits the frequency of the syncs to match how often the person uses the app. + +#### Periodic sync when on a known network + +The periodic sync only occurs when the device is on a known network (that is, a network that the device has already been connected to before). + +Microsoft Edge limits the frequency of the syncs to match how often the person uses the app. + + + #### Check for support To check whether this API is supported in the browsers and devices that your app runs in, test whether the `ServiceWorkerRegistration` object has a `periodicSync` property: @@ -175,6 +281,8 @@ navigator.serviceWorker.ready.then(registration => { }); ``` + + #### Ask the user for permission Periodic background synchronization requires the user's permission. Requesting this permission occurs only one time, for a given application. @@ -192,6 +300,8 @@ if (status.state === 'granted') { To learn more about the Permissions API, see [Permissions API](https://developer.mozilla.org/docs/Web/API/Permissions_API) at MDN. + + #### Register a periodic sync To register a periodic sync, you need to define a minimum interval and a unique tag name. The unique tag name enables registering multiple periodic background syncs. @@ -206,6 +316,8 @@ async function registerPeriodicSync() { The `minInterval` used in the code above corresponds to 1 day in milliseconds. This is a minimum interval only, and Microsoft Edge takes other factors into account before alerting your service worker with a periodic sync event, such as the network connection and whether the user regularly engages with the app. + + #### React to periodic sync events When Microsoft Edge decides it's a good time to run the periodic sync, Microsoft Edge sends a `periodicsync` event to your service worker. You can handle this `periodicsync` event by using the same tag name that was specified when registering the sync. @@ -225,7 +337,9 @@ For more information about the `PeriodicSync` event, the `ServiceWorkerRegistrat * [Web Periodic Background Synchronization](https://wicg.github.io/periodic-background-sync/) - draft specification. * [Web Periodic Background Synchronization API](https://developer.mozilla.org/docs/Web/API/Web_Periodic_Background_Synchronization_API). -#### Demo app + + +#### Demo app: DevTools Tips [DevTools Tips](https://devtoolstips.org/) is a PWA that uses the Periodic Background Sync API. The [DevTools Tips] PWA fetches new developer tools tips daily and stores them in cache, so that users can access them next time they open the app, whether they are online or not. @@ -233,6 +347,8 @@ For more information about the `PeriodicSync` event, the `ServiceWorkerRegistrat Go to the [source code on GitHub](https://github.com/captainbrosset/devtools-tips/). In particular, the app registers the periodic sync in the [registerPeriodicSync](https://github.com/captainbrosset/devtools-tips/blob/a4a5277ee6b67e5cc61eee642bf3d9c68130094f/src/layouts/home.njk#L72) function. The [service worker code](https://github.com/captainbrosset/devtools-tips/blob/ebfb2c7631464149ce3cc7700d77564656971ff4/src/sw.js#L115) is where the app listens to the `periodicsync` event. + + #### Debug periodic background syncs with DevTools You can use DevTools to simulate `periodicsync` events instead of waiting for the minimum interval. @@ -240,7 +356,7 @@ You can use DevTools to simulate `periodicsync` events instead of waiting for th To simulate the event: 1. Open DevTools (**F12**). -1. Select **Application** > **Service Workers**. +1. Select **Application** > **Service Workers**. 1. Type the tag name you used when registering the periodic sync in the **Periodic Sync** input field. 1. Select the **Periodic Sync** button. @@ -264,6 +380,8 @@ The Background Fetch API allows PWAs to completely delegate downloading large am This API is useful for apps that let users download large files (like music, movies, or podcasts) for offline use cases. Because the download is delegated to the browser engine, which knows how to handle a flaky connection or even a complete loss of connectivity, it can pause and resume the download when necessary. + + #### Check for support To check whether this API is supported, test if the `BackgroundFetchManager` constructor exists on the global object: @@ -276,6 +394,8 @@ if (self.BackgroundFetchManager) { } ``` + + #### Start a background fetch To start a background fetch: diff --git a/microsoft-edge/progressive-web-apps/how-to/handle-files-images/app-available-icon.png b/microsoft-edge/progressive-web-apps/how-to/handle-files-images/app-available-icon.png new file mode 100644 index 0000000000..563fe3bf4d Binary files /dev/null and b/microsoft-edge/progressive-web-apps/how-to/handle-files-images/app-available-icon.png differ diff --git a/microsoft-edge/progressive-web-apps/how-to/handle-files-images/close-icon.png b/microsoft-edge/progressive-web-apps/how-to/handle-files-images/close-icon.png new file mode 100644 index 0000000000..46a90b45b5 Binary files /dev/null and b/microsoft-edge/progressive-web-apps/how-to/handle-files-images/close-icon.png differ diff --git a/microsoft-edge/progressive-web-apps/how-to/handle-files-images/open-in-web-app.png b/microsoft-edge/progressive-web-apps/how-to/handle-files-images/open-in-web-app.png new file mode 100644 index 0000000000..ef1c629822 Binary files /dev/null and b/microsoft-edge/progressive-web-apps/how-to/handle-files-images/open-in-web-app.png differ diff --git a/microsoft-edge/progressive-web-apps/how-to/handle-files-images/text-in-the-demo.png b/microsoft-edge/progressive-web-apps/how-to/handle-files-images/text-in-the-demo.png new file mode 100644 index 0000000000..5cf6f10a19 Binary files /dev/null and b/microsoft-edge/progressive-web-apps/how-to/handle-files-images/text-in-the-demo.png differ diff --git a/microsoft-edge/progressive-web-apps/how-to/handle-files.md b/microsoft-edge/progressive-web-apps/how-to/handle-files.md index 4010d15fa6..2f5ade29db 100644 --- a/microsoft-edge/progressive-web-apps/how-to/handle-files.md +++ b/microsoft-edge/progressive-web-apps/how-to/handle-files.md @@ -97,23 +97,94 @@ The `launchQueue` object queues all the launched files until a consumer is set w -## Demo +## PWA file handlers demo app -My Tracks is a PWA demo app that uses the File Handling feature to handle `.gpx` files. To try the feature with this demo app: +The **PWA file handlers** demo app: -* Go to [My Tracks](https://captainbrosset.github.io/mytracks/) and install the app. -* Download a GPX file on your computer. You can use this [test GPX file](https://www.visugpx.com/download.php?id=okB1eM4fzj). -* Open the downloaded GPX file. +![PWA file handlers demo app](./handle-files-images/text-in-the-demo.png) -Notice that the app launches automatically and that Microsoft Edge requests your permission to handle this file. +* [/pwa-file-handlers/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-file-handlers/) - Readme and source code. +* [PWA file handlers demo](https://microsoftedge.github.io/Demos/pwa-file-handlers/) - live demo. -![The 'Open file?' permission request dialog](./handle-files-images/my-tracks-allow-file-handling.png) -If you allow the app to handle the file, a new entry appears in the app's sidebar, and you can click the checkbox next to it to visualize the corresponding GPS track. +To use the demo: -![The new GPS track handled by the My Tracks app](./handle-files-images/my-tracks-new-file.png) +1. Go to the [PWA file handlers demo](https://microsoftedge.github.io/Demos/pwa-file-handlers/) in a new window or tab. -The source code for this app can be accessed on the [My Tracks GitHub repository](https://github.com/captainbrosset/mytracks). -* The [manifest.json](https://github.com/captainbrosset/mytracks/blob/main/mytracks/manifest.json) source file uses the `file_handlers` array to request handling `.gpx` files. -* The [file.js](https://github.com/captainbrosset/mytracks/blob/main/src/file.js) source file uses the `launchQueue` object to handle incoming files. + **Install the demo app:** + +1. In the Address bar, click the **App available. Install PWA file handlers demo** (![App available icon](./handle-files-images/app-available-icon.png)) button. + + The **Install PWA file handlers demo app** dialog opens in Edge. + +1. Click the **Install** button. + + The **PWA file handlers demo** app window opens. The **App installed** dialog opens. + +1. Click the **Allow** button. + + The Windows **Apps** dialog prompts you whether to pin the demo to the taskbar. + +1. Click the **Yes** button. + +1. Close the **PWA file handlers demo** app. + + + **Create a text file:** + + If you have an existing text file, you can use it. In the following steps, we'll use Visual Studio Code to create a text file named `test.txt` in the `Documents` folder. + +1. Open Visual Studio Code. + +1. Click the **File** menu, and then click **New Text File**. + +1. Add text in the file, such as: + + ``` + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + * Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + + * Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + + ``` + +1. Click the **File** menu, and then click **Save**. + + The **Save As** dialog opens. + +1. Navigate to a directory such as `C:\Users\localAccount\Documents\`. + +1. In the **File name** combo box, type `test`. + +1. In the **Save as type** combo box, select **Plain text (*.txt)**. + +1. Click the **Save** button. + + The dialog closes. + +1. On the **test.txt** tab, click the **Close** (![Close icon](./handle-files-images/close-icon.png)) button. + + + **Open the text file and specify the Open With app:** + +1. In the Windows Taskbar, click the **Start** button, type **File Explorer**, and then click **Open**. + + **File Explorer** opens. + +1. Navigate to the directory that contains the text file, such as `C:\Users\localAccount\Documents\`. + +1. Right-click the text file (such as `test.txt`), and then select **Open with** > **PWA file handlers demo**. + + Or, double-click the text file. + + A **Microsoft Edge** dialog opens, asking whether to open and edit the text file in this web app: + + ![Dialog asking whether to open in web app](./handle-files-images/open-in-web-app.png) + +1. Click the **Open** button. + + The **PWA file handlers demo** app opens, displaying the `.txt` file name and the file's text content: + + ![Text file opened in the demo](./handle-files-images/text-in-the-demo.png) diff --git a/microsoft-edge/progressive-web-apps/samples/index-images/background-sync.png b/microsoft-edge/progressive-web-apps/samples/index-images/background-sync.png new file mode 100644 index 0000000000..c37d3d02d9 Binary files /dev/null and b/microsoft-edge/progressive-web-apps/samples/index-images/background-sync.png differ diff --git a/microsoft-edge/progressive-web-apps/samples/index-images/file-handlers.png b/microsoft-edge/progressive-web-apps/samples/index-images/file-handlers.png new file mode 100644 index 0000000000..5cf6f10a19 Binary files /dev/null and b/microsoft-edge/progressive-web-apps/samples/index-images/file-handlers.png differ diff --git a/microsoft-edge/progressive-web-apps/samples/index-images/my-movies.png b/microsoft-edge/progressive-web-apps/samples/index-images/my-movies.png deleted file mode 100644 index d48b2905fe..0000000000 Binary files a/microsoft-edge/progressive-web-apps/samples/index-images/my-movies.png and /dev/null differ diff --git a/microsoft-edge/progressive-web-apps/samples/index-images/my-tracks.png b/microsoft-edge/progressive-web-apps/samples/index-images/my-tracks.png deleted file mode 100644 index 63420d6319..0000000000 Binary files a/microsoft-edge/progressive-web-apps/samples/index-images/my-tracks.png and /dev/null differ diff --git a/microsoft-edge/progressive-web-apps/samples/index.md b/microsoft-edge/progressive-web-apps/samples/index.md index bd18a6762a..339e07d5e8 100644 --- a/microsoft-edge/progressive-web-apps/samples/index.md +++ b/microsoft-edge/progressive-web-apps/samples/index.md @@ -34,9 +34,7 @@ Most of these PWA demos are in the [MicrosoftEdge / Demos](https://github.com/Mi ![The 1DIV app](./index-images/1div-demo.png) -* [App](https://microsoftedge.github.io/Demos/1DIV/dist/) -* [/1DIV/](https://github.com/MicrosoftEdge/Demos/tree/main/1DIV/) - source code directory. - * [Readme file](https://github.com/MicrosoftEdge/Demos/blob/main/1DIV/README.md) +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/1DIV/), [App](https://microsoftedge.github.io/Demos/1DIV/dist/). 1DIV uses the following features: @@ -51,9 +49,7 @@ Most of these PWA demos are in the [MicrosoftEdge / Demos](https://github.com/Mi A simulated email client PWA that demonstrates how to use PWA protocol handlers. -* [App](https://microsoftedge.github.io/Demos/email-client/) -* [/email-client/](https://github.com/MicrosoftEdge/Demos/tree/main/email-client/) - source code directory. - * [Readme file](https://github.com/MicrosoftEdge/Demos/blob/main/email-client/README.md) +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/email-client/), [App](https://microsoftedge.github.io/Demos/email-client/). Email client uses the following features: @@ -68,9 +64,7 @@ Email client uses the following features: A demo web app to showcase the `application-title` meta tag. -* [App](https://microsoftedge.github.io/Demos/pwa-application-title/) -* [/pwa-application-title/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-application-title/) - source code directory. - * [Readme file](https://github.com/MicrosoftEdge/Demos/blob/main/pwa-application-title/README.md) +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-application-title), [App](https://microsoftedge.github.io/Demos/pwa-application-title/). Application Title Meta Tag uses the following features: @@ -80,14 +74,37 @@ Application Title Meta Tag uses the following features: -## Temperature converter +## PWA Background Sync -A simple PWA demo app that converts temperatures. See [Temperature converter sample](./temperature-converter.md). +The PWA Background Sync demo lets you send chat messages even when offline. If you're offline when sending a message, the app uses Background Sync to send the message later, when you're back online. + +![PWA Background Sync API demo](./index-images/background-sync.png) + +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-background-sync/), [App](https://microsoftedge.github.io/Demos/pwa-background-sync/). -* [App](https://microsoftedge.github.io/Demos/temperature-converter/) -* [/temperature-converter/](https://github.com/MicrosoftEdge/Demos/tree/main/temperature-converter/) - source code directory. - * [Readme file](https://github.com/MicrosoftEdge/Demos/blob/main/temperature-converter/README.md) +The PWA Background Sync API demo uses the following features: + +| Feature | Description | Documentation | +|:--- |:--- |:--- | +| Background Sync | Enables using the PWA when offline; synchronizes data with the server when the network connection is restored. | [Synchronize and update a PWA in the background](../how-to/background-syncs.md) | + + + +## PWA file handlers + + +The PWA file handlers app handles `*.txt` files like a native application does. + +![The "PWA file handlers" demo app](./index-images/file-handlers.png) + +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-file-handlers/), [App](https://microsoftedge.github.io/Demos/pwa-file-handlers/). + +The PWA file handlers app uses the following features: + +| Feature | Description | Documentation | +|:--- |:--- |:--- | +| File Handling | The `file_handlers` web app manifest member enables a PWA to handle file types like a native application does. | [Handle files in a PWA](../how-to/handle-files.md) | @@ -95,9 +112,7 @@ A simple PWA demo app that converts temperatures. See [Temperature converter sa A PWA that uses the Web Install API to install other PWAs. Also uses CSS Masonry. -* [PWA installer app](https://microsoftedge.github.io/Demos/pwa-installer/) -* [/pwa-installer/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-installer/) - source code directory. - * [Readme file](https://github.com/MicrosoftEdge/Demos/blob/main/pwa-installer/README.md) +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-installer/), [App](https://microsoftedge.github.io/Demos/pwa-installer/). PWA installer uses the following features: @@ -128,9 +143,7 @@ See also: Has a **Set timer** button, and you can set the duration of the timer. -* [App](https://microsoftedge.github.io/Demos/pwa-timer/) -* [/pwa-timer/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-timer/) - source code directory. - * [Readme file](https://github.com/MicrosoftEdge/Demos/blob/main/pwa-timer/README.md) +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-timer/), [App](https://microsoftedge.github.io/Demos/pwa-timer/). @@ -139,9 +152,7 @@ Has a **Set timer** button, and you can set the duration of the timer. Create lists of tasks locally in your browser, or by installing the app. Click the **About** link in the rendered demo. -* [App](https://microsoftedge.github.io/Demos/pwa-to-do/) -* [/pwa-to-do/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-to-do/) - source code directory. - * [Readme file](https://github.com/MicrosoftEdge/Demos/blob/main/pwa-to-do/README.md) +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-to-do/), [App](https://microsoftedge.github.io/Demos/pwa-to-do/). @@ -152,9 +163,7 @@ PWAmp is a desktop music player that plays local and remote audio files. ![The PWAmp app, showing playback buttons and a list of songs](./index-images/pwamp.png) -* [App](https://microsoftedge.github.io/Demos/pwamp/) -* [/pwamp/](https://github.com/MicrosoftEdge/Demos/tree/main/pwamp/) - source code directory. - * [Readme file](https://github.com/MicrosoftEdge/Demos/blob/main/pwamp/README.md) +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/pwamp/), [App](https://microsoftedge.github.io/Demos/pwamp/). PWAmp uses the following features: @@ -169,6 +178,15 @@ PWAmp uses the following features: | Sidebar | PWAmp can be pinned to the sidebar in Microsoft Edge. | [Build a PWA for the sidebar in Microsoft Edge](../how-to/sidebar.md) | + +## Temperature converter + + +A simple PWA demo app that converts temperatures. See [Temperature converter sample](./temperature-converter.md). + +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/temperature-converter/), [App](https://microsoftedge.github.io/Demos/temperature-converter/). + + ## wami @@ -177,9 +195,7 @@ wami can apply a sequence of image manipulation steps such as cropping, resizing ![The wami app](./index-images/wami.png) -* [App](https://microsoftedge.github.io/Demos/wami/) -* [/wami/](https://github.com/MicrosoftEdge/Demos/tree/main/wami/) - source code directory. - * [Readme file](https://github.com/MicrosoftEdge/Demos/blob/main/wami/README.md) +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/wami/), [App](https://microsoftedge.github.io/Demos/wami/). wami uses the following features: @@ -188,57 +204,12 @@ wami uses the following features: | Window Controls Overlay | The space normally reserved to the title bar can be used by wami. | [Display content in the title bar area using Window Controls Overlay](../how-to/window-controls-overlay.md) | | File System Access | wami can save transformed images back to disk. | [File System Access API](https://developer.mozilla.org/docs/Web/API/File_System_Access_API) | + - - - -## My Movie List - - - -This simple PWA demo lets you search for made-up movies and store them locally. - -![The My Movie List app](./index-images/my-movies.png) - -* [App](https://quirky-rosalind-ac1e65.netlify.app) -* [/movies-db-pwa/](https://github.com/captainbrosset/movies-db-pwa/) - source code directory. - * No Readme file. - -My Movie List uses the following features: - -| Feature | Description | Documentation | -|:--- |:--- |:--- | -| Background Sync | If the user is offline when displaying more information about a movie, the app uses Background Sync to retrieve the information later when the user is back online. | [Use the Background Sync API to synchronize data with the server](../how-to/background-syncs.md#use-the-background-sync-api-to-synchronize-data-with-the-server) | -| Notifications | When the information about a movie is retrieved, a notification is sent so the user can re-engage with the app. | [Display notifications in the action center](../how-to/notifications-badges.md#display-notifications-in-the-action-center) | - - - -## My Tracks - - - -My Tracks is useful for visualizing GPS tracks (`*.gpx` files) on a map. - -![The My Tracks app](./index-images/my-tracks.png) - -* [App](https://captainbrosset.github.io/mytracks/) - see Readme for setup. -* [/mytracks/](https://github.com/captainbrosset/mytracks/) - source code directory. - * [Readme file](https://github.com/captainbrosset/mytracks/blob/main/README.md) - -My Tracks uses the following features: - -| Feature | Description | Documentation | -|:--- |:--- |:--- | -| Window Controls Overlay | The space normally reserved to the title bar is used by My Tracks to display its own search bar. | [Display content in the title bar area using Window Controls Overlay](../how-to/window-controls-overlay.md) | -| Protocol Handling | My Tracks handles URIs that start with the `geo:` protocol to show locations on the map. | [Handle protocols in a PWA](../how-to/handle-protocols.md) | -| File Handling | My Tracks natively handles `*.gpx` files. | [Handle files in a PWA](../how-to/handle-files.md) | -| Shortcuts | My Tracks defines shortcuts to easily hide and show all tracks from the map. | [Define app shortcuts (long-press or right-click menus)](../how-to/shortcuts.md) | - - ## BPM Techno @@ -247,9 +218,7 @@ BPM Techno analyzes audio via the device microphone and displays a real-time bea ![The BPM Techno app](./index-images/bpm-techno.png) -* [App](https://bpmtech.no) -* [/bpm-counter/](https://github.com/webmaxru/bpm-counter/) - source code directory. - * [Readme file](https://github.com/webmaxru/bpm-counter/blob/main/README.md) +[Readme and source code](https://github.com/webmaxru/bpm-counter/), [App](https://bpmtech.no). This demo is in the [webmaxru / bpm-counter](https://github.com/webmaxru/bpm-counter/) repo. @@ -271,9 +240,7 @@ Webboard is a drawing application. ![Webboard is a Progressive Web App for drawing and intelligent whiteboarding](./index-images/webboard.png) -* [App](https://webboard.app) -* [/web-whiteboard/](https://github.com/pwa-builder/web-whiteboard/) - source code directory. - * [Readme file](https://github.com/pwa-builder/web-whiteboard/blob/main/readme.md) +[Readme and source code](https://github.com/pwa-builder/web-whiteboard/), [App](https://webboard.app). This demo is in the [pwa-builder / web-whiteboard](https://github.com/pwa-builder/web-whiteboard/) repo. diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started-launch-project.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started-launch-project.md index 5d3a774c46..1fd865a979 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started-launch-project.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/get-started-launch-project.md @@ -45,7 +45,7 @@ These steps explain how to start http-server by using the cross-platform git bas 1. Open git bash, or another command prompt. For example, on Windows, press **Start** and then enter **git bash**. -1. `cd` into the the specific folder you want to serve via http, `Demos\demo-to-do\`: +1. `cd` into the specific folder that you want to serve via http, `Demos\demo-to-do\`: In git bash, use forward slashes for file paths. For example: diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/install.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/install.md index ab45788aa4..be6a160671 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/install.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/install.md @@ -167,7 +167,7 @@ For information about http-server, see [http-server: a simple static HTTP server 1. In Visual Studio Code, select **View** > **Terminal**. Or, to keep the web server running regardless of Visual Studio's state, open a command prompt outside of Visual Studio Code, such as `git bash`. -1. `cd` into the the folder you want to serve via http. +1. `cd` into the folder that you want to serve via http. In the git bash shell, use forward slashes, such as: diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/launch-json.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/launch-json.md index 9e664ee314..44901d1598 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/launch-json.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/launch-json.md @@ -162,7 +162,7 @@ This configuration name doesn't appear directly in the UI. This configuration i #### Configuration 2: Launch Microsoft Edge in headless mode -This is a "launch browser"-type configuration. This configuration controls the browser component, such as which `.html` file to display, when **Headless** is selected in the the Edge DevTools > **Settings** page, as it is by default. +This is a "launch browser"-type configuration. This configuration controls the browser component, such as which `.html` file to display, when **Headless** is selected in the Edge DevTools > **Settings** page, as it is by default. This configuration name **Launch Microsoft Edge in headless mode** appears in the UI, such as in the Debug toolbar and in the **Debug Console**. If you launch multiple instances, a number is appended to the additional instances in the UI, such as **Launch Microsoft Edge in headless mode 2**. This configuration is used by a compound configuration, below. diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/open-devtools-and-embedded-browser.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/open-devtools-and-embedded-browser.md index 48d2035ff1..65fe1cd1d0 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/open-devtools-and-embedded-browser.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/open-devtools-and-embedded-browser.md @@ -1,6 +1,6 @@ --- title: Opening DevTools and the DevTools browser -description: "Opening the Edge DevTools tab and the the Edge DevTools: Browser tab (an embedded browser) in the Microsoft Edge Developer Tools extension for Visual Studio Code." +description: "Opening the Edge DevTools tab and the Edge DevTools: Browser tab (an embedded browser) in the Microsoft Edge Developer Tools extension for Visual Studio Code." author: MSEdgeTeam ms.author: msedgedevrel ms.topic: article diff --git a/microsoft-edge/web-platform/samples.md b/microsoft-edge/web-platform/samples.md index 08988d9d2b..670f5d1144 100644 --- a/microsoft-edge/web-platform/samples.md +++ b/microsoft-edge/web-platform/samples.md @@ -20,14 +20,14 @@ sync'd July 30, 2025 |---|---|---|---| | Built-in AI playgrounds | Demo pages showing how to use the built-in Prompt and Writing Assistance AI APIs in Microsoft Edge. | [/built-in-ai/](https://github.com/MicrosoftEdge/Demos/tree/main/built-in-ai) | [Built-in AI playgrounds](https://microsoftedge.github.io/Demos/built-in-ai/) demo | | CSS Gap Decorations demos | Draws line decorations within gaps in CSS Grid, Flexbox, and Multi-column layouts. | [/css-gap-decorations/](https://github.com/MicrosoftEdge/Demos/tree/main/css-gap-decorations) | [CSS Gap Decorations demos](https://microsoftedge.github.io/Demos/css-gap-decorations/) (Readme) | -| CSS Masonry demos | Showcase the implementation of CSS Masonry layout. | [/css-masonry/](https://github.com/MicrosoftEdge/Demos/tree/main/css-masonry) | [CSS Masonry demos](https://microsoftedge.github.io/Demos/css-masonry/) demos (Readme) | -| CSS Custom Highlight API | How to programmatically create and remove custom highlights on a web page. | [/custom-highlight-api/](https://github.com/MicrosoftEdge/Demos/tree/main/custom-highlight-api) | [CSS Custom Highlight API demo](https://microsoftedge.github.io/Demos/custom-highlight-api/) demo | +| CSS Masonry demos | Showcase the implementation of CSS Masonry layout. | [/css-masonry/](https://github.com/MicrosoftEdge/Demos/tree/main/css-masonry) | [CSS Masonry demos](https://microsoftedge.github.io/Demos/css-masonry/) (Readme) | +| CSS Custom Highlight API | How to programmatically create and remove custom highlights on a web page. | [/custom-highlight-api/](https://github.com/MicrosoftEdge/Demos/tree/main/custom-highlight-api) | [CSS Custom Highlight API demo](https://microsoftedge.github.io/Demos/custom-highlight-api/) | | EditContext API demo | Demo page showing how the EditContext API can be used to build an advanced text editor. | [/edit-context/](https://github.com/MicrosoftEdge/Demos/tree/main/edit-context) | [HTML editor demo](https://microsoftedge.github.io/Demos/edit-context/) | | EyeDropper API | How to use the EyeDropper API to create a color sampling tool from JavaScript. | [/eyedropper/](https://github.com/MicrosoftEdge/Demos/tree/main/eyedropper) | [EyeDropper API demos](https://microsoftedge.github.io/Demos/eyedropper/) | | IndexedDB: `getAllRecords()` | Shows the benefits of the proposed `getAllRecords()` IndexedDB method to more conveniently and quickly read IDB records. | [/idb-getallrecords/](https://github.com/MicrosoftEdge/Demos/tree/main/idb-getallrecords) | [IndexedDB: getAllRecords()](https://microsoftedge.github.io/Demos/idb-getallrecords/) demo | -| Notifications demo | Using incoming call notifications. | [/incoming-call-notifications/](https://github.com/MicrosoftEdge/Demos/tree/main/incoming-call-notifications) | [Notifications demo](https://microsoftedge.github.io/Demos/incoming-call-notifications/) demo | +| Notifications demo | Using incoming call notifications. | [/incoming-call-notifications/](https://github.com/MicrosoftEdge/Demos/tree/main/incoming-call-notifications) | [Notifications demo](https://microsoftedge.github.io/Demos/incoming-call-notifications/) | | JSON dummy data | Simple JSON files. Used for [View a JSON file or server response with formatting](./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/) (Readme) | -| Page Colors Custom Scrollbars demo | Shows a custom, green scrollbar in a page that has custom colors. | [/page-colors-custom-scrollbars/](https://github.com/MicrosoftEdge/Demos/tree/main/page-colors-custom-scrollbars) | [Page Colors Custom Scrollbars demo](https://microsoftedge.github.io/Demos/page-colors-custom-scrollbars/) demo | +| Page Colors Custom Scrollbars demo | Shows a custom, green scrollbar in a page that has custom colors. | [/page-colors-custom-scrollbars/](https://github.com/MicrosoftEdge/Demos/tree/main/page-colors-custom-scrollbars) | [Page Colors Custom Scrollbars demo](https://microsoftedge.github.io/Demos/page-colors-custom-scrollbars/) | | Reader app | An article reader app used to demonstrate how to use various web APIs such as CSS Custom Highlight, ``, EyeDropper, CSS and JSON modules, Scroll animation timeline, and Async Clipboard. | [/reader/](https://github.com/MicrosoftEdge/Demos/tree/main/reader) | [Reader](https://microsoftedge.github.io/Demos/reader/) demo | | Open UI's `` demos | Demo webpage showing how the Open UI's `` element can be used. | [/selectlist/](https://github.com/MicrosoftEdge/Demos/tree/main/selectlist) | [Open UI's \ demos](https://microsoftedge.github.io/Demos/selectlist/) | | `` demos | OpenUI's `` component was renamed to ``. | [/selectmenu/](https://github.com/MicrosoftEdge/Demos/tree/main/selectmenu) | [`` demos](https://microsoftedge.github.io/Demos/selectmenu/), redirects to `/selectlist/` demos |