Implement A2HS functionality

core/static/manifest.webmanifest

@@ -0,0 +1,15 @@
+{
+    "background_color": "white",
+    "description": "Search for anything.",
+    "display": "fullscreen",
+    "icons": [
+      {
+        "src": "/static/logo.png",
+        "sizes": "800x800",
+        "type": "image/png"
+      }
+    ],
+    "name": "Pathogen Data Analytics",
+    "short_name": "Pathogen",
+    "start_url": "/"
+  }

core/templates/base.html

@@ -8,6 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Pathogen - {{ request.path_info }}</title>
     <link rel="shortcut icon" href="{%  static 'favicon.ico' %}">
+    <link rel="manifest" href="{% static 'manifest.webmanifest' %}">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@creativebulma/bulma-tooltip@1.2.0/dist/bulma-tooltip.min.css">
     <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css">
@@ -121,6 +122,9 @@
               </a>
             {% endif %}
           {% endif %}
+          <a class="navbar-item add-button">
+            Install
+          </a>
         </div>
     
         <div class="navbar-end">
@@ -145,6 +149,35 @@
         </div>
       </div>
     </nav>
+    <script>
+      let deferredPrompt;
+      const addBtn = document.querySelector('.add-button');
+      addBtn.style.display = 'none';
+      window.addEventListener('beforeinstallprompt', (e) => {
+        // Prevent Chrome 67 and earlier from automatically showing the prompt
+        e.preventDefault();
+        // Stash the event so it can be triggered later.
+        deferredPrompt = e;
+        // Update UI to notify the user they can add to home screen
+        addBtn.style.display = 'block';
+
+        addBtn.addEventListener('click', (e) => {
+          // hide our user interface that shows our A2HS button
+          addBtn.style.display = 'none';
+          // Show the prompt
+          deferredPrompt.prompt();
+          // Wait for the user to respond to the prompt
+          deferredPrompt.userChoice.then((choiceResult) => {
+              if (choiceResult.outcome === 'accepted') {
+                console.log('User accepted the A2HS prompt');
+              } else {
+                console.log('User dismissed the A2HS prompt');
+              }
+              deferredPrompt = null;
+            });
+        });
+      });
+    </script>
     <section class="section">
       <div class="container">
         {% block content %}