Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 15 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -97,27 +97,28 @@ See also:
<!-- ====================================================================== -->
## Progressive Web Apps (PWAs)
<!-- sync:
https://learn.microsoft.com/microsoft-edge/progressive-web-apps/demo-pwas
https://learn.microsoft.com/microsoft-edge/progressive-web-apps/samples/index
https://github.com/MicrosoftEdge/Demos/blob/main/README.md#progressive-web-apps-pwas
sync'd July 30, 2025
sync'd Oct. 17, 2025
-->

| Demo name | Description and docs | Source code & Readme | Live demo page |
|---|---|---|---|
| 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 |
| 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 |
| 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 |
| Temperature converter | Converts temperatures. Used for [Get started with PWAs](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/how-to/). | [/pwa-getting-started/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-getting-started) | [Temperature converter](https://microsoftedge.github.io/Demos/pwa-getting-started/) demo |
| 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 |
| 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/) |
| 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 |
| 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 |
| 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 |

<!-- todo: change from [Get started with PWAs] to [Temperature convertor sample] after merge https://github.com/MicrosoftDocs/edge-developer/pull/3476 -->
| 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 |
| 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 |
| 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 |
| 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 |
| 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/) |
| 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/) |
| 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 |
| 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 |
| 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/pwa-getting-started/) demo |
| 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 |

To learn how to use and develop PWAs, start with the Temperature convertor sample.

See also:
* [Progressive Web App demos](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/demo-pwas) - also lists the demos:
* [Progressive Web App samples](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/samples/index) - also lists the demos:
* My Movie List
* My Tracks
* BPM Techno
Expand Down
2 changes: 1 addition & 1 deletion email-client/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,4 +40,4 @@ The two interesting pieces of code here are:

* [Test Progressive Web App (PWA) protocol handling](https://learn.microsoft.com/microsoft-edge/devtools/progressive-web-apps/protocol-handlers)
* [Handle protocols in a PWA](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/how-to/handle-protocols)
* [Email client](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/demo-pwas#email-client) in _Progressive Web App demos_.
* [Email client](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/samples/index#email-client) in _Progressive Web App samples_.
7 changes: 0 additions & 7 deletions pwa-getting-started/README.md

This file was deleted.

30 changes: 24 additions & 6 deletions pwa-installer/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,23 @@

➡️ **[Open the demo](https://microsoftedge.github.io/Demos/pwa-installer/)** ⬅️

**PWA installer** is a demo app for a landing page that lets you install PWAs from a collection of applications. This demo app showcases the Web Install API.
**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

For the demo to work correctly, you must enable a flag, which is available in browsers based on Chromium, such as Microsoft Edge, starting with version 139.
* 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.

* As a progressive enhancement, you can also enable the CSS Masonry flag.


<!-- ------------------------------ -->
### Enable the Web Install API

To enable the flag:
To enable the Web Install API (required):

1. In the browser, open a new tab and go to `about:flags`.

Expand All @@ -22,9 +30,11 @@ To enable the flag:

1. Click the **Restart** button in the lower right. The browser restarts.

1. In the same browser, go to [https://microsoftedge.github.io/Demos/pwa-installer/](https://microsoftedge.github.io/Demos/pwa-installer/) or your localhost equivalent.

This demo also makes use of CSS masonry layout, as a progressive enhancement. You can optionally enable the CSS masonry flag:
<!-- ------------------------------ -->
### Enable CSS Masonry layout

To enable the CSS Masonry layout flag (a progressive enhancement):

1. In the browser, open a new tab and go to `about:flags`.

Expand All @@ -40,6 +50,14 @@ This demo also makes use of CSS masonry layout, as a progressive enhancement. Y
<!-- ====================================================================== -->
## See also

Regular article section:
* [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)
* [PWA installer](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/demo-pwas#pwa-installer) in _Progressive Web App demos_.

Other live samples:
* [Web Install Sample](https://kbhlee2121.github.io/pwa/web-install/index.html) - requires the **web-app-installation-api** flag.
66 changes: 62 additions & 4 deletions pwa-pwastore/README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,67 @@
# Edge demos
# Edge demos

➡️ **[Open the demo](https://microsoftedge.github.io/Demos/pwa-pwastore/)** ⬅️

**Edge demos** is a demo app for a landing page of a collection of applications.
This is a demo app for a landing page (titled **Edge demos** ) that lets you install PWAs from a collection of applications.

## Requirements
This demo app showcases the Web Install API. This demo app also demonstrates CSS Masonry layout.

This demo application showcases the Web Install API and the "Masonry" layout. You need to enable 2 separate flags in `about://flags` for the demo to work correctly (`#css-masonry-layout`/`#web-app-installation-api`) available in Chromium browsers versions M139+.
The `/pwa-pwastore/` directory is an earlier copy of [/pwa-installer/](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-installer/). The Web Install API Dev Trial docs point to this earlier, `/pwa-pwastore/` directory, not to the later, `/pwa-installer/` directory.


<!-- ====================================================================== -->
## Requirements

This demo application showcases the Web Install API, and also CSS Masonry layout.

* 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.

* As a progressive enhancement, you can also enable the CSS Masonry flag.


<!-- ------------------------------ -->
### Enable the Web Install API

To enable the Web Install API (required):

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 **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

To enable the CSS Masonry layout flag (a progressive enhancement):

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.


<!-- ====================================================================== -->
## See also

Regular article section:
* [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:
* [Web Install Sample](https://kbhlee2121.github.io/pwa/web-install/index.html) - requires the **web-app-installation-api** flag.
2 changes: 1 addition & 1 deletion pwamp/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ Possible enhancements for this demo:

Find "PWAmp" in the following articles.

* [PWAmp](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/demo-pwas#pwamp) in _Progressive Web App demos_.
* [PWAmp](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/samples/index#pwamp) in _Progressive Web App samples_.
* [Console features reference](https://learn.microsoft.com/microsoft-edge/devtools/console/reference)
* [Test Progressive Web App (PWA) protocol handling](https://learn.microsoft.com/microsoft-edge/devtools/progressive-web-apps/protocol-handlers)
* [View and change IndexedDB data](https://learn.microsoft.com/microsoft-edge/devtools/storage/indexeddb)
Expand Down
7 changes: 7 additions & 0 deletions temperature-converter/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# Temperature converter

➡️ **[Open the demo](https://microsoftedge.github.io/Demos/pwa-getting-started/)** ⬅️

A simple demo 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).
File renamed without changes.
File renamed without changes.
File renamed without changes
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
<link rel="icon" type="image/png" href="./icon512.png">
<link rel="stylesheet" href="./converter.css">
<link rel="manifest" href="./manifest.json">
<title>Temperature converter</title>
Expand Down
File renamed without changes.
File renamed without changes.