diff --git a/README.md b/README.md index 1ba7411..c0e521e 100644 --- a/README.md +++ b/README.md @@ -97,27 +97,28 @@ See also: ## Progressive Web Apps (PWAs) | 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 | - - +| 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 diff --git a/email-client/README.md b/email-client/README.md index 6a1dcd8..aeca25d 100644 --- a/email-client/README.md +++ b/email-client/README.md @@ -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_. diff --git a/pwa-getting-started/README.md b/pwa-getting-started/README.md deleted file mode 100644 index 3cb8dc5..0000000 --- a/pwa-getting-started/README.md +++ /dev/null @@ -1,7 +0,0 @@ -# Temperature converter - PWA getting started demo app - -➡️ **[Open the demo](https://microsoftedge.github.io/Demos/pwa-getting-started/)** ⬅️ - -A simple demo Progressive Web App (PWA) that converts temperatures. - -For instructions, see [Get started with PWAs](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/how-to/). diff --git a/pwa-installer/README.md b/pwa-installer/README.md index 54fc0cb..27fb2f9 100644 --- a/pwa-installer/README.md +++ b/pwa-installer/README.md @@ -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`. @@ -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`. @@ -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. diff --git a/pwa-pwastore/README.md b/pwa-pwastore/README.md index 54f2e3b..ad01f41 100644 --- a/pwa-pwastore/README.md +++ b/pwa-pwastore/README.md @@ -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. diff --git a/pwamp/README.md b/pwamp/README.md index 0e851ef..05a9e76 100644 --- a/pwamp/README.md +++ b/pwamp/README.md @@ -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) diff --git a/temperature-converter/README.md b/temperature-converter/README.md new file mode 100644 index 0000000..bad465b --- /dev/null +++ b/temperature-converter/README.md @@ -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). diff --git a/pwa-getting-started/converter.css b/temperature-converter/converter.css similarity index 100% rename from pwa-getting-started/converter.css rename to temperature-converter/converter.css diff --git a/pwa-getting-started/converter.js b/temperature-converter/converter.js similarity index 100% rename from pwa-getting-started/converter.js rename to temperature-converter/converter.js diff --git a/pwa-getting-started/icon512.png b/temperature-converter/icon512.png similarity index 100% rename from pwa-getting-started/icon512.png rename to temperature-converter/icon512.png diff --git a/pwa-getting-started/index.html b/temperature-converter/index.html similarity index 92% rename from pwa-getting-started/index.html rename to temperature-converter/index.html index 9341895..4e9b899 100644 --- a/pwa-getting-started/index.html +++ b/temperature-converter/index.html @@ -3,7 +3,7 @@ - + Temperature converter diff --git a/pwa-getting-started/manifest.json b/temperature-converter/manifest.json similarity index 100% rename from pwa-getting-started/manifest.json rename to temperature-converter/manifest.json diff --git a/pwa-getting-started/sw.js b/temperature-converter/sw.js similarity index 100% rename from pwa-getting-started/sw.js rename to temperature-converter/sw.js