|
1 | 1 | # Microsoft Edge Demos |
2 | 2 |
|
3 | | -<!-- todo: maybe move "docs that use the demo" from tables (in Docs repo & Demos repo) to only the Readme in Demos repo --> |
| 3 | +<!-- todo: |
| 4 | +maybe move "docs that use the demo" from tables (in Docs repo & Demos repo) to only the Readme in Demos repo |
| 5 | +
|
| 6 | +maybe change from: |
| 7 | +https://github.com/MicrosoftEdge/Demos/tree/main/ |
| 8 | +to: |
| 9 | +./ |
| 10 | +64x |
| 11 | +--> |
4 | 12 |
|
5 | 13 | This repository contains demo webpages, apps, and sample code to demonstrate various features of Microsoft Edge. This Readme lists all top-level source code directories. Below, demos are grouped by major technology area, and then sorted by directory name within each section's table. |
6 | 14 |
|
7 | 15 | **Contents:** |
8 | 16 | * [Microsoft Edge DevTools](#microsoft-edge-devtools) |
9 | 17 | * [Microsoft Edge extensions](#microsoft-edge-extensions) |
10 | 18 | * [Progressive Web Apps (PWAs)](#progressive-web-apps-pwas) |
| 19 | +* [WebView2](#webview2) |
11 | 20 | * [Cross-browser API samples](#cross-browser-api-samples) |
12 | 21 | * [Adding a new demo](#adding-a-new-demo) |
13 | 22 | * [Contributing](#contributing) |
@@ -102,29 +111,46 @@ https://github.com/MicrosoftEdge/Demos/blob/main/README.md#progressive-web-apps- |
102 | 111 | sync'd Oct. 17, 2025 |
103 | 112 | --> |
104 | 113 |
|
105 | | -| Demo name | Description and docs | Source code & Readme | Live demo page | |
| 114 | +<!-- sort on col 3 (repo dir) --> |
| 115 | +<!-- Description: omit "PWA" & "demo" --> |
| 116 | +| Demo name | Description | Source code & Readme | Live demo page | |
106 | 117 | |---|---|---|---| |
107 | 118 | | 1DIV | A CSS sandbox app that demonstrates the Window Controls Overlay feature. | [/1DIV/](https://github.com/MicrosoftEdge/Demos/tree/main/1DIV/) | [1DIV](https://microsoftedge.github.io/Demos/1DIV/dist/) demo | |
108 | 119 | | Email client | A simulated email client PWA that demonstrates how to use PWA protocol handlers. | [/email-client/](https://github.com/MicrosoftEdge/Demos/tree/main/email-client/) | [Email inbox](https://microsoftedge.github.io/Demos/email-client/) demo | |
109 | 120 | | Application Title Meta Tag | Showcases the `application-title` meta tag. | [/pwa-application-title/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-application-title/) | [application-title](https://microsoftedge.github.io/Demos/pwa-application-title/) demo | |
| 121 | +| PWA Background Sync | Enables using the PWA when offline; synchronizes data with the server when the network connection is restored. | [/pwa-background-sync/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-background-sync/) | [PWA Background Sync API demo](https://microsoftedge.github.io/Demos/pwa-background-sync/) | |
| 122 | +| PWA file handlers | The `file_handlers` web app manifest member enables a PWA to handle files like a native application. | [/pwa-file-handlers/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-file-handlers/) | [PWA file handlers demo](https://microsoftedge.github.io/Demos/pwa-file-handlers/) | |
110 | 123 | | PWA installer | A PWA that uses the Web Install API to install other PWAs. Also uses CSS Masonry. | [/pwa-installer/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-installer/) | [pwa-installer](https://microsoftedge.github.io/Demos/pwa-installer/) demo | |
111 | 124 | | Edge demos (pwastore) | A PWA that uses the Web Install API to install other PWAs. Also uses CSS Masonry. An earlier copy of `/pwa-installer/` directory, pointed to by Dev Trial docs. | [/pwa-pwastore/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-pwastore/) | [Edge demos](https://microsoftedge.github.io/Demos/pwa-pwastore/) | |
112 | 125 | | Timer PWA | Has a **Set timer** button, and you can set the duration of the timer. | [/pwa-timer/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-timer/) | [Timer PWA demo](https://microsoftedge.github.io/Demos/pwa-timer/) | |
113 | 126 | | PWA To Do | Create lists of tasks locally in your browser, or by installing the app. Click **About** link in rendered demo. | [/pwa-to-do/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-to-do/) | [PWA To Do](https://microsoftedge.github.io/Demos/pwa-to-do/) demo | |
114 | 127 | | PWAmp | A music player that plays local audio files. | [/pwamp/](https://github.com/MicrosoftEdge/Demos/tree/main/pwamp/) | [pwamp](https://microsoftedge.github.io/Demos/pwamp/) demo | |
115 | | -| Temperature converter | Converts temperatures. Used for [Temperature convertor sample](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/samples/temperature-converter). | [/temperature-converter/](https://github.com/MicrosoftEdge/Demos/tree/main/temperature-converter/) | [Temperature converter](https://microsoftedge.github.io/Demos/temperature-converter/) demo | |
| 128 | +| Temperature converter | Converts temperatures. To learn how to use and develop PWAs, start with this sample. | [/temperature-converter/](https://github.com/MicrosoftEdge/Demos/tree/main/temperature-converter/) | [Temperature converter](https://microsoftedge.github.io/Demos/temperature-converter/) demo | |
116 | 129 | | wami | An image manipulation app to crop, resize, or add effects to images. | [/wami/](https://github.com/MicrosoftEdge/Demos/tree/main/wami/) | [wami](https://microsoftedge.github.io/Demos/wami/) demo | |
117 | 130 |
|
118 | 131 | To learn how to use and develop PWAs, start with the Temperature convertor sample. |
119 | 132 |
|
120 | 133 | See also: |
121 | 134 | * [Progressive Web App samples](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/samples/index) - also lists the demos: |
122 | | - * My Movie List |
123 | | - * My Tracks |
124 | 135 | * BPM Techno |
125 | 136 | * Webboard |
126 | 137 |
|
127 | 138 |
|
| 139 | +<!-- ====================================================================== --> |
| 140 | +## WebView2 |
| 141 | +<!-- sync: |
| 142 | +https://learn.microsoft.com/microsoft-edge/webview2/samples/ |
| 143 | +https://github.com/MicrosoftEdge/Demos/blob/main/README.md#webview2 |
| 144 | +sync'd Dec. 1, 2025 |
| 145 | +--> |
| 146 | + |
| 147 | +The WebView2 samples are in the **MicrosoftEdge / WebView2Samples** repo, rather than in the present, **MicrosoftEdge / Demos** repo. |
| 148 | + |
| 149 | +See: |
| 150 | +* [MicrosoftEdge / WebView2Samples](https://github.com/MicrosoftEdge/WebView2Samples) repo |
| 151 | +* [WebView2 sample apps](https://learn.microsoft.com/microsoft-edge/webview2/samples/) article |
| 152 | + |
| 153 | + |
128 | 154 | <!-- ====================================================================== --> |
129 | 155 | ## Cross-browser API samples |
130 | 156 | <!-- sync: |
|
0 commit comments