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

<template>
  <QuickNav />

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24">
    <!-- 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">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">If this app is not installed...</h2>
      <div>
        <p>
          For best results on mobile, install this app on your device (as
          opposed to using it inside the broser app). In Chrome, it may prompt
          you, and you can also look for the "Install" command in the browser
          settings; on the 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 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". Also 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">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>
            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>
              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">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>
        <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>

      <button
        @click="showTestNotification()"
        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
      >
        Send Test Notification Directly to Device (Not Through Push Server)
      </button>

      <button
        @click="alertWebPushSubscription()"
        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
      >
        Show Web Push Subscription Info
      </button>

      <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>

      <button
        @click="sendTestWebPushMessage()"
        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 and Client
        Filter)
      </button>
    </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",
          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>