diff --git a/1DIV/1div-demo.png b/1DIV/1div-demo.png new file mode 100644 index 00000000..e731d4dc Binary files /dev/null and b/1DIV/1div-demo.png differ diff --git a/1DIV/README.md b/1DIV/README.md index e523988a..5f5ec6e9 100644 --- a/1DIV/README.md +++ b/1DIV/README.md @@ -2,7 +2,15 @@ ➡️ **[Open the demo](https://microsoftedge.github.io/Demos/1DIV/dist/)** ⬅️ -**1DIV** is a demo web app that enables you to create multiple CSS designs by using a single HTML `div` element. Your CSS designs are only saved locally, in the browser's memory. This demo app can be installed locally as a Progressive Web App (PWA). +1DIV is a CSS editor that lets you create drawings by applying CSS code to a single HTML element. Your drawings are saved locally in the browser only. 1DIV can be installed locally as a Progressive Web App (PWA). + +![The 1DIV app](./1div-demo.png) + +1DIV uses the following features: + +| Feature | Description | Documentation | +|---|---|---| +| Window Controls Overlay | 1DIV uses the space normally reserved by the title bar to display a logo, search field, and button. | [Display content in the title bar area using Window Controls Overlay](../how-to/window-controls-overlay.md) | diff --git a/README.md b/README.md index 4952bdd6..d90c4231 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,8 @@ -# Microsoft Edge Demos +# Microsoft Edge demos - - -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. +This Readme lists all top-level source code directories. Below, the demos (samples) are grouped by major technology area, and then sorted by directory name within each section's table. **Contents:** * [Microsoft Edge DevTools](#microsoft-edge-devtools) @@ -18,27 +10,14 @@ This repository contains demo webpages, apps, and sample code to demonstrate var * [Progressive Web Apps (PWAs)](#progressive-web-apps-pwas) * [WebView2](#webview2) * [Cross-browser API samples](#cross-browser-api-samples) -* [Adding a new demo](#adding-a-new-demo) +* [Cloning this repo to your drive](#cloning-this-repo-to-your-drive) * [Contributing](#contributing) + * [Adding a new demo](#adding-a-new-demo) * [Trademarks](#trademarks) -* [See also](#see-also) - - ## Microsoft Edge DevTools - | Demo name | Description and docs | Source code & Readme | Live demo page | |---|---|---|---| @@ -61,7 +40,7 @@ sync'd July 30, 2025 | CSS Examples | Used for [Get started viewing and changing CSS](https://learn.microsoft.com/microsoft-edge/devtools/css/). | [/devtools-css-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-css-get-started) | [CSS Examples](https://microsoftedge.github.io/Demos/devtools-css-get-started/) demo | | DOM Examples | Used for [Get started viewing and changing the DOM](https://learn.microsoft.com/microsoft-edge/devtools/dom/). | [/devtools-dom-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-dom-get-started) | [DOM Examples](https://microsoftedge.github.io/Demos/devtools-dom-get-started/) demo | | Explain Console errors and warnings in Copilot in Edge | Generates errors in the Console that can then be explained by using Copilot in Edge. | [/devtools-explain-error/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-explain-error) | [Explain Console errors and warnings in Copilot in Edge](https://microsoftedge.github.io/Demos/devtools-explain-error/) demo | -| Inspect CSS Grid | Used for [Inspect CSS Grid](https://learn.microsoft.com/microsoft-edge/devtools/css/grid). | [/devtools-grid/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-grid) | [Inspect CSS Grid](https://microsoftedge.github.io/Demos/devtools-grid/) demo | +| Inspect CSS Grid | Used for [Inspect CSS Grid layouts](https://learn.microsoft.com/microsoft-edge/devtools/css/grid). | [/devtools-grid/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-grid) | [Inspect CSS Grid](https://microsoftedge.github.io/Demos/devtools-grid/) demo | | Inspect tool | Used for [Analyze pages using the Inspect tool](https://learn.microsoft.com/microsoft-edge/devtools/css/inspect). | [/devtools-inspect/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-inspect) | [Inspect tool demo](https://microsoftedge.github.io/Demos/devtools-inspect/) | | Debugging JavaScript that adds two numbers | Used for [Get started debugging JavaScript](https://learn.microsoft.com/microsoft-edge/devtools/javascript/). | [/devtools-js-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-js-get-started) | [Debugging JavaScript with Microsoft Edge DevTools](https://microsoftedge.github.io/Demos/devtools-js-get-started/) demo | | Memory heap snapshot | Used for [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](https://learn.microsoft.com/microsoft-edge/devtools/memory-problems/heap-snapshots). | [/devtools-memory-heap-snapshot/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) | n/a | @@ -69,16 +48,16 @@ sync'd July 30, 2025 | **Performance** tool Activity Tabs | Used for [View activities in a table](https://learn.microsoft.com/microsoft-edge/devtools/performance/reference#view-activities-in-a-table) in _Performance features reference_, about the **Performance** tool's **Bottom-up**, **Call tree**, and **Event log** tabs. | [/devtools-performance-activitytabs/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-performance-activitytabs) | [Activity Tabs demo](https://microsoftedge.github.io/Demos/devtools-performance-activitytabs/) | | Sluggish Animation | Used for [Analyze runtime performance (tutorial)](https://learn.microsoft.com/microsoft-edge/devtools/performance/). | [/devtools-performance-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-performance-get-started) | [Sluggish Animation](https://microsoftedge.github.io/Demos/devtools-performance-get-started/) demo | | postMessage Trace Events | Tests `postMessage` trace events in the **Performance** tool. Used for [View messages between windows, iframes, and dedicated workers](https://learn.microsoft.com/microsoft-edge/devtools/performance/reference#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](https://learn.microsoft.com/microsoft-edge/devtools/whats-new/2021/01/devtools#support-forcing-the-target-css-state) in _What's New in DevTools (Microsoft Edge 89)_. | [/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/) | +| CSS :target pseudo-class | Used for [Support forcing the :target CSS state](https://learn.microsoft.com/microsoft-edge/devtools/whats-new/2021/01/devtools#support-forcing-the-target-css-state) in _What's new in DevTools (Microsoft Edge 89)_. | [/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/) | | Emulate a focused page | Used for [Emulate a focused page](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#emulate-a-focused-page) in _CSS features reference_. | [/emulate-focused-page/](https://github.com/MicrosoftEdge/Demos/tree/main/emulate-focused-page/) | [Emulate a focused page](https://microsoftedge.github.io/Demos/emulate-focused-page/) demo | -| Exploring the universe | Used for [Monitor Core Web Vitals metrics](../performance/overview.md#monitor-core-web-vitals-metrics) in _Performance tool: Analyze your website's performance_. | [/exploring-the-universe/](https://github.com/MicrosoftEdge/Demos/tree/main/exploring-the-universe) | [Exploring the universe](https://microsoftedge.github.io/Demos/exploring-the-universe/) demo | -| Heap Snapshot Visualizer | Used for [Heap Snapshot visualizer extension for DevTools](https://learn.microsoft.com/microsoft-edge/devtools/whats-new/2023/01/devtools-109#heap-snapshot-visualizer-extension-for-devtools) in _What's New in DevTools (Microsoft Edge 109)_. | [/heap-snapshot-visualizer/](https://github.com/MicrosoftEdge/Demos/tree/main/heap-snapshot-visualizer) | n/a | +| Exploring the universe | Used for [Monitor Core Web Vitals metrics](https://learn.microsoft.com/microsoft-edge/devtools/performance/overview#monitor-core-web-vitals-metrics) in _Performance tool: Analyze your website's performance_. | [/exploring-the-universe/](https://github.com/MicrosoftEdge/Demos/tree/main/exploring-the-universe) | [Exploring the universe](https://microsoftedge.github.io/Demos/exploring-the-universe/) demo | +| Heap Snapshot Visualizer | Used for [Heap Snapshot visualizer extension for DevTools](https://learn.microsoft.com/microsoft-edge/devtools/whats-new/2023/01/devtools-109#heap-snapshot-visualizer-extension-for-devtools) in _What's new in DevTools (Microsoft Edge 109)_. | [/heap-snapshot-visualizer/](https://github.com/MicrosoftEdge/Demos/tree/main/heap-snapshot-visualizer) | n/a | | Highlight pseudo-elements | Used for [View inherited highlight pseudo-elements](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#view-inherited-highlight-pseudo-elements) in _CSS features reference_. | [/highlight-pseudo-elements/](https://github.com/MicrosoftEdge/Demos/tree/main/highlight-pseudo-elements/) | [Highlight pseudo-elements](https://microsoftedge.github.io/Demos/highlight-pseudo-elements/) demo | | Idle detection | Used for [Emulate idle detector state](https://learn.microsoft.com/microsoft-edge/devtools/sensors/#emulate-idle-detector-state) in _Emulate device sensors_. | [/idle-detection/](https://github.com/MicrosoftEdge/Demos/tree/main/idle-detection) | [Idle detection demo](https://microsoftedge.github.io/Demos/idle-detection/) | | JSON dummy data | Simple JSON files. Used for [View a JSON file or server response with formatting](https://learn.microsoft.com/microsoft-edge/web-platform/json-viewer). | [/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) | | Inspect Network Activity | Used for [Inspect network activity](https://learn.microsoft.com/microsoft-edge/devtools/network/). | [/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 [View your custom data in the performance profile](https://learn.microsoft.com/microsoft-edge/devtools/performance/extension#view-your-custom-data-in-the-performance-profile) in _Customize performance profile with extensibility APIs_, and [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/) demo | -| Slow Calendar | Simple calendar demo app to test DevTools features such as the **Performance** tool and source map support. Used for [Added source map support in the Coverage tool](https://learn.microsoft.com/microsoft-edge/devtools/whats-new/2024/01/devtools-121#added-source-map-support-in-the-coverage-tool) in _What's New in DevTools (Microsoft Edge 121)_. | [/slow-calendar/](https://github.com/MicrosoftEdge/Demos/tree/main/slow-calendar) | [Slow Calendar](https://microsoftedge.github.io/Demos/slow-calendar/public/) demo | +| Slow Calendar | Simple calendar demo app to test DevTools features such as the **Performance** tool and source map support. Used for [Added source map support in the Coverage tool](https://learn.microsoft.com/microsoft-edge/devtools/whats-new/2024/01/devtools-121#added-source-map-support-in-the-coverage-tool) in _What's new in DevTools (Microsoft Edge 121)_. | [/slow-calendar/](https://github.com/MicrosoftEdge/Demos/tree/main/slow-calendar) | [Slow Calendar](https://microsoftedge.github.io/Demos/slow-calendar/public/) demo | | Margie's Travel | Demonstrates how to optimize a webpage's resources to make it load, appear, and be interactive faster. Used for [Optimize website speed using Lighthouse](https://learn.microsoft.com/microsoft-edge/devtools/speed/get-started). | [/travel-site/](https://github.com/MicrosoftEdge/Demos/tree/main/travel-site) | [Margie's Travel](https://microsoftedge.github.io/Demos/travel-site/) demo | | Workspaces | Used for [Edit and save files in a workspace (Sources tool Workspace tab)](https://learn.microsoft.com/microsoft-edge/devtools/workspaces/). | [/workspaces/](https://github.com/MicrosoftEdge/Demos/tree/main/workspaces) | [DevTools Workspaces demo](https://microsoftedge.github.io/Demos/workspaces/) | @@ -91,11 +70,6 @@ See also: ## Microsoft Edge extensions - | Demo name | Description and docs | Source code & Readme | Live demo page | |---|---|---|---| @@ -113,11 +87,6 @@ See also: ## Progressive Web Apps (PWAs) - @@ -141,18 +110,13 @@ sync'd Oct. 17, 2025 To learn how to use and develop PWAs, start with the Temperature convertor sample. See also: -* [Progressive Web App samples](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/samples/index) - also lists the demos: +* [Progressive Web App samples](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/samples/) - also lists the demos: * BPM Techno * Webboard ## WebView2 - The WebView2 samples are in the **MicrosoftEdge / WebView2Samples** repo, rather than in the present, **MicrosoftEdge / Demos** repo. @@ -163,11 +127,6 @@ See: ## Cross-browser API samples - | Demo name | Description and docs | Source code & Readme | Live demo page | |---|---|---|---| @@ -198,54 +157,57 @@ See also: -## Adding a new demo +## Cloning this repo to your drive -To add a new demo: +To use this repo, you can do any of the following approaches: +* Clone the repo. Enables keeping your copy up-to-date. +* Fork the repo. Enables keeping your copy up-to-date. Enables making a pull request. +* Download the repo as a `.zip` file. A static snapshot. +* Download a specific sample directory as a `.zip` file. A static snapshot. -1. Make a copy of the `/template/` directory at the root of this repository and give it a name, such as `/my-demo/`. +See: +* [Cloning a repository](https://docs.github.com/repositories/creating-and-managing-repositories/cloning-a-repository) in GitHub Docs. +* [Clone the "MicrosoftEdge / Demos" repo to your drive](https://learn.microsoft.com/microsoft-edge/devtools/sample-code/sample-code#clone-the-edge-demos-repo-to-your-drive) in _Sample code for DevTools_. -1. Edit the `README.md` file in the new directory to clearly explain what your new demo is about. -1. In the README file, include a GitHub.io link that points to the live demo. + +## Contributing - This repository is set up to be deployed live using GitHub Pages (GitHub.io), so a rendered `index.html` file in the `/my-demo/` directory (for example) will end up being accessible on the web at `https://microsoftedge.github.io/demos/my-demo/`. +This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com. -1. Edit the code (such as `index.html` or `style.css`) in the new directory. Add any files you need. +When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA. -1. Add a link to your demo in this `README.md` file, in a new row in one of the tables above, similar to the following row: +This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. -| Demo name | Description and docs | Source code & Readme | Live demo page | -|---|---|---|---| -| Template | Template directory to copy/paste to add a new demo. Can be used for [Microsoft Edge Developer documentation](https://learn.microsoft.com/microsoft-edge/developer/). | [/template/](https://github.com/MicrosoftEdge/Demos/tree/main/template) | [My new demo](https://microsoftedge.github.io/Demos/template/) | + +### Adding a new demo - -## Contributing +To add a new demo: -This project welcomes contributions and suggestions. Most contributions require you to agree to a -Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us -the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com. +1. Make a copy of the `/template/` directory at the root of this repository and give it a name, such as `/my-demo/`. -When you submit a pull request, a CLA bot will automatically determine whether you need to provide -a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions -provided by the bot. You will only need to do this once across all repos using our CLA. +1. Edit `README.md` in the new directory to clearly explain what your new demo is about. -This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). -For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or -contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. +1. In `README.md` in the new directory, modify the `github.io` link to point to the live demo; that is, change `/my-demo/` to the name of your directory. + This repository is set up to be deployed live using GitHub Pages (GitHub.io), so a rendered `index.html` file in the `/my-demo/` directory (for example) will end up being accessible on the web at `https://microsoftedge.github.io/demos/my-demo/`. - -## Trademarks + The GitHub.io-hosted demo page will be available about an hour after your PR is merged. You can monitor the job at [Actions](https://github.com/MicrosoftEdge/Demos/actions). + +1. Edit the code in the new directory, such as: + * `index.html` + * `README.md` + * `script.js` + * `style.css` + * `manifest.json` + +1. Create a PR in this repo. See [Pull requests documentation](https://docs.github.com/en/pull-requests). -This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft -trademarks or logos is subject to and must follow -[Microsoft's Trademark & Brand Guidelines](https://www.microsoft.com/legal/intellectualproperty/trademarks/usage/general). -Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. -Any use of third-party trademarks or logos are subject to those third-party's policies. + The Edge team will review, approve, and merge your PR. -## See also +## Trademarks -* [Clone the Edge Demos repo to your drive](https://learn.microsoft.com/microsoft-edge/devtools/sample-code/sample-code#clone-the-edge-demos-repo-to-your-drive) in _Sample code for DevTools_. +This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow [Microsoft's Trademark & Brand Guidelines](https://www.microsoft.com/legal/intellectualproperty/trademarks/usage/general). Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies. diff --git a/css-mirroring-sourcemaps-demo/script.js b/css-mirroring-sourcemaps-demo/script.js index 7f9d6cd8..8368db4a 100644 --- a/css-mirroring-sourcemaps-demo/script.js +++ b/css-mirroring-sourcemaps-demo/script.js @@ -1 +1 @@ -console.log('My new demo JS code'); \ No newline at end of file +console.log('Console log message from script.js'); diff --git a/email-client/README.md b/email-client/README.md index aeca25dd..34272f9c 100644 --- a/email-client/README.md +++ b/email-client/README.md @@ -2,13 +2,15 @@ ➡️ **[Open the demo](https://microsoftedge.github.io/Demos/email-client/)** ⬅️ -This is an email client installable app (which doesn't actually send and receive emails) that demonstrates the PWA protocol handling feature. +This is an installable email client app that demonstrates the PWA protocol handling feature, and showcases the `application-title` meta tag. + +This demo doesn't actually send and receive emails. ## About the demo app -The demo app shows a list of received emails, and a compose button that displays a panel to compose a new email when clicked. +This simulated email client PWA demonstrates how to use PWA protocol handlers. The app shows a list of received emails, and a compose button that displays a panel to compose a new email when clicked. The app can be installed on the device, and upon installation will register a protocol handler for `mailto`. @@ -20,6 +22,13 @@ The two interesting pieces of code here are: * The way protocol handling requests are detected and used in [script.js](https://github.com/MicrosoftEdge/Demos/blob/main/email-client/script.js). +This sample demonstrates the following features: + +| Feature | Description | Documentation | +|---|---|---| +| Protocol Handling | `mailto` links are handled by the app to start composing a new email. | [Handle protocols in a PWA](../how-to/handle-protocols.md) | +| `application-title` meta tag | The PWA makes runtime changes to the `` element. | [application-title](https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/meta/name#application-name) in _<meta> name attribute_ at MDN. | + ## How to use the demo diff --git a/opaque-range/README.md b/opaque-range/README.md index f7a7155f..9f2478b5 100644 --- a/opaque-range/README.md +++ b/opaque-range/README.md @@ -38,7 +38,7 @@ To test the feature: * To test in production, with your real users site, register for the origin trial: - * [Edge origin trial](https://developer.microsoft.com/en-us/microsoft-edge/origin-trials/trials/5f4620e8-2969-4579-a5c6-304b8fae7200). + * [Edge origin trial](https://developer.microsoft.com/microsoft-edge/origin-trials/trials/5f4620e8-2969-4579-a5c6-304b8fae7200). * [Chrome origin trial](https://developer.chrome.com/origintrials/#/register_trial/1731071106770534401). ## Provide feedback diff --git a/opaque-range/index.html b/opaque-range/index.html index ab139f44..fff26902 100644 --- a/opaque-range/index.html +++ b/opaque-range/index.html @@ -15,7 +15,7 @@

OpaqueRange demo

The OpaqueRange API lets you create ranges over the value of <textarea> and <input> elements, enabling getBoundingClientRect() and the - CSS Custom Highlight API + CSS Custom Highlight API to work directly on form controls without cloning elements. Give feedback on the feature. diff --git a/pwa-background-sync/README.md b/pwa-background-sync/README.md index 3b5f92a7..b0bed9c1 100644 --- a/pwa-background-sync/README.md +++ b/pwa-background-sync/README.md @@ -1,9 +1,31 @@ # PWA Background Sync API demo -[➡️Open demo app here⬅️](https://microsoftedge.github.io/Demos/pwa-background-sync/) -> **Note:** to test the demo app, first install it by clicking the **App available** button in the address bar of Microsoft Edge, and then open the installed app in its own window. + +## Open the sample + +To test the demo app: + +1. Open the [PWA Background Sync API demo](https://microsoftedge.github.io/Demos/pwa-background-sync/). + +1. In the Address bar, click the **App available** button. + + The app is installed. + +1. Open the installed app in its own window. + + + +## About the sample The Background Sync API makes it possible for users to continue using your PWA even when they are offline, and synchronize data with the server once the network connection is restored. -See [Use the Background Sync API to synchronize data with the server](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/how-to/background-syncs#use-the-background-sync-api-to-synchronize-data-with-the-server). +The PWA Background Sync API 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](./background-sync.png) + +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](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/how-to/background-syncs) | diff --git a/pwa-background-sync/background-sync.png b/pwa-background-sync/background-sync.png new file mode 100644 index 00000000..c37d3d02 Binary files /dev/null and b/pwa-background-sync/background-sync.png differ diff --git a/pwa-file-handlers/README.md b/pwa-file-handlers/README.md index 7a732dc3..c1f29090 100644 --- a/pwa-file-handlers/README.md +++ b/pwa-file-handlers/README.md @@ -1,9 +1,26 @@ # PWA file handlers demo -[➡️Open demo app here⬅️](https://microsoftedge.github.io/Demos/pwa-file-handlers/) + +## Open the sample -> **Note:** to test the demo app, first install it by clicking the **App available** button in the address bar of Microsoft Edge, and then open the installed app in its own window. +To open this sample: -The `file_handlers` web app manifest member lets your PWA handle files like native applications. +1. Go to [PWA file handlers demo](https://microsoftedge.github.io/Demos/pwa-file-handlers/). -See [Handle files in a PWA](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/how-to/handle-files). +1. In the Address bar, click the **App available** button. + +1. Open the installed app in its own window. + + + +## About the sample + +The PWA file handlers app handles `*.txt` files like a native application does, by using the `file_handlers` web app manifest member. + +![The "PWA file handlers" demo app](./file-handlers.png) + +The PWA file handlers demo 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) | diff --git a/pwa-file-handlers/file-handlers.png b/pwa-file-handlers/file-handlers.png new file mode 100644 index 00000000..5cf6f10a Binary files /dev/null and b/pwa-file-handlers/file-handlers.png differ diff --git a/pwa-installer/README.md b/pwa-installer/README.md index ee824202..fb00877a 100644 --- a/pwa-installer/README.md +++ b/pwa-installer/README.md @@ -1,63 +1,41 @@ # PWA installer -➡️ **[Open the demo](https://microsoftedge.github.io/Demos/pwa-installer/)** ⬅️ - -**PWA installer** is a demo app for a landing page (titled **Edge demos** ) that lets you install PWAs from a collection of applications. - -This demo app showcases the Web Install API. This demo app also demonstrates CSS Masonry layout. - -## Requirements +## About the sample -* For the demo to work correctly, you must enable a flag for the Web Install API. That flag is available in browsers based on Chromium, such as Microsoft Edge, starting with version 139. +This demo app showcases the Web Install API. **PWA installer** is a sample app (titled **Edge demos** ) that lets you install other PWAs on your device. -* As a progressive enhancement, you can also enable the CSS Masonry flag. +PWA installer uses the following features: +| Feature | Description | Documentation | +|---|---|---| +| Web Install API | PWA installer uses the `navigator.install()` API to install other PWAs on the device. | [Web Install API](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/WebInstall/explainer.md) | - -### Enable the Web Install API -To enable the Web Install API (required): + +## Open the sample -1. In the browser, open a new tab and go to `about:flags`. +To open and run the sample: - In Microsoft Edge, you end up at `edge://flags`. +1. Go to the [PWA installer](https://microsoftedge.github.io/Demos/pwa-installer/) demo in a new window or tab. + +1. Open a new tab, and then go to `edge://flags`. 1. In the **Search** box, enter **web-app-installation-api**. 1. Set the **Web App Installation API** flag to **Enabled**. -1. Click the **Restart** button in the lower right. The browser restarts. - - - -### Enable CSS Masonry layout + This flag is available in browsers based on Chromium, such as Microsoft Edge, starting with version 139. -To enable the CSS Masonry layout flag (a progressive enhancement): +1. Click the **Restart** button in the lower right. -1. In the browser, open a new tab and go to `about:flags`. - - In Microsoft Edge, you end up at `edge://flags`. - -1. In the **Search** box, enter **css-masonry-layout**. - -1. Set the **CSS Masonry Layout** flag to **Enabled**. - -1. Click the **Restart** button in the lower right. The browser restarts. + The browser restarts. ## See also -Sample description: -* [PWA installer](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/samples/index#pwa-installer) in _Progressive Web App samples_. - -Blog post: -* [Microsoft Edge: Web Install API Dev Trial Live](https://www.linkedin.com/feed/update/urn:li:activity:7348768177993998337/) - -Explainer: -* [Web Install API](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/WebInstall/explainer.md) - -Other live samples: +* [Microsoft Edge: Web Install API Dev Trial Live](https://www.linkedin.com/feed/update/urn:li:activity:7348768177993998337/) - blog post. +* [Web Install API](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/WebInstall/explainer.md) - explainer. * [Web Install Sample](https://kbhlee2121.github.io/pwa/web-install/index.html) - requires the **web-app-installation-api** flag. diff --git a/pwa-installer/index.html b/pwa-installer/index.html index 695c1f87..501c0756 100644 --- a/pwa-installer/index.html +++ b/pwa-installer/index.html @@ -54,10 +54,8 @@

Instructions

Temperature converter - PWA getting started demo app

A simple PWA demo app that converts temperatures. - For instructions, see Get started with PWAs - .

- + For instructions, see Temperature convertor sample.

diff --git a/pwa-pwastore/index.html b/pwa-pwastore/index.html index 2f5bd3dd..3081e2ae 100644 --- a/pwa-pwastore/index.html +++ b/pwa-pwastore/index.html @@ -34,7 +34,7 @@

Instructions

Some additional details for demos to work:

diff --git a/pwa-timer/README.md b/pwa-timer/README.md index 50f6830a..46833759 100644 --- a/pwa-timer/README.md +++ b/pwa-timer/README.md @@ -1,15 +1,27 @@ # Timer PWA demo -➡️ **[Open the demo](https://microsoftedge.github.io/Demos/pwa-timer/)** ⬅️ + + +## About the sample The Timer PWA demo webpage has a **Set timer** button, and you can set the duration of the timer. This demo is a Progressive Web App (PWA). - -See also: + +## Open the sample + +To open this sample: + +1. Go to [Timer PWA demo](https://microsoftedge.github.io/Demos/pwa-timer/). + +1. In the Address bar, click the **App available** button. + +1. Open the installed app in its own window. + + + +## See also + * [Progressive Web Apps (PWAs) documentation](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/landing/) diff --git a/pwa-to-do/README.md b/pwa-to-do/README.md index 40060e71..92f9d8d1 100644 --- a/pwa-to-do/README.md +++ b/pwa-to-do/README.md @@ -1,20 +1,46 @@ -# PWA To Do (under construction) +# PWA To Do -➡️ **[Open the demo](https://microsoftedge.github.io/Demos/pwa-to-do/)** ⬅️ + + +## About the sample **PWA To Do** is a simple To Do list app that lets you create lists of tasks locally in your browser, or by installing the app. The data storage is done by using the [WebAssembly build of SQLite3](https://sqlite.org/wasm/) and origin-private file system. -Check out the code in the `db.js` file if you're interested in learning more about how to use SQLite3 in your own web app. +This application serves as a browser storage demo for applications that need to store user data locally and query it in interesting ways. + +This application uses: +* The WebAssembly build of SQLite3. +* The Origin-Private File System (OPFS) API. + +To learn how to use SQLite3, see `db.js`. -## TODO +## Open the sample + +To open this sample: + +1. Go to [PWA file handlers demo](https://microsoftedge.github.io/Demos/pwa-to-do/). + +1. In the Address bar, click the **App available** button. + + The app is installed. -Possible enhancements for this demo: +1. Open the installed app in its own window. -* Add a way to import DB from file. + + +## Possible enhancements for this demo + +* Add a way to import the database via a file. * Escape strings before inserting into SQLite. * Sort tasks by most recent tasks, and separate completed tasks vs. todo tasks. * Allow manually sorting the tasks. + + + +## See also + +* [Progressive Web Apps (PWAs) documentation](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/landing/) diff --git a/pwamp/README.md b/pwamp/README.md index 05a9e764..9f836a69 100644 --- a/pwamp/README.md +++ b/pwamp/README.md @@ -1,90 +1,233 @@ # PWAmp app demo -➡️ **[Open the demo](https://microsoftedge.github.io/Demos/pwamp/)** ⬅️ +**Contents:** +* [Open the sample](#open-the-sample) +* [About the sample](#about-the-sample) + * [About the name "PWAmp"](#about-the-name-pwamp) + * [Features available by installing the app](#features-available-by-installing-the-app) + * [Features demonstrated](#features-demonstrated) +* [Use the sample](#use-the-sample) + * [Add new songs](#add-new-songs) + * [Edit song information](#edit-song-information) + * [Add custom artwork for an album](#add-custom-artwork-for-an-album) + * [Play, pause, or go to the next or previous song](#play-pause-or-go-to-the-next-or-previous-song) + * [Record an audio clip](#record-an-audio-clip) + * [Show the visualizer](#show-the-visualizer) + * [Download all songs](#download-all-songs) + * [Delete all songs](#delete-all-songs) + * [Make a custom skin](#make-a-custom-skin) + * [Apply a custom skin](#apply-a-custom-skin) +* [Song credits](#song-credits) +* [Possible enhancements](#possible-enhancements) +* [Articles that use this demo](#articles-that-use-this-demo) -PWAmp (pronounced P-W-Amp) is a web audio player demo application. It is an installable Progressive Web App (PWA) specifically made to demonstrate desktop-integration features. -![Screenshot of the PWAmp app](screenshot-playlist.png) + +## Open the sample + +1. Go to the [pwamp](https://microsoftedge.github.io/Demos/pwamp/) demo in a new window or tab. + +1. In the Address bar, click the **App available** button. + +1. Open the installed app in its own window. -## User guide +## About the sample + +PWAmp is pronounced _P-W-Amp_. + +PWAmp is a web audio player demo app; a desktop music player that plays local and remote audio files. + +The app is an installable Progressive Web App (PWA) specifically made to demonstrate desktop integration features. + +![The PWAmp sample](./screenshot-playlist.png) + + + +### About the name "PWAmp" + +This app is a "Progressive WebAmp". PWAmp's name was inspired by [Winamp](https://en.wikipedia.org/wiki/Winamp), which was a popular media player application for Microsoft Windows. + +The "Win" part of the name "WinAmp" was replaced by "PW", which are the first two letters of "PWA" (Progressive Web App). + +The name "Webamp" was already in use, by [Webamp.org](https://webamp.org). + +See also: +* [Overview of Progressive Web Apps (PWAs)](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/) + + + +### Features available by installing the app + +When you install the PWA locally on the desktop, the following features become available: -* Open the app: https://microsoftedge.github.io/Demos/pwamp/ +* Audio files are handled natively. To add an audio file to your PWAmp library, double-click the audio file, such as in File Explorer. -* To add new songs: - * Either drag and drop audio files from your explorer onto the playlist area. - * Or click the `+` button in the bottom toolbar. +* `*.pwampskin` files are handled natively. To change the look and feel of the app, double-click a `.pwampskin` file. -* Artist, title, and album information are parsed from the song files (if available). +* The custom `web+amp` protocol is handled natively. -* To edit song information, click on the artist, title, or album fields and edit the text. + * Share links of remote songs with other people by using `web+amp:remote-song:` links. -* To add custom artworks for albums, drag and drop image files onto songs. + * You can also share skins with other people by using the URL pattern `web+amp:skin:`. Example song link: -* Use the top toolbar to play, pause, and go to the next or previous songs. + * [By the Light of the Silvery Moon - Fats Waller](web+amp:remote-song:ia803003.us.archive.org/17/items/78_by-the-light-of-the-silvery-moon_fats-waller-and-his-rhythm-fats-waller-the-dee_gbia0153541a/BY%20THE%20LIGHT%20OF%20THE%20SILVERY%20-%20%22Fats%22%20Waller%20and%20his%20Rhythm.mp3). -* The bottom toolbar contains the following extra features: - * Apply a custom skin: select a .css or .pwampskin file to replace the look and feel of the app with your own. - * Record an audio clip: click once to start recording, click once more to stop recording. - * Show visualizer: click to toggle the visualizer mode. - * More tools: options to download all songs or delete all songs. +* The title bar can be displayed or hidden. To hide the title bar, in the toolbar, click the chevron (^) icon. -* If you install the PWA locally on desktop, the following features become available: - * Audio files are handled natively. Just double-click an audio file to add it to your PWAmp library. - * *.pwampskin files are also handled natively, Double-click one such file to change the look and feel of the app. - * The custom `web+amp` protocol is handled natively. Share links of remote songs with other people by using `web+amp:remote-song:` links. You can also share skins with other people by using `web+amp:skin:`. - [Example song link](web+amp:remote-song:ia803003.us.archive.org/17/items/78_by-the-light-of-the-silvery-moon_fats-waller-and-his-rhythm-fats-waller-the-dee_gbia0153541a/BY%20THE%20LIGHT%20OF%20THE%20SILVERY%20-%20%22Fats%22%20Waller%20and%20his%20Rhythm.mp3) - * The title bar becomes toggleable. Click the chevron icon in the toolbar to hide it. - * The app becomes a share target for audio files. If you share audio files from another app (or from the explorer), PWAmp is displayed as a target app for these files. +* The app becomes a share target for audio files. If you share audio files from another app (or from the explorer), PWAmp is displayed as a target app for these files. + + + +### Features demonstrated + +PWAmp uses the following features: + +| Feature | Description | Documentation | +|---|---|---| +| Window Controls Overlay | The space normally reserved to the title bar can be used by PWAmp to display a visualization of the current song. | [Display content in the title bar area using Window Controls Overlay](../how-to/window-controls-overlay.md) | +| Protocol Handling | Links that start with `web+amp:` can be used to share remote songs. | [Handle protocols in a PWA](../how-to/handle-protocols.md) | +| File Handling | Audio files can be opened with PWAmp directly. Right-click on a file ending with `.mp3` for example and click **Open with**. | [Handle files in a PWA](../how-to/handle-files.md) | +| Web Share | Songs can be shared with other apps through the operating system sharing dialog. | [Sharing content](../how-to/share.md#sharing-content) | +| Share Target | Other apps can share audio files with PWAmp, through the operating system sharing dialog. | [Receiving shared content](../how-to/share.md#receiving-shared-content) | +| Widget | A mini-player Widget can be installed in Windows 11 Widgets dashboard to see the current song. | [Display a PWA widget in the Windows Widgets Board](../how-to/widgets.md) | +| Sidebar | PWAmp can be pinned to the sidebar in Microsoft Edge. | [Build a PWA for the sidebar in Microsoft Edge](../how-to/sidebar.md) | -## Making a new skin +## Use the sample + + + +### Add new songs + +To add new songs, do either: +* Drag audio files from your explorer onto the playlist area. +* In the bottom toolbar, click the `+` button. + +Artist, title, and album information are parsed from the song files (if available). + + + +### Edit song information + +To edit song information: + +1. Click the artist, title, or album field. + +1. Edit the text. + + + +### Add custom artwork for an album + +To add custom artwork for an album: + +1. Drag and drop an image file onto a song. + + + +### Play, pause, or go to the next or previous song + +To play, pause, or go to the next or previous song: + +1. Use the top toolbar. + + + +### Record an audio clip + +To record an audio clip: + +1. Click the **Record an audio clip** button at the bottom of the page. + +1. Click the **Stop recording** button at the bottom of the page. + + + +### Show the visualizer + +To show or hide the visualizer: + +1. Click the **Show visualizer** button in the upper right of the page. + + The page UI is replaced by the visualizer. + +1. Click the **Stop visualizer** button in the lower right of the page. + + + +### Download all songs + +To download all songs: + +1. Click the **More tools** button in the lower right of the page, and then select **Export all**. + + The first track starts playing. + +1. Click the **more options** button, and then select **Download**. + + + +### Delete all songs + +To delete all songs: + +1. Click the **More tools** button in the lower right of the page, and then select **Delete all**. + + + +### Make a custom skin A skin is a CSS file that gets applied to the app, replacing the default CSS. -The best way to make a new skin is to open DevTools and look at the HTML structure of the page. Most elements should have handy classes and IDs that will make them easy to style. +The best way to make a new skin is to open DevTools and look at the HTML structure of the page. Most elements should have handy classes and IDs that will make them easy to style. -Skins are expected to have a `:root {}` rule with at least one variable called `--back` set to the color of the background. This will be used at runtime, in JavaScript, by the app to apply the color to the visualizer and the title bar area. +Skins are expected to have a `:root {}` rule with at least one variable called `--back` set to the color of the background. The `:root {}` rule is used at runtime, via JavaScript, to apply the color to the visualizer and the title bar area. - -## What does the name mean? + +#### Apply a custom skin -[Winamp](https://en.wikipedia.org/wiki/Winamp) was a very successful media player application for Microsoft Windows. PWAmp's name was inspired by it; we just replaced the `win` part with `PW` which are the 2 first letters of PWA (Progressive Web App). The name "Webamp" might have made more sense, but was [already used](https://webamp.org/). +To replace the look and feel of the app with your own look and feel: -You can think of this app as the "Progressive Web Amp". +1. Click the **Apply a custom skin** button at the bottom of the page. -See also: -* [Overview of Progressive Web Apps (PWAs)](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/) + The **Select a file this site can read** dialog opens. + +1. Select a `.css` or `.pwampskin` file. ## Song credits -The first time you open the app, a few songs are pre-loaded. These are remote URL songs, so they will only play when you are online. +The first time you open PWAmp, a few songs are pre-loaded. These songs use remote URLs. These songs only play when you are online. -Credits for those songs: +Credits for the pre-loaded songs: * "Reunion", and "Over The Stargates" by David Rousset, used with the author's approval. More information and songs on [soundcloud](https://soundcloud.com/david-rousset). * "Opening" and "Aloe-Almond Butter And Space Pesto" by Noi2er, from the [Internet Archive](https://archive.org/details/DWK382). -## TODO - -Possible enhancements for this demo: +## Possible enhancements * Make sure the app is accessible in high-contrast mode. + * Make it possible to download remote songs locally: - * fetch -> `readablestream` -> store chunks in IDB. + * Fetch, then `readablestream`, then store chunks in IDB. * Then fetch handler in SW to serve these chunks back from IDB when offline. + * Improve song adding performance again: only get duration later, after song has been added. -* Add the ability to drag/drop songs in the playlist to re-order them. -* Ability to export as another file format. -* Use viewport segments to display on dual screen devices. -* Add repeat and shuffle buttons. + +* Add the ability to drag songs onto the playlist to re-order them. + +* Add the ability to export a song as a different file format. + +* Use viewport segments to display on dual-screen devices. + +* Add **Repeat** and **Shuffle** buttons. diff --git a/scoped-custom-element-registries/README.md b/scoped-custom-element-registries/README.md index 733fb010..a3feca0a 100644 --- a/scoped-custom-element-registries/README.md +++ b/scoped-custom-element-registries/README.md @@ -6,4 +6,4 @@ Scoped Custom Element Registries allow you to define custom elements that are sc To learn more, see: -* [CustomElementRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry) at MDN. +* [CustomElementRegistry](https://developer.mozilla.org/docs/Web/API/CustomElementRegistry) at MDN. diff --git a/temperature-converter/README.md b/temperature-converter/README.md index 62ebd7d9..0b188af6 100644 --- a/temperature-converter/README.md +++ b/temperature-converter/README.md @@ -2,6 +2,12 @@ ➡️ **[Open the demo](https://microsoftedge.github.io/Demos/temperature-converter/)** ⬅️ -A demo Progressive Web App (PWA) that converts temperatures. To start learning to use and develop PWAs, start with this sample. +A Progressive Web App (PWA) that converts temperatures. To start learning to use and develop PWAs, start with this sample. For instructions, see [Temperature convertor sample](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/samples/temperature-converter). + + + +## See also + +* [Progressive Web Apps (PWAs) documentation](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/landing/) diff --git a/template/README.md b/template/README.md index dc1a3538..afd31b12 100644 --- a/template/README.md +++ b/template/README.md @@ -1,6 +1,6 @@ -# My new demo +# My demo -➡️ **[Open the demo](https://microsoftedge.github.io/Demos/my-new-demo/)** ⬅️ +➡️ **[Open the demo](https://microsoftedge.github.io/Demos/my-demo/)** ⬅️ Use this file to describe what the demo is about and how to use it. diff --git a/template/index.html b/template/index.html index eef96193..54703fea 100644 --- a/template/index.html +++ b/template/index.html @@ -4,12 +4,12 @@ - My new demo + My demo -

My new demo

+

My demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam cursus est sit amet lacus ullamcorper, in rhoncus velit molestie. Morbi ut sem a mauris condimentum fermentum non a orci. Donec libero tellus, fringilla a malesuada in, scelerisque nec risus. Pellentesque pharetra dolor eget elit gravida sagittis. Aliquam gravida condimentum odio, eget fringilla metus feugiat sit amet. Aliquam tristique tellus nec suscipit facilisis. Pellentesque lacus enim, fringilla vitae elit sed, euismod scelerisque dui. Morbi augue massa, commodo sit amet metus id, suscipit efficitur sem. Sed a ornare est, ut convallis nulla. Sed mollis tellus eu augue hendrerit lobortis. In tellus risus, venenatis tristique tempor eget, blandit eu elit.

Ut magna libero, maximus quis lectus ac, auctor suscipit eros. Nulla placerat consequat enim, quis viverra risus tempus eget. Integer condimentum eros sit amet massa lacinia, ac placerat quam pellentesque. Maecenas eleifend orci nisi. Pellentesque bibendum venenatis urna id faucibus. Fusce eu mattis enim. Etiam aliquam ligula vitae ex elementum porttitor. Nulla suscipit nunc congue, fringilla sem nec, viverra orci. Vestibulum quam leo, accumsan eu dolor in, elementum gravida dolor.

diff --git a/template/script.js b/template/script.js index 7f9d6cd8..8368db4a 100644 --- a/template/script.js +++ b/template/script.js @@ -1 +1 @@ -console.log('My new demo JS code'); \ No newline at end of file +console.log('Console log message from script.js'); diff --git a/wami/README.md b/wami/README.md index 4ca828dc..baca7a29 100644 --- a/wami/README.md +++ b/wami/README.md @@ -1,13 +1,38 @@ # wami, the Web App to Manipulate Images -➡️ **[Open the demo](https://microsoftedge.github.io/Demos/wami/)** ⬅️ +![The wami app](./screenshot-app.png) -wami is an image manipulation demo application. It is an installable web app (PWA) specifically made to demonstrate that web technologies can be used to create desktop apps that feel like platform-specific apps. +wami is an image manipulation demo application. wami is an installable Progressive Web App (PWA) to demonstrate that web technologies can be used to create desktop apps that feel like platform-specific apps. -![Screenshot of the wami app](screenshot-app.png) + + +## Open the sample + +To open this sample: + +1. Go to the [wami](https://microsoftedge.github.io/Demos/wami/) demo in a new window or tab. + +1. In the Address bar, click the **App available** button. + +1. Open the installed app in its own window. + + + +## Limitations and issues wami is under development; expect bugs and cross-browser compatibility issues. +wami can apply a sequence of image manipulation steps such as cropping, resizing, rotating, or adding effects on batch of images. + +[Readme and source code](https://github.com/MicrosoftEdge/Demos/tree/main/wami/), [App](https://microsoftedge.github.io/Demos/wami/). + +wami uses the following features: + +| Feature | Description | Documentation | +|---|---|---| +| 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) | + ## Using the demo @@ -59,3 +84,9 @@ Possible enhancements for this demo: * Share images. * Export/import flows as JSON files. * Submit this demo to the Microsoft store. + + + +## See also + +* [Progressive Web Apps (PWAs) documentation](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/landing/)