add notification check with instructions on front screen

src/views/HomeView.vue

@@ -8,25 +8,57 @@
       Time Safari
     </h1>
 
-    <!-- show the actions for recognizing a give -->
+    <!-- prompt to install notifications -->
     <div class="mb-8">
       <div
-        v-if="!isInstalled()"
+        v-if="!notificationsSupported()"
         class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
       >
-        <p>
-          This is not installed as an app.
+        <p style="display: inline; align-items: center">
+          This app doesn't support notifications, so let's fix that. <br />
           <!-- Note that that exact verbiage shows in the help. -->
-          Look for an "install" prompt or action.
-          <router-link
-            :to="{ name: 'help-notifications' }"
-            class="text-blue-500"
+
+          <span v-if="userAgentInfo.getOS().name === 'iOS'">
+            Tap on "Share"<img
+              src="../assets/help/apple-share-icon.svg"
+              alt="Apple 'share' icon"
+              width="30"
+              style="display: inline; margin: 0 5px; vertical-align: middle"
+            />and then "Add to Home Screen"
+            <fa icon="square-plus" title="Apple 'Add' icon" />
+            and go click on that new app.
+          </span>
+          <span
+            v-else-if="userAgentInfo.getBrowser().name.startsWith('Chrome')"
           >
-            Go here for more help.
-          </router-link>
+            You should see a prompt to install, or you can click on the
+            top-right dots
+            <fa
+              icon="ellipsis-vertical"
+              title="vertical ellipsis"
+              class="fa-fw"
+            />
+            and then "Install"<img
+              src="../assets/help/install-android-chrome.png"
+              alt="Android 'install' icon"
+              width="30"
+              style="display: inline; margin: 0 5px; vertical-align: middle"
+            />
+            and go use that app.
+          </span>
+          <span v-else>
+            Try
+            <a href="https://www.google.com/chrome/" class="text-blue-500"
+              >Google Chrome</a
+            >
+            instead.
+          </span>
         </p>
       </div>
+    </div>
 
+    <!-- show the actions for recognizing a give -->
+    <div class="mb-8">
       <div
         v-if="!activeDid"
         class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
@@ -159,6 +191,7 @@
 </template>
 
 <script lang="ts">
+import { UAParser } from "ua-parser-js";
 import { Component, Vue } from "vue-facing-decorator";
 
 import EntityIcon from "@/components/EntityIcon.vue";
@@ -207,6 +240,7 @@ export default class HomeView extends Vue {
   isHiddenSpinner = true;
   isRegistered = false;
   numAccounts = 0;
+  userAgentInfo = new UAParser(); // see https://docs.uaparser.js.org/v2/api/ua-parser-js/get-os.html
 
   async beforeCreate() {
     await accountsDB.open();
@@ -266,16 +300,8 @@ export default class HomeView extends Vue {
     }
   }
 
-  // from https://benborgers.com/posts/pwa-detect-installed
-  isInstalled() {
-    // For iOS
-    if ("standalone" in window.navigator) return true;
-
-    // For Android
-    if (window.matchMedia("(display-mode: standalone)").matches) return true;
-
-    // If neither is true, it's not installed
-    return false;
+  notificationsSupported() {
+    return "Notification" in window;
   }
 
   public async buildHeaders() {