doc: add more help for the notifications

README.md

@@ -117,6 +117,8 @@ To add an icon, add to main.ts and reference with `fa` element and `icon` attrib
 * Unregister service worker. (in Chrome, go to `chrome://serviceworker-internals/`; in Firefox, go to `about:serviceworkers`.)
 * Clear Cache Storage. (in Chrome, in dev tools under Application; in Firefox, in dev tools under Storage.)
 
+(If you find more, add them to the HelpNotificationsView.vue file.)
+
 
 
 

project.task.yaml

@@ -46,7 +46,7 @@ tasks:
   blocks: ref:https://raw.githubusercontent.com/trentlarson/lives-of-gifts/master/project.yaml#kickstarter%20for%20time
 
 - make identicons for contacts into more-memorable faces (and maybe change project identicons, too)
-- 04 split out notification logic & tests from web-push-subscription logic & tests
+- 02 watch for the service worker activation before showing the button to turn on notifications
 - 01 server - show all claim details when issued by the issuer
 - bug - got error adding on Firefox user #0 as contact for themselves
 - bug - back-and-forth on discovery & project pages led to "You need an identity to load your projects." error on product page when I had an identity

src/App.vue

@@ -329,10 +329,7 @@ export default class App extends Vue {
       }
     } catch (error) {
       if (window.location.host.startsWith("localhost")) {
-        console.log(
+        console.log("Ignoring the error getting VAPID for local development.");
-          "Ignoring this error getting VAPID for local development:",
-          error,
-        );
       } else {
         console.error("Got an error initializing notifications:", error);
         this.$notify(
@@ -424,7 +421,7 @@ export default class App extends Vue {
     });
   }
 
-  async turnOnNotifications() {
+  public async turnOnNotifications() {
     return this.askPermission()
       .then((permission) => {
         console.log("Permission granted:", permission);

src/db/index.ts

@@ -2,7 +2,7 @@ import BaseDexie, { Table } from "dexie";
 import { encrypted, Encryption } from "@pvermeer/dexie-encrypted-addon";
 import { Account, AccountsSchema } from "./tables/accounts";
 import { Contact, ContactSchema } from "./tables/contacts";
-import { Log, LogSchema } from "@/db/tables/logs";
+import { Log, LogSchema } from "./tables/logs";
 import {
   MASTER_SETTINGS_KEY,
   Settings,

src/main.ts

@@ -13,6 +13,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import {
   faArrowLeft,
   faArrowRight,
+  faArrowUpRightFromSquare,
   faBan,
   faBitcoinSign,
   faBurst,
@@ -65,6 +66,7 @@ import {
 library.add(
   faArrowLeft,
   faArrowRight,
+  faArrowUpRightFromSquare,
   faBan,
   faBitcoinSign,
   faBurst,

src/views/AccountViewView.vue

@@ -663,8 +663,8 @@ export default class AccountViewView extends Vue {
         {
           group: "modal",
           type: "notification-permission",
-          title: "", // unused, only here to satisfy types
+          title: "", // unused, only here to satisfy type check
-          text: "", // unused, only here to satisfy types
+          text: "", // unused, only here to satisfy type check
         },
         -1,
       );
@@ -673,8 +673,8 @@ export default class AccountViewView extends Vue {
         {
           group: "modal",
           type: "notification-off",
-          title: "", // unused, only here to satisfy types
+          title: "", // unused, only here to satisfy type check
-          text: "", // unused, only here to satisfy types
+          text: "", // unused, only here to satisfy type check
         },
         -1,
       );

src/views/HelpNotificationsView.vue

@@ -22,21 +22,89 @@
     </div>
 
     <div>
-      <p>Here are ways to get notifications working.</p>
+      <p>Here are ways to test notifications and get them working.</p>
 
-      <h2 class="text-xl font-semibold">Test</h2>
+      <h2 class="text-xl font-semibold">Full Test</h2>
-      <p>Somehow call the service-worker self.showNotification</p>
+      <div>
-      <button
+        <p>
-        @click="showTestNotification()"
+          If this works then you're all set.
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+          <button
-      >
+            @click="sendTestWebPushMessage()"
-        See a Test Notification
+            class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
-      </button>
+          >
+            Send Yourself a Test Web Push Message
+          </button>
+        </p>
+      </div>
 
-      <h2 class="text-xl font-semibold">Check OS-level permissions</h2>
+      <h2 class="text-xl font-semibold">If this app is not installed...</h2>
       <div>
-        Walk-throughs & screenshots, maybe for all combinations of OS &
+        <p>
-        browsers.
+          For best results, install this app on your device. In Chrome, it may
+          prompt you, and you can also look for the "Install" command in the
+          browser settings (as opposed to using it inside the broser app); on
+          the deskop, look for this icon in the address bar:
+          <img
+            src="../assets/help/chrome-install-pwa.png"
+            alt="Chrome 'install' icon"
+            class="ml-4"
+          />
+        </p>
+      </div>
+
+      <h2 class="text-xl font-semibold">
+        If "you must enable notifications"...
+      </h2>
+      <div>
+        <p>
+          Wait for about 10 seconds (for the service worker to activate), then
+          <button class="text-blue-500" @click="showNotificationChoice()">
+            click here.
+          </button>
+        </p>
+      </div>
+
+      <h2 class="text-xl font-semibold">Check App Permissions</h2>
+      <div>
+        <p>
+          In Apple iOS, check "Settings" -> "Notifications", look for the Time
+          Safari app (or the browser you're using), and make sure notifications
+          are enabled.
+        </p>
+        <p>
+          In Android, hold on to the app icon, then select "App Info", then
+          "Notifications" and make sure they're enabled. If you installed the
+          app with Chrome, go to Chrome "App Info", then "Storage & Cache" and
+          "Clear Storage"; this Chrome reset helps even if the app isn't run
+          inside the Chrome browser.
+        </p>
+        <p>
+          On a Mac, go to "Settings" and check "Notifications".
+          <img
+            src="../assets/help/mac-installed-app-settings.png"
+            alt="Mac app settings"
+            class="ml-4"
+          />
+        </p>
+      </div>
+
+      <h2 class="text-xl font-semibold">Check Browser Permissions</h2>
+      <div>
+        <p>In Apple iOS, check Settings -> Notifications.</p>
+        <p>In Android, check Settings -> Notifications.</p>
+
+        You can find more details about compatibility
+        <a
+          href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API#browser_compatibility"
+          class="text-blue-500"
+          target="_blank"
+        >
+          here <fa icon="arrow-up-right-from-square" class="fa-fw" />
+        </a>
+      </div>
+
+      <h2 class="text-xl font-semibold">Check OS Permissions</h2>
+      <div class="px-2">
         <div>
           <h3 class="text-lg font-semibold">Mobile Phone - Apple iOS</h3>
           <div>
@@ -45,49 +113,89 @@
           </div>
 
           <h3 class="text-lg font-semibold">Mobile Phone - Google Android</h3>
-          <div>See the browser section.</div>
+          <div>
+            We recommend Chrome. It must be version 42 or higher. Check your
+            version under Settings -> About Chrome.
+          </div>
 
           <h3 class="text-lg font-semibold">Desktop - Mac</h3>
-          <div>Requires Mac OS 13.</div>
-        </div>
-      </div>
-
-      <h2 class="text-xl font-semibold">Check browser-level permissions</h2>
-      <p>Walk-throughs & screenshots for browser settings</p>
-      <div>
-        <div>
-          <h3 class="text-lg font-semibold">Mobile Phone - Apple iOS</h3>
-          <div>Make sure your OS (above) supports it.</div>
-
-          <h3 class="text-lg font-semibold">Mobile Phone - Android</h3>
           <div>
-            Chrome requires version 50. Hold icon, select "App info", and enable
+            <span>
-            notifications.
+              Requires Mac OS 13; see your macOS version under Apple -> About
+              This Mac.
+            </span>
           </div>
+
+          <h3 class="text-lg font-semibold">Windows desktop</h3>
+          In Windows, check Settings -> Notifications.
+          <img
+            src="../assets/help/windows-system-enable-notifications.png"
+            alt="Windows system settings"
+            class="ml-4"
+          />
+        </div>
+        <div>
+          You can find more details about compatibility
+          <a
+            href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API#browser_compatibility"
+            class="text-blue-500"
+            target="_blank"
+          >
+            here <fa icon="arrow-up-right-from-square" class="fa-fw" />
+          </a>
         </div>
       </div>
 
-      <h2 class="text-xl font-semibold">Explain full reset to start again</h2>
+      <h2 class="text-xl font-semibold">Reinstall</h2>
-      <p>
+      <div>
-        Walk-throughs for clearing everything & subscribing anew to get a
+        <p>
-        message
+          If all else fails, uninstall the app, ensure all the browser tabs with
-      </p>
+          it are closed, and clear out caches and storage.
+        </p>
+        <ul class="ml-4 list-disc">
+          <li>
+            Clear cache for site. (In Chrome, go to `chrome://settings/cookies`
+            and "all site data and permissions"; in Firefox, go to
+            `about:preferences` and search for "cache" then "Manage Data", and
+            also manually remove the IndexedDB data if the DBs still show.)
+          </li>
+          <li>
+            Clear notification permission. (in Chrome, go to
+            `chrome://settings/content/notifications`; in Firefox, go to
+            `about:preferences` and search for "notifications".)
+          </li>
+          <li>
+            Unregister service worker. (in Chrome, go to
+            `chrome://serviceworker-internals/`; in Firefox, go to
+            `about:serviceworkers`.)
+          </li>
+          <li>
+            Clear Cache Storage. (in Chrome, in dev tools under Application; in
+            Firefox, in dev tools under Storage.)
+          </li>
+        </ul>
+        <p>Then reinstall the app.</p>
+      </div>
 
-      <h2 class="text-xl font-semibold">Auto-detection</h2>
+      <button
-      <p>Show results of auto-detection whether they're turned on</p>
+        @click="showTestNotification()"
+        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+      >
+        Send Test Notification Directly to Device
+      </button>
 
       <button
         @click="alertWebPushSubscription()"
         class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
       >
-        Show Subscription from Web Push Server
+        Show Web Push Subscription Info
       </button>
 
       <button
         @click="sendTestWebPushMessage()"
         class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
       >
-        Send Myself a Test Web Push Message
+        Send Yourself a Test Web Push Message
       </button>
     </div>
   </section>
@@ -249,5 +357,17 @@ export default class HelpNotificationsView extends Vue {
         );
       });
   }
+
+  showNotificationChoice() {
+    this.$notify(
+      {
+        group: "modal",
+        type: "notification-permission",
+        title: "", // unused, only here to satisfy type check
+        text: "", // unused, only here to satisfy type check
+      },
+      -1,
+    );
+  }
 }
 </script>

src/views/ProjectViewView.vue

@@ -48,6 +48,7 @@
                   target="_blank"
                   class="underline"
                   >Map View
+                  <fa icon="arrow-up-right-from-square" class="fa-fw" />
                 </a>
               </div>
               <div v-if="url">

sw_scripts/additional-scripts.js

@@ -56,8 +56,7 @@ self.addEventListener("push", function (event) {
           title = "Direct Message";
           message = payload.message || "No details were provided.";
         } else {
-          title =
+          title = payload && payload.title ? payload.title : "Note";
-            payload && payload.title ? payload.title : "Unknown Notification";
           message = await self.getNotificationCount();
         }
         if (message) {