@sinlungtech/push-client 0.1.0 → 0.1.2

package/dist/index.d.mts

@@ -68,6 +68,17 @@ interface PushProviderProps {
      * Called whenever a live notification event is received.
      */
     onLiveNotification?: (payload: PushPayload) => void;
+    /**
+     * Built-in in-page alert UI for live notifications.
+     * Useful as a zero-config default when hosts don't provide custom handlers.
+     * Default: true
+     */
+    showInPageAlerts?: boolean;
+    /**
+     * Auto-dismiss timeout (ms) for built-in in-page alerts.
+     * Default: 5000
+     */
+    inPageAlertDurationMs?: number;
     /**
      * If true, requests notification permission and subscribes immediately on mount.
      * If false (default), call subscribe() manually via usePush().
@@ -117,7 +128,7 @@ interface PushContextValue {
  * 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 PushProvider({ vapidKey, serviceWorkerPath, onSubscribe, onUnsubscribe, chatServerUrl, getToken, subscriptionsEndpoint, live, onLiveNotification, showInPageAlerts, inPageAlertDurationMs, autoSubscribe, children, }: PushProviderProps): react_jsx_runtime.JSX.Element;
 declare function usePush(): PushContextValue;
 
 declare function urlBase64ToUint8Array(base64String: string): ArrayBuffer;

package/dist/index.d.ts

@@ -68,6 +68,17 @@ interface PushProviderProps {
      * Called whenever a live notification event is received.
      */
     onLiveNotification?: (payload: PushPayload) => void;
+    /**
+     * Built-in in-page alert UI for live notifications.
+     * Useful as a zero-config default when hosts don't provide custom handlers.
+     * Default: true
+     */
+    showInPageAlerts?: boolean;
+    /**
+     * Auto-dismiss timeout (ms) for built-in in-page alerts.
+     * Default: 5000
+     */
+    inPageAlertDurationMs?: number;
     /**
      * If true, requests notification permission and subscribes immediately on mount.
      * If false (default), call subscribe() manually via usePush().
@@ -117,7 +128,7 @@ interface PushContextValue {
  * 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 PushProvider({ vapidKey, serviceWorkerPath, onSubscribe, onUnsubscribe, chatServerUrl, getToken, subscriptionsEndpoint, live, onLiveNotification, showInPageAlerts, inPageAlertDurationMs, autoSubscribe, children, }: PushProviderProps): react_jsx_runtime.JSX.Element;
 declare function usePush(): PushContextValue;
 
 declare function urlBase64ToUint8Array(base64String: string): ArrayBuffer;

package/dist/index.js

@@ -75,6 +75,8 @@ function PushProvider({
   subscriptionsEndpoint = "/api/push/subscriptions",
   live,
   onLiveNotification,
+  showInPageAlerts = true,
+  inPageAlertDurationMs = 5e3,
   autoSubscribe = false,
   children
 }) {
@@ -85,6 +87,27 @@ function PushProvider({
   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 [inPageAlerts, setInPageAlerts] = (0, import_react.useState)([]);
+  const pushInPageAlert = (0, import_react.useCallback)(
+    (title, body) => {
+      const id = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+      setInPageAlerts((prev) => [...prev, { id, title, body }].slice(-3));
+      window.setTimeout(() => {
+        setInPageAlerts((prev) => prev.filter((n) => n.id !== id));
+      }, Math.max(1e3, inPageAlertDurationMs));
+    },
+    [inPageAlertDurationMs]
+  );
+  const sameServerKey = (0, import_react.useCallback)((a, b) => {
+    if (!a) return false;
+    const ua = new Uint8Array(a);
+    const ub = new Uint8Array(b);
+    if (ua.length !== ub.length) return false;
+    for (let i = 0; i < ua.length; i += 1) {
+      if (ua[i] !== ub[i]) return false;
+    }
+    return true;
+  }, []);
   const resolveServerUrl = (0, import_react.useCallback)(
     (path) => {
       if (/^https?:\/\//i.test(path)) return path;
@@ -145,19 +168,72 @@ function PushProvider({
       const perm = await Notification.requestPermission();
       setPermission(perm);
       if (perm !== "granted") return;
+      const desiredServerKey = urlBase64ToUint8Array(vapidKey);
+      const existing = await swReg.pushManager.getSubscription();
+      if (existing) {
+        const existingKey = existing.options?.applicationServerKey ?? null;
+        const keyMatches = sameServerKey(existingKey, desiredServerKey);
+        if (keyMatches) {
+          const existingJson = existing.toJSON();
+          await (onSubscribe ?? defaultSubscribe)({
+            endpoint: existingJson.endpoint,
+            keys: existingJson.keys
+          });
+          setIsSubscribed(true);
+          return;
+        }
+        const oldEndpoint = existing.endpoint;
+        await existing.unsubscribe();
+        if (onUnsubscribe) await onUnsubscribe(oldEndpoint);
+        else await defaultUnsubscribe(oldEndpoint);
+      }
       const sub = await swReg.pushManager.subscribe({
         userVisibleOnly: true,
-        applicationServerKey: urlBase64ToUint8Array(vapidKey)
+        applicationServerKey: desiredServerKey
       });
       const json = sub.toJSON();
       await (onSubscribe ?? defaultSubscribe)({ endpoint: json.endpoint, keys: json.keys });
       setIsSubscribed(true);
     } catch (err) {
+      const message = String(err?.message ?? err ?? "");
+      const recoverable = message.includes("different applicationServerKey") || message.includes("gcm_sender_id");
+      if (recoverable) {
+        try {
+          const stale = await swReg.pushManager.getSubscription();
+          if (stale) {
+            const oldEndpoint = stale.endpoint;
+            await stale.unsubscribe();
+            if (onUnsubscribe) await onUnsubscribe(oldEndpoint);
+            else await defaultUnsubscribe(oldEndpoint);
+          }
+          const retried = await swReg.pushManager.subscribe({
+            userVisibleOnly: true,
+            applicationServerKey: urlBase64ToUint8Array(vapidKey)
+          });
+          const retriedJson = retried.toJSON();
+          await (onSubscribe ?? defaultSubscribe)({
+            endpoint: retriedJson.endpoint,
+            keys: retriedJson.keys
+          });
+          setIsSubscribed(true);
+          return;
+        } catch {
+        }
+      }
       const e = err instanceof Error ? err : new Error(String(err));
       setError(e);
       console.warn("[PushClient] subscribe failed:", e);
     }
-  }, [supported, swReg, vapidKey, onSubscribe, defaultSubscribe]);
+  }, [
+    supported,
+    swReg,
+    vapidKey,
+    onSubscribe,
+    onUnsubscribe,
+    defaultSubscribe,
+    defaultUnsubscribe,
+    sameServerKey
+  ]);
   const unsubscribe = (0, import_react.useCallback)(async () => {
     if (!supported || !swReg) return;
     setError(null);
@@ -175,7 +251,7 @@ function PushProvider({
     }
   }, [supported, swReg, onUnsubscribe, defaultUnsubscribe]);
   (0, import_react.useEffect)(() => {
-    if (autoSubscribe && swReg && !isSubscribed && permission !== "denied") {
+    if (autoSubscribe && swReg && !isSubscribed && permission === "granted") {
       subscribe();
     }
   }, [autoSubscribe, swReg, isSubscribed, permission, subscribe]);
@@ -241,6 +317,9 @@ function PushProvider({
           tag: payload.tag
         };
         onLiveNotification?.(normalized);
+        if (!onLiveNotification && showInPageAlerts) {
+          pushInPageAlert(normalized.title, normalized.body || "You have a new notification.");
+        }
         if (showSystem && typeof window !== "undefined" && Notification.permission === "granted") {
           new Notification(normalized.title, {
             body: normalized.body,
@@ -260,8 +339,46 @@ function PushProvider({
       } catch {
       }
     };
-  }, [chatServerUrl, getToken, live, onLiveNotification]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PushContext.Provider, { value: { isSupported: supported, permission, isSubscribed, subscribe, unsubscribe, error }, children });
+  }, [chatServerUrl, getToken, live, onLiveNotification, showInPageAlerts, pushInPageAlert]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PushContext.Provider, { value: { isSupported: supported, permission, isSubscribed, subscribe, unsubscribe, error }, children: [
+    children,
+    showInPageAlerts && inPageAlerts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          right: 16,
+          bottom: 16,
+          zIndex: 2147483640,
+          display: "flex",
+          flexDirection: "column",
+          gap: 8,
+          pointerEvents: "none"
+        },
+        children: inPageAlerts.map((n) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            style: {
+              pointerEvents: "auto",
+              width: 320,
+              maxWidth: "calc(100vw - 32px)",
+              borderRadius: 12,
+              border: "1px solid #e5e7eb",
+              background: "#fff",
+              boxShadow: "0 8px 24px rgba(0,0,0,0.15)",
+              padding: "10px 12px",
+              fontFamily: "system-ui, sans-serif"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: 0, fontSize: 12, fontWeight: 700, color: "#111827" }, children: n.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: "4px 0 0", fontSize: 12, color: "#4b5563", lineHeight: 1.35 }, children: n.body })
+            ]
+          },
+          n.id
+        ))
+      }
+    )
+  ] });
 }
 function usePush() {
   return (0, import_react.useContext)(PushContext);

package/dist/index.mjs

@@ -16,7 +16,7 @@ function isSupported() {
 
 // src/PushProvider.tsx
 import * as Ably from "ably";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var PushContext = createContext({
   isSupported: false,
   permission: "default",
@@ -37,6 +37,8 @@ function PushProvider({
   subscriptionsEndpoint = "/api/push/subscriptions",
   live,
   onLiveNotification,
+  showInPageAlerts = true,
+  inPageAlertDurationMs = 5e3,
   autoSubscribe = false,
   children
 }) {
@@ -47,6 +49,27 @@ function PushProvider({
   const [isSubscribed, setIsSubscribed] = useState(false);
   const [error, setError] = useState(null);
   const [swReg, setSwReg] = useState(null);
+  const [inPageAlerts, setInPageAlerts] = useState([]);
+  const pushInPageAlert = useCallback(
+    (title, body) => {
+      const id = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+      setInPageAlerts((prev) => [...prev, { id, title, body }].slice(-3));
+      window.setTimeout(() => {
+        setInPageAlerts((prev) => prev.filter((n) => n.id !== id));
+      }, Math.max(1e3, inPageAlertDurationMs));
+    },
+    [inPageAlertDurationMs]
+  );
+  const sameServerKey = useCallback((a, b) => {
+    if (!a) return false;
+    const ua = new Uint8Array(a);
+    const ub = new Uint8Array(b);
+    if (ua.length !== ub.length) return false;
+    for (let i = 0; i < ua.length; i += 1) {
+      if (ua[i] !== ub[i]) return false;
+    }
+    return true;
+  }, []);
   const resolveServerUrl = useCallback(
     (path) => {
       if (/^https?:\/\//i.test(path)) return path;
@@ -107,19 +130,72 @@ function PushProvider({
       const perm = await Notification.requestPermission();
       setPermission(perm);
       if (perm !== "granted") return;
+      const desiredServerKey = urlBase64ToUint8Array(vapidKey);
+      const existing = await swReg.pushManager.getSubscription();
+      if (existing) {
+        const existingKey = existing.options?.applicationServerKey ?? null;
+        const keyMatches = sameServerKey(existingKey, desiredServerKey);
+        if (keyMatches) {
+          const existingJson = existing.toJSON();
+          await (onSubscribe ?? defaultSubscribe)({
+            endpoint: existingJson.endpoint,
+            keys: existingJson.keys
+          });
+          setIsSubscribed(true);
+          return;
+        }
+        const oldEndpoint = existing.endpoint;
+        await existing.unsubscribe();
+        if (onUnsubscribe) await onUnsubscribe(oldEndpoint);
+        else await defaultUnsubscribe(oldEndpoint);
+      }
       const sub = await swReg.pushManager.subscribe({
         userVisibleOnly: true,
-        applicationServerKey: urlBase64ToUint8Array(vapidKey)
+        applicationServerKey: desiredServerKey
       });
       const json = sub.toJSON();
       await (onSubscribe ?? defaultSubscribe)({ endpoint: json.endpoint, keys: json.keys });
       setIsSubscribed(true);
     } catch (err) {
+      const message = String(err?.message ?? err ?? "");
+      const recoverable = message.includes("different applicationServerKey") || message.includes("gcm_sender_id");
+      if (recoverable) {
+        try {
+          const stale = await swReg.pushManager.getSubscription();
+          if (stale) {
+            const oldEndpoint = stale.endpoint;
+            await stale.unsubscribe();
+            if (onUnsubscribe) await onUnsubscribe(oldEndpoint);
+            else await defaultUnsubscribe(oldEndpoint);
+          }
+          const retried = await swReg.pushManager.subscribe({
+            userVisibleOnly: true,
+            applicationServerKey: urlBase64ToUint8Array(vapidKey)
+          });
+          const retriedJson = retried.toJSON();
+          await (onSubscribe ?? defaultSubscribe)({
+            endpoint: retriedJson.endpoint,
+            keys: retriedJson.keys
+          });
+          setIsSubscribed(true);
+          return;
+        } catch {
+        }
+      }
       const e = err instanceof Error ? err : new Error(String(err));
       setError(e);
       console.warn("[PushClient] subscribe failed:", e);
     }
-  }, [supported, swReg, vapidKey, onSubscribe, defaultSubscribe]);
+  }, [
+    supported,
+    swReg,
+    vapidKey,
+    onSubscribe,
+    onUnsubscribe,
+    defaultSubscribe,
+    defaultUnsubscribe,
+    sameServerKey
+  ]);
   const unsubscribe = useCallback(async () => {
     if (!supported || !swReg) return;
     setError(null);
@@ -137,7 +213,7 @@ function PushProvider({
     }
   }, [supported, swReg, onUnsubscribe, defaultUnsubscribe]);
   useEffect(() => {
-    if (autoSubscribe && swReg && !isSubscribed && permission !== "denied") {
+    if (autoSubscribe && swReg && !isSubscribed && permission === "granted") {
       subscribe();
     }
   }, [autoSubscribe, swReg, isSubscribed, permission, subscribe]);
@@ -203,6 +279,9 @@ function PushProvider({
           tag: payload.tag
         };
         onLiveNotification?.(normalized);
+        if (!onLiveNotification && showInPageAlerts) {
+          pushInPageAlert(normalized.title, normalized.body || "You have a new notification.");
+        }
         if (showSystem && typeof window !== "undefined" && Notification.permission === "granted") {
           new Notification(normalized.title, {
             body: normalized.body,
@@ -222,8 +301,46 @@ function PushProvider({
       } catch {
       }
     };
-  }, [chatServerUrl, getToken, live, onLiveNotification]);
-  return /* @__PURE__ */ jsx(PushContext.Provider, { value: { isSupported: supported, permission, isSubscribed, subscribe, unsubscribe, error }, children });
+  }, [chatServerUrl, getToken, live, onLiveNotification, showInPageAlerts, pushInPageAlert]);
+  return /* @__PURE__ */ jsxs(PushContext.Provider, { value: { isSupported: supported, permission, isSubscribed, subscribe, unsubscribe, error }, children: [
+    children,
+    showInPageAlerts && inPageAlerts.length > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          right: 16,
+          bottom: 16,
+          zIndex: 2147483640,
+          display: "flex",
+          flexDirection: "column",
+          gap: 8,
+          pointerEvents: "none"
+        },
+        children: inPageAlerts.map((n) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              pointerEvents: "auto",
+              width: 320,
+              maxWidth: "calc(100vw - 32px)",
+              borderRadius: 12,
+              border: "1px solid #e5e7eb",
+              background: "#fff",
+              boxShadow: "0 8px 24px rgba(0,0,0,0.15)",
+              padding: "10px 12px",
+              fontFamily: "system-ui, sans-serif"
+            },
+            children: [
+              /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: 12, fontWeight: 700, color: "#111827" }, children: n.title }),
+              /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", fontSize: 12, color: "#4b5563", lineHeight: 1.35 }, children: n.body })
+            ]
+          },
+          n.id
+        ))
+      }
+    )
+  ] });
 }
 function usePush() {
   return useContext(PushContext);

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@sinlungtech/push-client",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "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"],
+  "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"
@@ -22,6 +25,13 @@
     "tsup": "^8.0.0",
     "typescript": "^5"
   },
-  "keywords": ["web-push", "pwa", "service-worker", "notifications", "react", "nextjs"],
+  "keywords": [
+    "web-push",
+    "pwa",
+    "service-worker",
+    "notifications",
+    "react",
+    "nextjs"
+  ],
   "license": "MIT"
 }