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()"
            class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
          >
            Send Yourself a Test Web Push Message
          </button>
        </p>
      </div>

      <h2 class="text-xl font-semibold">If this app is not installed...</h2>
      <div>
        <p>
          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 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; then here are some ways to clear caches that can
          mess things up:
        </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 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 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 Yourself a Test Web Push Message
      </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() {
    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 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: "This is a test message, triggered by you.",
        title: DIRECT_PUSH_TITLE,
      };
      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.",
        },
        -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() {
    navigator.serviceWorker.ready
      .then((registration) => {
        return registration.showNotification("It Worked", {
          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 soon.",
          },
          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>