Add install app button.

views/css/home.css

@@ -13,6 +13,12 @@
     right: 15px;
 }
 
+#installPwa{
+    position: absolute;
+    top: 65px;
+    right: 15px;
+}
+
 #workoutList{
     display: flex;
     flex-direction: column;

views/index.html

@@ -99,6 +99,7 @@
 
     <div id="homePage" class="page" style="display:none">
         <button id="homeNewWorkout" class="button">+ Workout</button>
+        <button id="installPwa" class="button">Install App</button>
 
         <h1>My Workouts</h1>
 

views/index.js

@@ -40,7 +40,32 @@ window.changePage = (page, data)=>{
 if("serviceWorker" in navigator){
     window.addEventListener("load", ()=>{
         navigator.serviceWorker.register("/serviceWorker.js")
-            .then(reg => console.log("Service worker registered:", reg))
-            .catch(err => console.error("Service worker registration failed:", err));
+            .then(reg => null)
+            .catch(err => null);
     });
 }
+
+let deferredPrompt;
+const installBtn = document.getElementById("installPwa");
+let isPwaInstalled = ()=>{
+    return window.matchMedia("(display-mode: standalone)").matches || window.navigator.standalone === true;
+}
+
+if(isPwaInstalled()){
+    installBtn.style.display = "none";
+}
+
+window.addEventListener("beforeinstallprompt", (e)=>{
+    e.preventDefault();
+    deferredPrompt = e;
+});
+
+installBtn.addEventListener("click", async ()=>{
+    if(deferredPrompt){
+        deferredPrompt.prompt();
+        const {outcome} = await deferredPrompt.userChoice;
+        deferredPrompt = null;
+        console.log(outcome); //accepted
+        if(outcome === "accepted") installBtn.style.display = "none";
+    }
+});

views/manifest.json

@@ -1,5 +1,5 @@
 {
-    "name": "Workout-Tracker",
+    "name": "Workout Tracker",
     "short_name": "Workout",
     "start_url": "/",
     "display": "standalone",