creates homepage for edge demos

- adds css masonry
- adds more demos

Author: diekus

pwa-pwastore/app.js

@@ -1,28 +1,59 @@
 // All of the UI DOM elements we need.
+const installBtn = document.getElementById("btnInstallStore");
 const pwinterBtn = document.getElementById("installPwinter");
 const pwampBtn = document.getElementById("installPwamp");
+const tempConvBtn = document.getElementById("installPwaGettingStarted");
+const emailClientBtn = document.getElementById("installEmailClient");
+const oneDivBtn = document.getElementById("install1Div");
+const wamiBtn = document.getElementById("installWami");
 const bubbleBtn = document.getElementById("installBubble");
-const installBtn = document.getElementById("btnInstallStore");
+const appTitleBtn = document.getElementById("installappTitle");
+
+
+installBtn.addEventListener('click', async () => {
+  let installation = await navigator.install();
+});
+
+pwinterBtn.addEventListener('click', async () => {
+  let installation = await navigator.install('https://diek.us/pwinter/',
+                    'https://diek.us/pwinter/index.html?randomize=true');
+});
 
-pwinterBtn.addEventListener('click', () => {
-  navigator.install('https://diek.us/pwinter/',
-                    'https://diek.us/pwinter/index.html?randomize=true')
+pwampBtn.addEventListener('click', async () => {
+  let installation = await navigator.install('https://microsoftedge.github.io/Demos/pwamp/',
+                    'https://microsoftedge.github.io/Demos/pwamp/');
 });
 
-pwampBtn.addEventListener('click', () => {
-  navigator.install('https://microsoftedge.github.io/Demos/pwamp/',
-                    'https://microsoftedge.github.io/Demos/pwamp/')
+bubbleBtn.addEventListener('click', async () => {
+  let installation = await navigator.install('https://diek.us/bubble/',
+                    'https://diek.us/bubble/index.html');
 });
 
-bubbleBtn.addEventListener('click', () => {
-  navigator.install('https://diek.us/bubble/',
-                    'https://diek.us/bubble/index.html')
+tempConvBtn.addEventListener('click', async () => {
+  let installation = await navigator.install('https://microsoftedge.github.io/Demos/pwa-getting-started/index.html', 'https://microsoftedge.github.io/Demos/pwa-getting-started/');
+
 });
 
-installBtn.addEventListener('click', () => {
-  navigator.install();
+emailClientBtn.addEventListener('click', async () => {
+  let installation = await navigator.install('https://microsoftedge.github.io/Demos/email-client/',
+                    'https://microsoftedge.github.io/Demos/email-client/index.html');
 });
 
+oneDivBtn.addEventListener('click', async () => {
+  let installation = await navigator.install('https://microsoftedge.github.io/Demos/1DIV/dist/',
+                    'https://microsoftedge.github.io/Demos/1DIV/dist/index.html');
+}); 
+
+wamiBtn.addEventListener('click', async () => {
+  let installation = await navigator.install('https://microsoftedge.github.io/Demos/wami/index.html', 'https://microsoftedge.github.io/Demos/wami/');
+}); 
+
+appTitleBtn.addEventListener('click', async () => {
+  let installation = await navigator.install('https://microsoftedge.github.io/Demos/app-title/',
+                    'https://microsoftedge.github.io/Demos/app-title/');
+}); 
+
+
 const init = () => {
   if (window.matchMedia('(display-mode: standalone)').matches || window.matchMedia('(display-mode: window-controls-overlay)').matches) {
     installBtn.style.display = 'none';

pwa-pwastore/images/app-icons/gen-app.png

@@ -7,8 +7,8 @@
     <link href="styles/pwastore.css" rel="stylesheet">
     <link rel="icon" type="image/x-icon" href="images/favicon.png">
     <link rel="manifest" href="manifest.json" />
-    <meta name="app-title" content="Web Install demo by MSEdgeDEV">
-    <title>The PWA Store</title>
+    <meta name="application-title" content="Edge Demos by the Microsoft Edge team"> 
+    <title>Microsoft Edge Demos</title>
     <link rel="stylesheet" href="styles/pwastore-dark.css" media="(prefers-color-scheme: dark)"/>
     <link rel="stylesheet" href="styles/pwastore-light.css" media="(prefers-color-scheme: light)"/>
     <meta name="theme-color" content="#FFF5E0" media="(prefers-color-scheme: light)"/>
@@ -18,37 +18,72 @@
 <body>
     <div class="draggable"></div>
     <header>
-        <img src="images/pwastore-logo.svg" width="100" height="100" class="storeicon">
-        <button class="btn_install_store" id="btnInstallStore">Install PWA store</button>
+        <img src="images/pwastore-logo.svg" width="200" height="100" class="storeicon">
+        <button class="btn_install_store" id="btnInstallStore">Install Edge Demos</button>
         <div class="category_filter_nav">
             <button class="btn_category">new!</button>
-            <button class="btn_category">music</button>
-            <button class="btn_category">image</button>
-            <button class="btn_category">all apps</button>
+            <button class="btn_category">PWA</button>
+            <button class="btn_category">CSS</button>
+            <button class="btn_category">all demos</button>
         </div>
     </header>
     <main>
+        <article class="app_entry">
+            <img src="https://raw.githubusercontent.com/MicrosoftEdge/Demos/refs/heads/main/pwa-getting-started/icon512.png" width="75" height="75" class="app_icon">
+            <h2>Temperature converter - PWA getting started demo app</h2>
+            <p class="app_descrip">A simple PWA demo app that converts temperatures. Used for <a href="https://learn.microsoft.com/microsoft-edge/progressive-web-apps/how-to/" target="_blank">Get started with Progressive Web Apps.</a></p>
+            <button id="installPwaGettingStarted" class="btn_install">Install</button>
+        </article>
+
         <article class="app_entry">
             <img src="images/app-icons/pwinter.png" width="75" height="75" class="app_icon">
             <h2>The PWinter</h2>
-            <p class="app_descrip">Custom PWA icon generator.</p>
+            <p class="app_descrip">The PWinter is your custom PWA icon generator!</p>
             <button id="installPwinter" class="btn_install">Install</button>
         </article>
 
         <article class="app_entry">
             <img src="images/app-icons/pwamp.png" width="75" height="75" class="app_icon">
             <h2>PWAmp</h2>
-            <p class="app_descrip">Music player, but make it progressive.</p>
+            <p class="app_descrip">A music player PWA demo to play local audio files.</p>
             <button id="installPwamp" class="btn_install">Install</button>
         </article>
 
         <article class="app_entry">
             <img src="images/app-icons/bubble.png" width="75" height="75" class="app_icon">
             <h2>Bubble</h2>
-            <p class="app_descrip">Equirectangular picture viewer.</p>
+            <p class="app_descrip">360° equirectangular picture viewer. For images from 360 cameras.</p>
             <button id="installBubble" class="btn_install">Install</button>
         </article>
 
+        <article class="app_entry">
+            <img src="https://raw.githubusercontent.com/MicrosoftEdge/Demos/refs/heads/main/email-client/img/icon-256.png" width="75" height="75" class="app_icon">
+            <h2>Email Client demo</h2>
+            <p class="app_descrip">A simulated email client PWA that demonstrates how to use PWA protocol handlers.</p>
+            <button id="installEmailClient" class="btn_install">Install</button>
+        </article>
+
+        <article class="app_entry">
+            <img src="https://raw.githubusercontent.com/MicrosoftEdge/Demos/refs/heads/main/1DIV/dist/img/icon-256.png" width="75" height="75" class="app_icon">
+            <h2>1DIV</h2>
+            <p class="app_descrip">A CSS sandbox PWA that demonstrates the Window Controls Overlay feature.</p>
+            <button id="install1Div" class="btn_install">Install</button>
+        </article>
+
+        <article class="app_entry">
+            <img src="https://raw.githubusercontent.com/MicrosoftEdge/Demos/refs/heads/main/wami/favicon-256.png" width="75" height="75" class="app_icon">
+            <h2>wami</h2>
+            <p class="app_descrip">An image manipulation demo app to crop, resize, or add effects to images.</p>
+            <button id="installWami" class="btn_install">Install</button>
+        </article>
+
+        <article class="app_entry">
+            <img src="https://raw.githubusercontent.com/MicrosoftEdge/Demos/refs/heads/main/pwa-application-title/icon.png" width="75" height="75" class="app_icon">
+            <h2>Application Title demo</h2>
+            <p class="app_descrip">A demo web app to showcase the <code>application-title</code> meta tag.</p>
+            <button id="installappTitle" class="btn_install">Install</button>
+        </article>
+
     </main>
     <footer>
         &copy; Microsoft Edge