@sinlungtech/push-client 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,125 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface PushSubscription {
+    endpoint: string;
+    keys: {
+        p256dh: string;
+        auth: string;
+    };
+}
+interface PushPayload {
+    title: string;
+    body: string;
+    data?: Record<string, unknown>;
+    icon?: string;
+    badge?: string;
+    tag?: string;
+}
+interface LiveNotificationsConfig {
+    /**
+     * Set false to disable live Ably notifications.
+     * Default: true
+     */
+    enabled?: boolean;
+    /**
+     * Optional explicit channel name. If omitted, the channel is derived from the
+     * chat JWT claims:
+     *   admin -> notifications:admin:{appId}
+     *   user  -> notifications:user:{sub}
+     */
+    channel?: string;
+    /**
+     * Event name to subscribe to. Default: 'notification'
+     */
+    eventName?: string;
+    /**
+     * Show browser Notification for live events when permission is granted.
+     * Default: true
+     */
+    showSystemNotification?: boolean;
+}
+interface PushProviderProps {
+    /** NEXT_PUBLIC_VAPID_PUBLIC_KEY — the public VAPID key (URL-safe base64) */
+    vapidKey: string;
+    /** Path to the service worker file, relative to public/. Default: '/sw.js' */
+    serviceWorkerPath?: string;
+    /**
+     * Called after a successful subscription.
+     * Use this to send the subscription to your server's /api/push/subscribe endpoint.
+     */
+    onSubscribe?: (subscription: PushSubscription) => Promise<void> | void;
+    /**
+     * Called after the subscription is removed.
+     * Use this to call DELETE /api/push/subscribe on your server.
+     */
+    onUnsubscribe?: (endpoint: string) => Promise<void> | void;
+    /**
+     * If onSubscribe/onUnsubscribe are not provided, PushProvider can wire itself
+     * directly to a chat server by using these options.
+     */
+    chatServerUrl?: string;
+    getToken?: () => Promise<string>;
+    subscriptionsEndpoint?: string;
+    /**
+     * Live notifications path (Ably subscribe).
+     */
+    live?: LiveNotificationsConfig;
+    /**
+     * Called whenever a live notification event is received.
+     */
+    onLiveNotification?: (payload: PushPayload) => void;
+    /**
+     * If true, requests notification permission and subscribes immediately on mount.
+     * If false (default), call subscribe() manually via usePush().
+     */
+    autoSubscribe?: boolean;
+    children: React.ReactNode;
+}
+
+interface PushContextValue {
+    /** Whether the browser supports Web Push */
+    isSupported: boolean;
+    /** Current Notification.permission value */
+    permission: NotificationPermission | 'default';
+    /** Whether the user is currently subscribed */
+    isSubscribed: boolean;
+    /** Request permission and subscribe */
+    subscribe: () => Promise<void>;
+    /** Unsubscribe and clean up */
+    unsubscribe: () => Promise<void>;
+    /** Any error that occurred during subscribe/unsubscribe */
+    error: Error | null;
+}
+/**
+ * PushProvider — wraps your app and manages Web Push subscription lifecycle.
+ *
+ * Usage in Next.js layout.tsx:
+ *
+ *   <PushProvider
+ *     vapidKey={process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!}
+ *     serviceWorkerPath="/sw.js"
+ *     onSubscribe={async (sub) => {
+ *       const token = await getIdToken();
+ *       await fetch('/api/push/subscribe', {
+ *         method: 'POST',
+ *         headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+ *         body: JSON.stringify(sub),
+ *       });
+ *     }}
+ *     onUnsubscribe={async (endpoint) => {
+ *       await fetch('/api/push/subscribe', { method: 'DELETE', body: JSON.stringify({ endpoint }) });
+ *     }}
+ *     autoSubscribe
+ *   >
+ *     {children}
+ *   </PushProvider>
+ *
+ * Then in any component:
+ *   const { isSubscribed, permission, subscribe, unsubscribe } = usePush();
+ */
+declare function PushProvider({ vapidKey, serviceWorkerPath, onSubscribe, onUnsubscribe, chatServerUrl, getToken, subscriptionsEndpoint, live, onLiveNotification, autoSubscribe, children, }: PushProviderProps): react_jsx_runtime.JSX.Element;
+declare function usePush(): PushContextValue;
+
+declare function urlBase64ToUint8Array(base64String: string): ArrayBuffer;
+
+export { type PushPayload, PushProvider, type PushProviderProps, type PushSubscription, urlBase64ToUint8Array, usePush };

package/dist/index.d.ts

@@ -0,0 +1,125 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface PushSubscription {
+    endpoint: string;
+    keys: {
+        p256dh: string;
+        auth: string;
+    };
+}
+interface PushPayload {
+    title: string;
+    body: string;
+    data?: Record<string, unknown>;
+    icon?: string;
+    badge?: string;
+    tag?: string;
+}
+interface LiveNotificationsConfig {
+    /**
+     * Set false to disable live Ably notifications.
+     * Default: true
+     */
+    enabled?: boolean;
+    /**
+     * Optional explicit channel name. If omitted, the channel is derived from the
+     * chat JWT claims:
+     *   admin -> notifications:admin:{appId}
+     *   user  -> notifications:user:{sub}
+     */
+    channel?: string;
+    /**
+     * Event name to subscribe to. Default: 'notification'
+     */
+    eventName?: string;
+    /**
+     * Show browser Notification for live events when permission is granted.
+     * Default: true
+     */
+    showSystemNotification?: boolean;
+}
+interface PushProviderProps {
+    /** NEXT_PUBLIC_VAPID_PUBLIC_KEY — the public VAPID key (URL-safe base64) */
+    vapidKey: string;
+    /** Path to the service worker file, relative to public/. Default: '/sw.js' */
+    serviceWorkerPath?: string;
+    /**
+     * Called after a successful subscription.
+     * Use this to send the subscription to your server's /api/push/subscribe endpoint.
+     */
+    onSubscribe?: (subscription: PushSubscription) => Promise<void> | void;
+    /**
+     * Called after the subscription is removed.
+     * Use this to call DELETE /api/push/subscribe on your server.
+     */
+    onUnsubscribe?: (endpoint: string) => Promise<void> | void;
+    /**
+     * If onSubscribe/onUnsubscribe are not provided, PushProvider can wire itself
+     * directly to a chat server by using these options.
+     */
+    chatServerUrl?: string;
+    getToken?: () => Promise<string>;
+    subscriptionsEndpoint?: string;
+    /**
+     * Live notifications path (Ably subscribe).
+     */
+    live?: LiveNotificationsConfig;
+    /**
+     * Called whenever a live notification event is received.
+     */
+    onLiveNotification?: (payload: PushPayload) => void;
+    /**
+     * If true, requests notification permission and subscribes immediately on mount.
+     * If false (default), call subscribe() manually via usePush().
+     */
+    autoSubscribe?: boolean;
+    children: React.ReactNode;
+}
+
+interface PushContextValue {
+    /** Whether the browser supports Web Push */
+    isSupported: boolean;
+    /** Current Notification.permission value */
+    permission: NotificationPermission | 'default';
+    /** Whether the user is currently subscribed */
+    isSubscribed: boolean;
+    /** Request permission and subscribe */
+    subscribe: () => Promise<void>;
+    /** Unsubscribe and clean up */
+    unsubscribe: () => Promise<void>;
+    /** Any error that occurred during subscribe/unsubscribe */
+    error: Error | null;
+}
+/**
+ * PushProvider — wraps your app and manages Web Push subscription lifecycle.
+ *
+ * Usage in Next.js layout.tsx:
+ *
+ *   <PushProvider
+ *     vapidKey={process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!}
+ *     serviceWorkerPath="/sw.js"
+ *     onSubscribe={async (sub) => {
+ *       const token = await getIdToken();
+ *       await fetch('/api/push/subscribe', {
+ *         method: 'POST',
+ *         headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+ *         body: JSON.stringify(sub),
+ *       });
+ *     }}
+ *     onUnsubscribe={async (endpoint) => {
+ *       await fetch('/api/push/subscribe', { method: 'DELETE', body: JSON.stringify({ endpoint }) });
+ *     }}
+ *     autoSubscribe
+ *   >
+ *     {children}
+ *   </PushProvider>
+ *
+ * Then in any component:
+ *   const { isSubscribed, permission, subscribe, unsubscribe } = usePush();
+ */
+declare function PushProvider({ vapidKey, serviceWorkerPath, onSubscribe, onUnsubscribe, chatServerUrl, getToken, subscriptionsEndpoint, live, onLiveNotification, autoSubscribe, children, }: PushProviderProps): react_jsx_runtime.JSX.Element;
+declare function usePush(): PushContextValue;
+
+declare function urlBase64ToUint8Array(base64String: string): ArrayBuffer;
+
+export { type PushPayload, PushProvider, type PushProviderProps, type PushSubscription, urlBase64ToUint8Array, usePush };

package/dist/index.js

@@ -0,0 +1,274 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  PushProvider: () => PushProvider,
+  urlBase64ToUint8Array: () => urlBase64ToUint8Array,
+  usePush: () => usePush
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/PushProvider.tsx
+var import_react = require("react");
+
+// src/utils.ts
+function urlBase64ToUint8Array(base64String) {
+  const padding = "=".repeat((4 - base64String.length % 4) % 4);
+  const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
+  const raw = atob(base64);
+  const bytes = new Uint8Array(raw.length);
+  for (let i = 0; i < raw.length; i++) bytes[i] = raw.charCodeAt(i);
+  return bytes.buffer;
+}
+function isSupported() {
+  return typeof window !== "undefined" && "serviceWorker" in navigator && "PushManager" in window && "Notification" in window;
+}
+
+// src/PushProvider.tsx
+var Ably = __toESM(require("ably"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var PushContext = (0, import_react.createContext)({
+  isSupported: false,
+  permission: "default",
+  isSubscribed: false,
+  subscribe: async () => {
+  },
+  unsubscribe: async () => {
+  },
+  error: null
+});
+function PushProvider({
+  vapidKey,
+  serviceWorkerPath = "/sw.js",
+  onSubscribe,
+  onUnsubscribe,
+  chatServerUrl,
+  getToken,
+  subscriptionsEndpoint = "/api/push/subscriptions",
+  live,
+  onLiveNotification,
+  autoSubscribe = false,
+  children
+}) {
+  const supported = isSupported();
+  const [permission, setPermission] = (0, import_react.useState)(
+    supported ? Notification.permission : "default"
+  );
+  const [isSubscribed, setIsSubscribed] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [swReg, setSwReg] = (0, import_react.useState)(null);
+  const resolveServerUrl = (0, import_react.useCallback)(
+    (path) => {
+      if (/^https?:\/\//i.test(path)) return path;
+      if (!chatServerUrl) return path;
+      const normalizedPath = path.startsWith("/") ? path : `/${path}`;
+      return `${chatServerUrl}${normalizedPath}`;
+    },
+    [chatServerUrl]
+  );
+  const defaultSubscribe = (0, import_react.useCallback)(
+    async (subscription) => {
+      if (!getToken || !chatServerUrl) {
+        throw new Error("Provide onSubscribe or configure chatServerUrl + getToken");
+      }
+      const token = await getToken();
+      const res = await fetch(resolveServerUrl(subscriptionsEndpoint), {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`
+        },
+        body: JSON.stringify(subscription)
+      });
+      if (!res.ok) throw new Error(`Subscribe failed (${res.status})`);
+    },
+    [getToken, chatServerUrl, resolveServerUrl, subscriptionsEndpoint]
+  );
+  const defaultUnsubscribe = (0, import_react.useCallback)(
+    async (endpoint) => {
+      if (!getToken || !chatServerUrl) return;
+      const token = await getToken();
+      await fetch(resolveServerUrl(subscriptionsEndpoint), {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`
+        },
+        body: JSON.stringify({ endpoint })
+      });
+    },
+    [getToken, chatServerUrl, resolveServerUrl, subscriptionsEndpoint]
+  );
+  (0, import_react.useEffect)(() => {
+    if (!supported) return;
+    navigator.serviceWorker.register(serviceWorkerPath).then((reg) => {
+      setSwReg(reg);
+      return reg.pushManager.getSubscription();
+    }).then((existing) => {
+      setIsSubscribed(!!existing);
+    }).catch((err) => {
+      console.warn("[PushClient] SW registration failed:", err);
+    });
+  }, [supported, serviceWorkerPath]);
+  const subscribe = (0, import_react.useCallback)(async () => {
+    if (!supported || !swReg) return;
+    setError(null);
+    try {
+      const perm = await Notification.requestPermission();
+      setPermission(perm);
+      if (perm !== "granted") return;
+      const sub = await swReg.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: urlBase64ToUint8Array(vapidKey)
+      });
+      const json = sub.toJSON();
+      await (onSubscribe ?? defaultSubscribe)({ endpoint: json.endpoint, keys: json.keys });
+      setIsSubscribed(true);
+    } catch (err) {
+      const e = err instanceof Error ? err : new Error(String(err));
+      setError(e);
+      console.warn("[PushClient] subscribe failed:", e);
+    }
+  }, [supported, swReg, vapidKey, onSubscribe, defaultSubscribe]);
+  const unsubscribe = (0, import_react.useCallback)(async () => {
+    if (!supported || !swReg) return;
+    setError(null);
+    try {
+      const sub = await swReg.pushManager.getSubscription();
+      if (!sub) return;
+      const endpoint = sub.endpoint;
+      await sub.unsubscribe();
+      if (onUnsubscribe) await onUnsubscribe(endpoint);
+      else await defaultUnsubscribe(endpoint);
+      setIsSubscribed(false);
+    } catch (err) {
+      const e = err instanceof Error ? err : new Error(String(err));
+      setError(e);
+    }
+  }, [supported, swReg, onUnsubscribe, defaultUnsubscribe]);
+  (0, import_react.useEffect)(() => {
+    if (autoSubscribe && swReg && !isSubscribed && permission !== "denied") {
+      subscribe();
+    }
+  }, [autoSubscribe, swReg, isSubscribed, permission, subscribe]);
+  (0, import_react.useEffect)(() => {
+    if (live?.enabled === false) return;
+    if (!chatServerUrl || !getToken) return;
+    let disposed = false;
+    let channelName = live?.channel ?? "";
+    const eventName = live?.eventName ?? "notification";
+    const showSystem = live?.showSystemNotification ?? true;
+    function deriveChannelFromJwt(token) {
+      if (channelName) return channelName;
+      try {
+        const payload = token.split(".")[1];
+        if (!payload) return "";
+        const normalized = payload.replace(/-/g, "+").replace(/_/g, "/");
+        const padded = normalized + "=".repeat((4 - normalized.length % 4) % 4);
+        const decoded = JSON.parse(atob(padded));
+        if (decoded.role === "admin" && decoded.appId) {
+          return `notifications:admin:${decoded.appId}`;
+        }
+        if (decoded.sub) {
+          return `notifications:user:${decoded.sub}`;
+        }
+      } catch {
+      }
+      return "";
+    }
+    const client = new Ably.Realtime({
+      authCallback: async (_params, callback) => {
+        try {
+          const token = await getToken();
+          if (!channelName) channelName = deriveChannelFromJwt(token);
+          const res = await fetch(`${chatServerUrl}/api/ably/token`, {
+            headers: { Authorization: `Bearer ${token}` },
+            cache: "no-store"
+          });
+          if (!res.ok) throw new Error("Ably token fetch failed");
+          callback(null, await res.json());
+        } catch (err) {
+          callback(err, null);
+        }
+      }
+    });
+    const subReady = async () => {
+      if (!channelName) {
+        try {
+          const token = await getToken();
+          channelName = deriveChannelFromJwt(token);
+        } catch {
+        }
+      }
+      if (!channelName || disposed) return;
+      const channel = client.channels.get(channelName);
+      channel.subscribe(eventName, (msg) => {
+        const payload = msg.data;
+        const normalized = {
+          title: payload.title ?? "Notification",
+          body: payload.body ?? "",
+          data: payload.data ?? {},
+          icon: payload.icon,
+          badge: payload.badge,
+          tag: payload.tag
+        };
+        onLiveNotification?.(normalized);
+        if (showSystem && typeof window !== "undefined" && Notification.permission === "granted") {
+          new Notification(normalized.title, {
+            body: normalized.body,
+            data: normalized.data,
+            icon: normalized.icon,
+            badge: normalized.badge,
+            tag: normalized.tag
+          });
+        }
+      });
+    };
+    subReady();
+    return () => {
+      disposed = true;
+      try {
+        client.close();
+      } catch {
+      }
+    };
+  }, [chatServerUrl, getToken, live, onLiveNotification]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PushContext.Provider, { value: { isSupported: supported, permission, isSubscribed, subscribe, unsubscribe, error }, children });
+}
+function usePush() {
+  return (0, import_react.useContext)(PushContext);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PushProvider,
+  urlBase64ToUint8Array,
+  usePush
+});

package/dist/index.mjs

@@ -0,0 +1,235 @@
+// src/PushProvider.tsx
+import { createContext, useCallback, useContext, useEffect, useState } from "react";
+
+// src/utils.ts
+function urlBase64ToUint8Array(base64String) {
+  const padding = "=".repeat((4 - base64String.length % 4) % 4);
+  const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
+  const raw = atob(base64);
+  const bytes = new Uint8Array(raw.length);
+  for (let i = 0; i < raw.length; i++) bytes[i] = raw.charCodeAt(i);
+  return bytes.buffer;
+}
+function isSupported() {
+  return typeof window !== "undefined" && "serviceWorker" in navigator && "PushManager" in window && "Notification" in window;
+}
+
+// src/PushProvider.tsx
+import * as Ably from "ably";
+import { jsx } from "react/jsx-runtime";
+var PushContext = createContext({
+  isSupported: false,
+  permission: "default",
+  isSubscribed: false,
+  subscribe: async () => {
+  },
+  unsubscribe: async () => {
+  },
+  error: null
+});
+function PushProvider({
+  vapidKey,
+  serviceWorkerPath = "/sw.js",
+  onSubscribe,
+  onUnsubscribe,
+  chatServerUrl,
+  getToken,
+  subscriptionsEndpoint = "/api/push/subscriptions",
+  live,
+  onLiveNotification,
+  autoSubscribe = false,
+  children
+}) {
+  const supported = isSupported();
+  const [permission, setPermission] = useState(
+    supported ? Notification.permission : "default"
+  );
+  const [isSubscribed, setIsSubscribed] = useState(false);
+  const [error, setError] = useState(null);
+  const [swReg, setSwReg] = useState(null);
+  const resolveServerUrl = useCallback(
+    (path) => {
+      if (/^https?:\/\//i.test(path)) return path;
+      if (!chatServerUrl) return path;
+      const normalizedPath = path.startsWith("/") ? path : `/${path}`;
+      return `${chatServerUrl}${normalizedPath}`;
+    },
+    [chatServerUrl]
+  );
+  const defaultSubscribe = useCallback(
+    async (subscription) => {
+      if (!getToken || !chatServerUrl) {
+        throw new Error("Provide onSubscribe or configure chatServerUrl + getToken");
+      }
+      const token = await getToken();
+      const res = await fetch(resolveServerUrl(subscriptionsEndpoint), {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`
+        },
+        body: JSON.stringify(subscription)
+      });
+      if (!res.ok) throw new Error(`Subscribe failed (${res.status})`);
+    },
+    [getToken, chatServerUrl, resolveServerUrl, subscriptionsEndpoint]
+  );
+  const defaultUnsubscribe = useCallback(
+    async (endpoint) => {
+      if (!getToken || !chatServerUrl) return;
+      const token = await getToken();
+      await fetch(resolveServerUrl(subscriptionsEndpoint), {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`
+        },
+        body: JSON.stringify({ endpoint })
+      });
+    },
+    [getToken, chatServerUrl, resolveServerUrl, subscriptionsEndpoint]
+  );
+  useEffect(() => {
+    if (!supported) return;
+    navigator.serviceWorker.register(serviceWorkerPath).then((reg) => {
+      setSwReg(reg);
+      return reg.pushManager.getSubscription();
+    }).then((existing) => {
+      setIsSubscribed(!!existing);
+    }).catch((err) => {
+      console.warn("[PushClient] SW registration failed:", err);
+    });
+  }, [supported, serviceWorkerPath]);
+  const subscribe = useCallback(async () => {
+    if (!supported || !swReg) return;
+    setError(null);
+    try {
+      const perm = await Notification.requestPermission();
+      setPermission(perm);
+      if (perm !== "granted") return;
+      const sub = await swReg.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: urlBase64ToUint8Array(vapidKey)
+      });
+      const json = sub.toJSON();
+      await (onSubscribe ?? defaultSubscribe)({ endpoint: json.endpoint, keys: json.keys });
+      setIsSubscribed(true);
+    } catch (err) {
+      const e = err instanceof Error ? err : new Error(String(err));
+      setError(e);
+      console.warn("[PushClient] subscribe failed:", e);
+    }
+  }, [supported, swReg, vapidKey, onSubscribe, defaultSubscribe]);
+  const unsubscribe = useCallback(async () => {
+    if (!supported || !swReg) return;
+    setError(null);
+    try {
+      const sub = await swReg.pushManager.getSubscription();
+      if (!sub) return;
+      const endpoint = sub.endpoint;
+      await sub.unsubscribe();
+      if (onUnsubscribe) await onUnsubscribe(endpoint);
+      else await defaultUnsubscribe(endpoint);
+      setIsSubscribed(false);
+    } catch (err) {
+      const e = err instanceof Error ? err : new Error(String(err));
+      setError(e);
+    }
+  }, [supported, swReg, onUnsubscribe, defaultUnsubscribe]);
+  useEffect(() => {
+    if (autoSubscribe && swReg && !isSubscribed && permission !== "denied") {
+      subscribe();
+    }
+  }, [autoSubscribe, swReg, isSubscribed, permission, subscribe]);
+  useEffect(() => {
+    if (live?.enabled === false) return;
+    if (!chatServerUrl || !getToken) return;
+    let disposed = false;
+    let channelName = live?.channel ?? "";
+    const eventName = live?.eventName ?? "notification";
+    const showSystem = live?.showSystemNotification ?? true;
+    function deriveChannelFromJwt(token) {
+      if (channelName) return channelName;
+      try {
+        const payload = token.split(".")[1];
+        if (!payload) return "";
+        const normalized = payload.replace(/-/g, "+").replace(/_/g, "/");
+        const padded = normalized + "=".repeat((4 - normalized.length % 4) % 4);
+        const decoded = JSON.parse(atob(padded));
+        if (decoded.role === "admin" && decoded.appId) {
+          return `notifications:admin:${decoded.appId}`;
+        }
+        if (decoded.sub) {
+          return `notifications:user:${decoded.sub}`;
+        }
+      } catch {
+      }
+      return "";
+    }
+    const client = new Ably.Realtime({
+      authCallback: async (_params, callback) => {
+        try {
+          const token = await getToken();
+          if (!channelName) channelName = deriveChannelFromJwt(token);
+          const res = await fetch(`${chatServerUrl}/api/ably/token`, {
+            headers: { Authorization: `Bearer ${token}` },
+            cache: "no-store"
+          });
+          if (!res.ok) throw new Error("Ably token fetch failed");
+          callback(null, await res.json());
+        } catch (err) {
+          callback(err, null);
+        }
+      }
+    });
+    const subReady = async () => {
+      if (!channelName) {
+        try {
+          const token = await getToken();
+          channelName = deriveChannelFromJwt(token);
+        } catch {
+        }
+      }
+      if (!channelName || disposed) return;
+      const channel = client.channels.get(channelName);
+      channel.subscribe(eventName, (msg) => {
+        const payload = msg.data;
+        const normalized = {
+          title: payload.title ?? "Notification",
+          body: payload.body ?? "",
+          data: payload.data ?? {},
+          icon: payload.icon,
+          badge: payload.badge,
+          tag: payload.tag
+        };
+        onLiveNotification?.(normalized);
+        if (showSystem && typeof window !== "undefined" && Notification.permission === "granted") {
+          new Notification(normalized.title, {
+            body: normalized.body,
+            data: normalized.data,
+            icon: normalized.icon,
+            badge: normalized.badge,
+            tag: normalized.tag
+          });
+        }
+      });
+    };
+    subReady();
+    return () => {
+      disposed = true;
+      try {
+        client.close();
+      } catch {
+      }
+    };
+  }, [chatServerUrl, getToken, live, onLiveNotification]);
+  return /* @__PURE__ */ jsx(PushContext.Provider, { value: { isSupported: supported, permission, isSubscribed, subscribe, unsubscribe, error }, children });
+}
+function usePush() {
+  return useContext(PushContext);
+}
+export {
+  PushProvider,
+  urlBase64ToUint8Array,
+  usePush
+};

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@sinlungtech/push-client",
+  "version": "0.1.0",
+  "description": "Web Push notification client for Next.js — service worker registration, permission handling, and subscription management",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": ["dist", "sw-template.js"],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch"
+  },
+  "dependencies": {
+    "ably": "^2.3.1"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18",
+    "tsup": "^8.0.0",
+    "typescript": "^5"
+  },
+  "keywords": ["web-push", "pwa", "service-worker", "notifications", "react", "nextjs"],
+  "license": "MIT"
+}

package/sw-template.js

@@ -0,0 +1,52 @@
+/**
+ * Service Worker template for @sinlungtech/push-client
+ *
+ * Copy this file to your Next.js public/sw.js and customise the notification
+ * click handler to match your app's URL structure.
+ *
+ * The `data` field in push payloads can carry any key-value pairs your server
+ * sends — use them to route the user to the right page on notification click.
+ */
+
+self.addEventListener('push', (event) => {
+  if (!event.data) return;
+
+  let payload;
+  try {
+    payload = event.data.json();
+  } catch {
+    payload = { title: 'Notification', body: event.data.text() };
+  }
+
+  const { title, body, icon, badge, tag, data = {} } = payload;
+
+  event.waitUntil(
+    self.registration.showNotification(title ?? 'Notification', {
+      body,
+      icon: icon ?? '/icon-192.png',
+      badge: badge ?? '/badge-72.png',
+      tag: tag ?? 'general',
+      renotify: true,
+      data,
+    }),
+  );
+});
+
+self.addEventListener('notificationclick', (event) => {
+  event.notification.close();
+
+  // Customise this URL based on your notification data
+  const url = event.notification.data?.url ?? '/';
+
+  event.waitUntil(
+    clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clientList) => {
+      for (const client of clientList) {
+        if ('focus' in client) {
+          client.navigate(url);
+          return client.focus();
+        }
+      }
+      if (clients.openWindow) return clients.openWindow(url);
+    }),
+  );
+});