crowd-funder-for-time-pwa/src/views/HelpNotificationsView.vue

<template>
  <QuickNav />

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <!-- Breadcrumb -->
    <div class="mb-8">
      <!-- Back -->
      <div class="text-lg text-center font-light relative px-7">
        <h1
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="$router.back()"
        >
          <fa icon="chevron-left" class="fa-fw"></fa>
        </h1>
      </div>

      <!-- Heading -->
      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
        Notification Help
      </h1>
    </div>

    <div>
      <p>Here are ways to test notifications and get them working.</p>

      <h2 class="text-xl font-semibold mt-4">Full Test</h2>
      <div>
        <p>
          If this works then you're all set.
          <button
            @click="sendTestWebPushMessage(true)"
            class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
          >
            Send Yourself a Test Web Push Message (Through Push Server but
            Skipping Client Filter)
          </button>
        </p>
      </div>

      <h2 class="text-xl font-semibold mt-4">
        If this is not installed as an app...
        <!-- 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
          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
            src="../assets/help/chrome-install-pwa.png"
            alt="Chrome 'install' icon"
            class="ml-4"
          />
        </p>
      </div>

      <h2 class="text-xl font-semibold mt-4">
        If you must enable notifications...
        <!-- Note that that exact verbiage shows in a message elsewhere. -->
      </h2>
      <div>
        <p>
          <button class="text-blue-500" @click="showNotificationChoice()">
            Click here.
          </button>
        </p>
      </div>

      <h2 class="text-xl font-semibold mt-4">
        If you're waiting for system initialization...
        <!-- Note that that exact verbiage shows in a message elsewhere. -->
      </h2>
      <div>
        <p>
          ... and it never stops, then there is a problem with the underlying
          service worker or push server mechanism in your browser. Your best bet
          is to follow the "Reinstall" steps below or use a different browser.
        </p>
      </div>

      <h2 class="text-xl font-semibold mt-4">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 it's still a problem
          then go further:
        </p>
        <p>
          If you installed the app with Chrome, make sure there are no other
          tabs with it open. Here are some ways to clear caches that can mess
          things up (and note that this clears out data from the installed app
          -- which is good to do while the app is installed):
        </p>
        <ul>
          <li class="list-disc ml-4">
            Go to Chrome "App Info", then "Storage & Cache" and "Clear Storage".
          </li>
          <li class="list-disc ml-4">
            Go to Chrome "Settings", then "Privacy and Security" and "Clear
            "Clear browsing data", then "Cookies and site data". Make sure the
            "Time Range" at the top shows "All time".
          </li>
        </ul>
        <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 mt-4">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 mt-4">
        Check Operating System (OS) Permissions
      </h2>
      <div class="px-2">
        <div>
          <h3 class="text-lg font-semibold">Mobile Phone - Apple iOS</h3>
          <div>
            Notifications require iOS 16.4 or higher. To check your iOS version,
            go to Settings > General > About > Software Version.
          </div>

          <h3 class="text-lg font-semibold">Mobile Phone - Google Android</h3>
          <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>
            <span>
              See "System Settings" -> "Notifications" and make sure it is
              enabled for the browser you're using. Note that these
              notifications require Mac OS 13; see your macOS version under
              Apple -> "About This Mac".
            </span>
          </div>

          <h3 class="text-lg font-semibold">Desktop - Windows</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 mt-4">Reinstall</h2>
      <div>
        <p>
          If all else fails, uninstall the app, ensure all the browser tabs with
          it are closed, and clear out caches and storage.
        </p>
        <p>
          Of course, you'll want to back up all your data first -- all seeds as
          well as the contacts & settings -- on the Account
          <fa icon="circle-user" /> page.
        </p>
        <ul class="ml-4 list-disc">
          <li>
            Clear cache.
            <ul>
              <li>
                In mobile, look for the browser app settings. This is true even
                for an installed app: go to the browser which you used to
                initially visit timesafari.app, because those settings affect
                the app. Look for "Delete browsing data" in the "Settings",
                under "Privacy and Security".
              </li>
              <li>
                In Chrome, go to `chrome://settings/cookies` and "all site data
                and permissions" for timesafari.app; in Firefox, go to
                `about:preferences` and search for "cache" then "Manage Data"
                for timesafari.app. Also manually remove the IndexedDB data if
                the DBs still show.)
              </li>
            </ul>
          </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 mt-4">Tests</h2>
      <button
        @click="showTestNotification()"
        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mt-4 mb-2"
      >
        Send Test Notification Directly to Device (Not Through Push Server)
      </button>
      <p>
        If that didn't show a notification on your device, the problem is that
        your browser or your operating system are not allowing notifications
        through. See "Check App Permissions" and "Check Browser Permissions" and
        "Check Operating System (OS) Permissions" above.
      </p>

      <button
        @click="alertWebPushSubscription()"
        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mt-4 mb-2"
      >
        Show Web Push Subscription Info
      </button>
      <p>
        If that showed "null" then the notification is not active.
        <button class="text-blue-500" @click="showNotificationChoice()">
          Click here.
        </button>
      </p>

      <button
        @click="sendTestWebPushMessage(true)"
        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mt-4 mb-2"
      >
        Send Yourself a Test Web Push Message (Through Push Server but Skipping
        Client Filter)
      </button>
      <p>
        If that didn't show a notification on your device, there is a problem
        getting to the push server. Disable notifications and then enable them
        again.
      </p>

      <button
        @click="sendTestWebPushMessage()"
        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mt-4 mb-2"
      >
        Send Yourself a Test Web Push Message (Through Push Server and Client
        Filter)
      </button>
      <p>
        If you don't see a message, it could be that there is nothing new for
        you to see. If the previous test worked, then things should work fine.
        If you notice a full 24 hours where you get no notification and you know
        that there are new items that should show, gather as many details as
        possible and go to the bottom of
        <router-link to="help" class="text-blue-500"> this page </router-link>
        for ways to contact us.
      </p>
    </div>
  </section>
</template>
<script lang="ts">
import axios from "axios";
import { Component, Vue } from "vue-facing-decorator";

import QuickNav from "@/components/QuickNav.vue";
import { db } from "@/db/index";
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
import { DEFAULT_PUSH_SERVER } from "@/constants/app";

// eslint-disable-next-line @typescript-eslint/no-var-requires
const Buffer = require("buffer/").Buffer;

interface Notification {
  group: string;
  type: string;
  title: string;
  text: string;
}

@Component({ components: { QuickNav } })
export default class HelpNotificationsView extends Vue {
  $notify!: (notification: Notification, timeout?: number) => void;

  subscription: PushSubscription | null = null;

  async mounted() {
    try {
      const registration = await navigator.serviceWorker.ready;
      this.subscription = await registration.pushManager.getSubscription();
    } catch (error) {
      console.error("Mount error:", error);
    }
  }

  alertWebPushSubscription() {
    console.log(
      "Web push subscription:",
      JSON.parse(JSON.stringify(this.subscription)), // gives more info than plain console logging
    );
    alert(JSON.stringify(this.subscription));
  }

  async sendTestWebPushMessage(skipFilter: boolean = false) {
    if (!this.subscription) {
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Not Subscribed",
          // Note that this exact verbiage shows in help text.
          text: "You must enable notifications before testing the web push.",
        },
        -1,
      );
      return;
    }

    try {
      await db.open();
      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
      let pushUrl: string = DEFAULT_PUSH_SERVER as string;
      if (settings?.webPushServer) {
        pushUrl = settings.webPushServer;
      }

      // This is a special value that tells the service worker to send a direct notification to the device, skipping filters.
      // This is shared with the service worker and should be a constant. Look for the same name in additional-scripts.js
      // Use something other than "Daily Update" https://gitea.anomalistdesign.com/trent_larson/py-push-server/src/commit/3c0e196c11bc98060ec5934e99e7dbd591b5da4d/app.py#L213
      const DIRECT_PUSH_TITLE = "DIRECT_NOTIFICATION";

      const auth = Buffer.from(this.subscription.getKey("auth"));
      const authB64 = auth
        .toString("base64")
        .replace(/\+/g, "-")
        .replace(/\//g, "_")
        .replace(/=+$/, "");
      const p256dh = Buffer.from(this.subscription.getKey("p256dh"));
      const p256dhB64 = p256dh
        .toString("base64")
        .replace(/\+/g, "-")
        .replace(/\//g, "_")
        .replace(/=+$/, "");
      const newPayload = {
        endpoint: this.subscription.endpoint,
        keys: {
          auth: authB64,
          p256dh: p256dhB64,
        },
        message: `Test, where you will see this message ${
          skipFilter ? "un" : ""
        }filtered.`,
        title: skipFilter ? DIRECT_PUSH_TITLE : "Your Web Push",
      };
      console.log("Sending a test web push message:", newPayload);
      const payloadStr = JSON.stringify(newPayload);
      const response = await axios.post(
        pushUrl + "/web-push/send-test",
        payloadStr,
        {
          headers: {
            "Content-Type": "application/json",
          },
        },
      );

      console.log("Got response from web push server:", response);

      this.$notify(
        {
          group: "alert",
          type: "success",
          title: "Test Web Push Sent",
          text: "Check your device for the test web push message, depending on the filtering you chose.",
        },
        -1,
      );
    } catch (error) {
      console.error("Got an error sending test notification:", error);
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error Sending Test",
          text: "Got an error sending the test web push notification.",
        },
        -1,
      );
    }
  }

  showTestNotification() {
    const TEST_NOTIFICATION_TITLE = "It Worked";
    navigator.serviceWorker.ready
      .then((registration) => {
        return registration.showNotification(TEST_NOTIFICATION_TITLE, {
          body: "This is your test notification.",
        });
      })
      .then(() => {
        this.$notify(
          {
            group: "alert",
            type: "success",
            title: "Sent",
            text: `A notification was triggered, so one should show on your device entitled '${TEST_NOTIFICATION_TITLE}'.`,
          },
          5000,
        );
      })
      .catch((error) => {
        console.error("Got a notification error:", error);
        this.$notify(
          {
            group: "alert",
            type: "danger",
            title: "Failed",
            text: "Got an error sending a notification.",
          },
          -1,
        );
      });
  }

  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>