Customize install prompt behavior

client/index.html

@@ -44,6 +44,11 @@
                 <use xlink:href="#notifications" />
             </svg>
         </a>
+        <a href="#" id="install" class="icon-button" title="Add to Homescreen" hidden>
+            <svg class="icon">
+                <use xlink:href="#install" />
+            </svg>
+        </a>
     </header>
     <!-- Peers -->
     <x-peers class="center"></x-peers>
@@ -173,6 +178,11 @@
         <g id="notifications">
             <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z" />
         </g>
+        <g id="install">
+            <path fill="none" d="M0 0h24v24H0V0z" />
+            <path d="M18 1.01L8 1c-1.1 0-2 .9-2 2v3h2V5h10v14H8v-1H6v3c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM10 15h2V8H5v2h3.59L3 15.59 4.41 17 10 11.41z" />
+            <path fill="none" d="M0 0h24v24H0V0z" />
+        </g>
     </svg>
     <!-- Scripts -->
     <script src="scripts/network.js"></script>

client/scripts/ui.js

@@ -527,6 +527,17 @@ if ('serviceWorker' in navigator) {
     window.addEventListener('beforeinstallprompt', e => {
         if (window.matchMedia('(display-mode: standalone)').matches) {
             return event.preventDefault();
+        } else {
+            const deferredPrompt = e;
+            const btn = document.querySelector('#install')
+            btn.hidden = false;
+            btn.onclick = _ => {
+                deferredPrompt.prompt();
+                // Wait for the user to respond to the prompt
+                deferredPrompt.userChoice.then((resp) => {
+                    console.log(JSON.stringify(resp));
+                });
+            }
         }
     });
 }