add notification check with instructions on front screen

package-lock.json

@@ -50,6 +50,7 @@
         "reflect-metadata": "^0.1.13",
         "register-service-worker": "^1.7.2",
         "three": "^0.156.1",
+        "ua-parser-js": "^1.0.37",
         "util": "^0.12.5",
         "vue": "^3.3.4",
         "vue-axios": "^3.5.2",
@@ -62,6 +63,7 @@
         "@types/leaflet": "^1.9.4",
         "@types/ramda": "^0.29.3",
         "@types/three": "^0.155.1",
+        "@types/ua-parser-js": "^0.7.39",
         "@typescript-eslint/eslint-plugin": "^6.6.0",
         "@typescript-eslint/parser": "^6.6.0",
         "@vue-leaflet/vue-leaflet": "^0.10.1",
@@ -8975,6 +8977,12 @@
       "integrity": "sha512-IDaobHimLQhjwsQ/NMwRVfa/yL7L/wriQPMhw1ZJall0KX6E1oxk29XMDeilW5qTIg5aoiqf5Udy8U/51aNoQQ==",
       "dev": true
     },
+    "node_modules/@types/ua-parser-js": {
+      "version": "0.7.39",
+      "resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.39.tgz",
+      "integrity": "sha512-P/oDfpofrdtF5xw433SPALpdSchtJmY7nsJItf8h3KXqOslkbySh8zq4dSWXH2oTjRvJ5PczVEoCZPow6GicLg==",
+      "dev": true
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.18",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.18.tgz",
@@ -26834,9 +26842,9 @@
       }
     },
     "node_modules/ua-parser-js": {
-      "version": "1.0.36",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.36.tgz",
-      "integrity": "sha512-znuyCIXzl8ciS3+y3fHJI/2OhQIXbXw9MWC/o3qwyR+RGppjZHrM27CGFSKCJXi2Kctiz537iOu2KnXs1lMQhw==",
+      "version": "1.0.37",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz",
+      "integrity": "sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -26851,8 +26859,6 @@
           "url": "https://github.com/sponsors/faisalman"
         }
       ],
-      "optional": true,
-      "peer": true,
       "engines": {
         "node": "*"
       }

package.json

@@ -50,6 +50,7 @@
     "reflect-metadata": "^0.1.13",
     "register-service-worker": "^1.7.2",
     "three": "^0.156.1",
+    "ua-parser-js": "^1.0.37",
     "util": "^0.12.5",
     "vue": "^3.3.4",
     "vue-axios": "^3.5.2",
@@ -62,6 +63,7 @@
     "@types/leaflet": "^1.9.4",
     "@types/ramda": "^0.29.3",
     "@types/three": "^0.155.1",
+    "@types/ua-parser-js": "^0.7.39",
     "@typescript-eslint/eslint-plugin": "^6.6.0",
     "@typescript-eslint/parser": "^6.6.0",
     "@vue-leaflet/vue-leaflet": "^0.10.1",

src/assets/help/apple-share-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50">
+  <path d="M30.3 13.7L25 8.4l-5.3 5.3-1.4-1.4L25 5.6l6.7 6.7z"/><path d="M24 7h2v21h-2z"/><path d="M35 40H15c-1.7 0-3-1.3-3-3V19c0-1.7 1.3-3 3-3h7v2h-7c-.6 0-1 .4-1 1v18c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V19c0-.6-.4-1-1-1h-7v-2h7c1.7 0 3 1.3 3 3v18c0 1.7-1.3 3-3 3z"/>
+</svg>

src/main.ts

@@ -56,6 +56,7 @@ import {
   faSpinner,
   faSquareCaretDown,
   faSquareCaretUp,
+  faSquarePlus,
   faTrashCan,
   faTriangleExclamation,
   faUser,
@@ -109,6 +110,7 @@ library.add(
   faSpinner,
   faSquareCaretDown,
   faSquareCaretUp,
+  faSquarePlus,
   faTrashCan,
   faTriangleExclamation,
   faUser,

src/views/HelpNotificationsView.vue

@@ -21,6 +21,7 @@
       </h1>
     </div>
 
+    <!-- eslint-disable prettier/prettier -->
     <div>
       <p>Here are ways to test notifications and get them working.</p>
 
@@ -39,13 +40,13 @@
       </div>
 
       <h2 class="text-xl font-semibold mt-4">
-        If this is not installed as an app...
+        If this app doesn't support notifications...
         <!-- Note that that exact verbiage shows in a message elsewhere. -->
       </h2>
       <div>
         <p>
-          For best results on mobile, install this app on your device (as
-          opposed to using it inside the browser app). In Chrome, it may prompt
+          To be notified of interesting updates, install this app on your device
+          (as opposed to using it inside the browser app). In Chrome, it may prompt
           you, and you can also look for the "Install" command in the browser
           settings; on the the desktop, look for this icon in the address bar:
           <img
@@ -286,6 +287,7 @@
         for ways to contact us.
       </p>
     </div>
+    <!-- eslint-enable -->
   </section>
 </template>
 <script lang="ts">

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() {