Implement web install in pwa store app (#41)

amandabaker · web-flow · commit 68e1e6cd2d44 · 2024-09-30T09:24:35.000-07:00
* Implement web install in pwa store app

* Remove extra whitespace
diff --git a/pwa-pwastore/app.js b/pwa-pwastore/app.js
@@ -0,0 +1,19 @@
+// All of the UI DOM elements we need.
+const pwinterBtn = document.getElementById("installPwinter");
+const pwampBtn = document.getElementById("installPwamp");
+const bubbleBtn = document.getElementById("installBubble");
+
+pwinterBtn.addEventListener("click", () => {
+  navigator.install("https://diek.us/pwinter/index.html?randomize=true",
+                    "https://diek.us/pwinter/")
+});
+
+pwampBtn.addEventListener("click", () => {
+  navigator.install("https://microsoftedge.github.io/Demos/pwamp/",
+                    "https://microsoftedge.github.io/Demos/pwamp/")
+});
+
+bubbleBtn.addEventListener("click", () => {
+  navigator.install("https://diek.us/bubble/index.html",
+                    "https://diek.us/bubble/")
+});
diff --git a/pwa-pwastore/index.html b/pwa-pwastore/index.html
@@ -13,7 +13,7 @@
     <link rel="stylesheet" href="styles/pwastore-light.css" media="(prefers-color-scheme: light)"/>
     <meta name="theme-color" content="#FFF5E0" media="(prefers-color-scheme: light)"/>
     <meta name="theme-color" content="#3D3D3D" media="(prefers-color-scheme: dark)"/>
-    
+
 </head>
 <body>
     <div class="draggable"></div>
@@ -31,36 +31,37 @@
             <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>
-            <button class="btn_install">Install</button>
+            <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>
-            <button class="btn_install">Install</button>
+            <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>
-            <button class="btn_install">Install</button>
+            <button id="installBubble" class="btn_install">Install</button>
         </article>
 
     </main>
     <footer>
         &copy; Microsoft Edge
     </footer>
-    
+
     <template>
         <article class="app_entry">
             <img src="" width="75" height="75" class="app_icon">
             <h2>Title</h2>
             <p class="app_descrip">Equirectangular picture viewer.</p>
             <button class="btn_install">Install</button>
-        </article>        
+        </article>
     </template>
 
+    <script type="module" src="app.js"></script>
 </body>
 </html>
