Push Notifications

Your Backend sends push message (with VAPID auth)
    ↓
Browser receives → wakes Service Worker
    ↓
SW fires 'push' event
    ↓
SW shows notification via Notifications API
    ↓
User clicks → SW handles 'notificationclick'
    ↓
Open or focus the app, navigate to relevant page

swoff/
├── push.js             ← [NEW] Subscription management
├── sw-template.js      ← Add push + notificationclick handlers

const SUBSCRIPTION_DB = "swoff-push";
const SUBSCRIPTION_STORE = "subscription";

let permissionState = Notification.permission;

function openPushDB() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open(SUBSCRIPTION_DB, 1);
    request.onupgradeneeded = (e) => {
      const db = e.target.result;
      if (!db.objectStoreNames.contains(SUBSCRIPTION_STORE)) {
        db.createObjectStore(SUBSCRIPTION_STORE, { keyPath: "id" });
      }
    };
    request.onsuccess = (e) => resolve(e.target.result);
    request.onerror = (e) => reject(e.target.error);
  });
}

/**
 * Request notification permission from the user.
 * @returns {Promise<boolean>} Whether permission was granted
 */
export async function requestNotificationPermission() {
  if (permissionState === "granted") return true;
  if (permissionState === "denied") return false;

  const result = await Notification.requestPermission();
  permissionState = result;
  window.dispatchEvent(
    new CustomEvent("push-permission-changed", { detail: { permission: result } }),
  );
  return result === "granted";
}

/**
 * Get the current push subscription if one exists.
 * @returns {Promise<PushSubscription|null>}
 */
export async function getPushSubscription() {
  try {
    const registration = await navigator.serviceWorker.ready;
    return await registration.pushManager.getSubscription();
  } catch {
    return null;
  }
}

/**
 * Subscribe to push notifications.
 * @param {string} vapidPublicKey - Your backend's VAPID public key
 * @returns {Promise<PushSubscription|null>}
 */
export async function subscribeToPush(vapidPublicKey) {
  const granted = await requestNotificationPermission();
  if (!granted) return null;

  const registration = await navigator.serviceWorker.ready;

  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(vapidPublicKey),
  });

  // Persist subscription locally
  const db = await openPushDB();
  const tx = db.transaction(SUBSCRIPTION_STORE, "readwrite");
  tx.objectStore(SUBSCRIPTION_STORE).put({
    id: "current",
    endpoint: subscription.endpoint,
    keys: subscription.toJSON().keys,
    subscribedAt: Date.now(),
  });
  await new Promise((resolve, reject) => {
    tx.oncomplete = () => resolve();
    tx.onerror = () => reject(tx.error);
  });

  window.dispatchEvent(
    new CustomEvent("push-subscription-changed", { detail: { subscribed: true } }),
  );

  return subscription;
}

/**
 * Unsubscribe from push notifications.
 */
export async function unsubscribeFromPush() {
  const subscription = await getPushSubscription();
  if (!subscription) return;

  await subscription.unsubscribe();

  const db = await openPushDB();
  const tx = db.transaction(SUBSCRIPTION_STORE, "readwrite");
  tx.objectStore(SUBSCRIPTION_STORE).delete("current");
  await new Promise((resolve, reject) => {
    tx.oncomplete = () => resolve();
    tx.onerror = () => reject(tx.error);
  });

  window.dispatchEvent(
    new CustomEvent("push-subscription-changed", { detail: { subscribed: false } }),
  );
}

/**
 * Check whether the user is subscribed to push notifications.
 * @returns {Promise<boolean>}
 */
export async function isSubscribed() {
  const sub = await getPushSubscription();
  return sub !== null;
}

/**
 * Convert a base64-encoded VAPID public key to a Uint8Array.
 * Required by pushManager.subscribe().
 */
function urlBase64ToUint8Array(base64String) {
  const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
  const rawData = atob(base64);
  return Uint8Array.from(rawData.split("").map((c) => c.charCodeAt(0)));
}

import { subscribeToPush } from "./swoff/push.js";

async function enablePushNotifications(vapidPublicKey) {
  const subscription = await subscribeToPush(vapidPublicKey);
  if (!subscription) return;

  // Send subscription to YOUR backend (Go, Node.js, Python, etc.)
  await fetch("/api/push/subscribe", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(subscription.toJSON()),
  });
}

import { unsubscribeFromPush, getPushSubscription } from "./swoff/push.js";

async function disablePushNotifications() {
  const subscription = await getPushSubscription();
  if (!subscription) return;

  const json = subscription.toJSON();

  // Tell your backend to stop sending
  await fetch("/api/push/unsubscribe", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ endpoint: json.endpoint }),
  });

  await unsubscribeFromPush();
}

// Push notification — receive and display
self.addEventListener("push", (event) => {
  let data;

  try {
    data = event.data ? event.data.json() : {};
  } catch {
    data = { title: "New Update", body: event.data?.text() || "" };
  }

  const options = {
    body: data.body || "",
    icon: data.icon || "/icon-192.png",
    badge: data.badge || "/badge.png",
    image: data.image || undefined,
    vibrate: data.vibrate || [200, 100, 200],
    data: {
      url: data.url || "/",
      ...(data.data || {}),
    },
    actions: data.actions || [],
    tag: data.tag || undefined,
    requireInteraction: data.requireInteraction || false,
  };

  event.waitUntil(self.registration.showNotification(data.title || "Update", options));
});

// Notification click — open or focus the app
self.addEventListener("notificationclick", (event) => {
  event.notification.close();

  const url = event.notification.data?.url || "/";
  const action = event.action;

  event.waitUntil(
    (async () => {
      // If an action was clicked, handle it
      if (action) {
        // Your custom action handling here
        // e.g., "reply" → open chat, "dismiss" → do nothing
      }

      const clients = await self.clients.matchAll({ type: "window" });

      // Focus existing tab if found
      for (const client of clients) {
        const clientUrl = new URL(client.url);
        const targetUrl = new URL(url, self.location.origin);

        if (clientUrl.pathname === targetUrl.pathname && "focus" in client) {
          return client.focus();
        }
      }

      // Otherwise open new window
      if (clients.openWindow) {
        return clients.openWindow(url);
      }
    })(),
  );
});

# Example: generate keys with Node.js
# Your backend can use any language — Go, Python, Rust, etc.
npm install web-push
npx web-push generate-vapid-keys

Public Key:  BEr38w... (put this in your client code)
Private Key: EC19nW... (keep this on your server)

// Your client config
const VAPID_PUBLIC_KEY = "BEr38w...";

export function showLocalNotification(title, options = {}) {
  if (Notification.permission !== "granted") return;
  new Notification(title, {
    body: options.body || "",
    icon: "/icon-192.png",
    ...options,
  });
}

import { showLocalNotification } from "./swoff/push.js";

// Show notification when background sync completes
window.addEventListener("mutation-sync-complete", (event) => {
  const { succeeded, failed } = event.detail;
  const total = succeeded + failed;

  if (total === 0) return;

  const body = succeeded > 0
    ? `${succeeded} item${succeeded > 1 ? "s" : ""} synced successfully`
    : "Sync completed";

  if (failed > 0) {
    showLocalNotification("Sync completed with errors", {
      body: `${failed} item${failed > 1 ? "s" : ""} failed to sync`,
    });
  } else if (succeeded > 0) {
    showLocalNotification("Sync complete", { body });
  }
});

// Show notification when new SW version is available
window.addEventListener("sw-update-available", (event) => {
  showLocalNotification("Update available", {
    body: `Version ${event.detail.version} is ready to install`,
  });
});

import { useState, useEffect, useCallback } from "react";
import {
  requestNotificationPermission,
  subscribeToPush,
  unsubscribeFromPush,
  isSubscribed,
  getPushSubscription,
} from "../swoff/push.js";

export function usePushSubscription(vapidPublicKey) {
  const [permission, setPermission] = useState(Notification.permission);
  const [subscribed, setSubscribed] = useState(false);
  const [subscription, setSubscription] = useState(null);

  useEffect(() => {
    async function init() {
      setSubscribed(await isSubscribed());
      setSubscription(await getPushSubscription());
    }
    init();

    const onPermission = (e) => setPermission(e.detail.permission);
    const onSubscription = (e) => {
      setSubscribed(e.detail.subscribed);
      if (!e.detail.subscribed) setSubscription(null);
    };

    window.addEventListener("push-permission-changed", onPermission);
    window.addEventListener("push-subscription-changed", onSubscription);
    return () => {
      window.removeEventListener("push-permission-changed", onPermission);
      window.removeEventListener("push-subscription-changed", onSubscription);
    };
  }, []);

  const subscribe = useCallback(async () => {
    const sub = await subscribeToPush(vapidPublicKey);
    setSubscription(sub);
    return sub;
  }, [vapidPublicKey]);

  const unsubscribe = useCallback(async () => {
    await unsubscribeFromPush();
    setSubscription(null);
  }, []);

  return {
    permission,
    subscribed,
    subscription,
    subscribe,
    unsubscribe,
    isSupported: "serviceWorker" in navigator && "PushManager" in window,
  };
}

import { ref, onMounted, onUnmounted, computed } from "vue";
import {
  subscribeToPush,
  unsubscribeFromPush,
  isSubscribed,
  getPushSubscription,
} from "../swoff/push.js";

export function usePushSubscription(vapidPublicKey) {
  const permission = ref(Notification.permission);
  const subscribed = ref(false);
  const subscription = ref(null);
  const isSupported = computed(
    () => "serviceWorker" in navigator && "PushManager" in window,
  );

  async function init() {
    subscribed.value = await isSubscribed();
    subscription.value = await getPushSubscription();
  }

  onMounted(() => {
    init();
    window.addEventListener("push-permission-changed", (e) => {
      permission.value = e.detail.permission;
    });
    window.addEventListener("push-subscription-changed", async (e) => {
      subscribed.value = e.detail.subscribed;
      if (!e.detail.subscribed) subscription.value = null;
    });
  });

  onUnmounted(() => {
    window.removeEventListener("push-permission-changed", () => {});
    window.removeEventListener("push-subscription-changed", () => {});
  });

  async function subscribe() {
    const sub = await subscribeToPush(vapidPublicKey);
    subscription.value = sub;
    return sub;
  }

  async function unsubscribe() {
    await unsubscribeFromPush();
    subscription.value = null;
  }

  return { permission, subscribed, subscription, subscribe, unsubscribe, isSupported };
}