akanjs 2.3.11-rc.7 → 2.3.11-rc.9

package/client/capacitor.ts

@@ -107,6 +107,19 @@ export type CapacitorPushNotificationsModule = {
     requestPermissions: () => Promise<{ receive: "granted" | "denied" | string }>;
     checkPermissions: () => Promise<{ receive: "granted" | "denied" | string }>;
     register: () => Promise<void> | void;
+    addListener: (
+      eventName:
+        | "registration"
+        | "registrationError"
+        | "pushNotificationReceived"
+        | "pushNotificationActionPerformed"
+        | string,
+      listenerFunc: (event: {
+        value?: string;
+        error?: string;
+        notification?: { data?: Record<string, unknown> };
+      }) => void,
+    ) => Promise<{ remove?: () => Promise<void> | void } | void> | { remove?: () => Promise<void> | void } | void;
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "2.3.11-rc.7",
+  "version": "2.3.11-rc.9",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {
@@ -198,6 +198,7 @@
     "cordova-plugin-purchase": "^13.16.0",
     "croner": "^10.0.1",
     "daisyui": "5.5.23",
+    "firebase": "^12.13.0",
     "ioredis": "^5.10.1",
     "mermaid": "^11.15.0",
     "postgres": "^3.4.9",
@@ -288,6 +289,9 @@
     "daisyui": {
       "optional": true
     },
+    "firebase": {
+      "optional": true
+    },
     "ioredis": {
       "optional": true
     },

package/types/client/capacitor.d.ts

@@ -164,6 +164,17 @@ export type CapacitorPushNotificationsModule = {
             receive: "granted" | "denied" | string;
         }>;
         register: () => Promise<void> | void;
+        addListener: (eventName: "registration" | "registrationError" | "pushNotificationReceived" | "pushNotificationActionPerformed" | string, listenerFunc: (event: {
+            value?: string;
+            error?: string;
+            notification?: {
+                data?: Record<string, unknown>;
+            };
+        }) => void) => Promise<{
+            remove?: () => Promise<void> | void;
+        } | void> | {
+            remove?: () => Promise<void> | void;
+        } | void;
     };
 };
 export type CapacitorSafeAreaModule = {

package/types/webkit/index.d.ts

@@ -13,5 +13,5 @@ export { useGeoLocation } from "./useGeoLocation.d.ts";
 export { useHistory } from "./useHistory.d.ts";
 export { useInterval } from "./useInterval.d.ts";
 export { useLocation } from "./useLocation.d.ts";
-export { usePushNoti } from "./usePushNoti.d.ts";
+export { initPushNotificationClickBridge, type PushNotificationPermission, type PushNotificationPlatform, type PushNotificationProvider, type PushToken, usePushNotification, } from "./usePushNotification.d.ts";
 export { useThrottle } from "./useThrottle.d.ts";

package/types/webkit/usePushNotification.d.ts

@@ -0,0 +1,28 @@
+import { type FirebaseOptions } from "firebase/app";
+export type PushNotificationPlatform = "web" | "ios" | "android";
+export type PushNotificationProvider = "fcm";
+export interface PushToken {
+    token: string;
+    platform: PushNotificationPlatform;
+    provider: PushNotificationProvider;
+    deviceId?: string;
+}
+export type PushNotificationPermission = "prompt" | "granted" | "denied" | string;
+export interface PushNotificationClientEnv {
+    firebase?: FirebaseOptions & {
+        vapidKey?: string;
+    };
+}
+declare global {
+    var __AKAN_PUSH_CLICK_BRIDGE__: Promise<boolean> | undefined;
+    var __AKAN_CLIENT_ENV__: PushNotificationClientEnv | undefined;
+}
+export declare const initPushNotificationClickBridge: () => Promise<boolean>;
+export declare const usePushNotification: () => {
+    isSupported: () => Promise<boolean>;
+    getPermission: () => Promise<PushNotificationPermission>;
+    requestPermission: () => Promise<PushNotificationPermission>;
+    register: () => Promise<PushToken | undefined>;
+    getToken: () => Promise<PushToken | undefined>;
+    initClickBridge: () => Promise<boolean>;
+};

package/ui/System/CSR.tsx

@@ -15,7 +15,7 @@ import {
 } from "akanjs/client";
 import { st } from "akanjs/store";
 import { animated } from "akanjs/ui";
-import { useFetch, usePushNoti } from "akanjs/webkit";
+import { useFetch } from "akanjs/webkit";
 import { createElement, memo, type ComponentProps, type ReactNode, type RefObject, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 
@@ -392,7 +392,6 @@ interface CSRBridgeProps {
   prefix?: string;
 }
 const CSRBridge = ({ lang, prefix = "" }: CSRBridgeProps) => {
-  const pushNoti = usePushNoti();
   const { location, pageContentRef } = useCsr();
   useEffect(() => {
     const { path, pathname } = getPathInfo(location.pathname, lang, prefix);
@@ -408,13 +407,6 @@ const CSRBridge = ({ lang, prefix = "" }: CSRBridgeProps) => {
     const device = Device.getDevice();
     device.listenKeyboardChanged(st.do.setKeyboardHeight);
     device.setPageContentRef(pageContentRef);
-    if (device.info.platform === "web") return;
-    void (async () => {
-      await pushNoti.init();
-      const token = await pushNoti.getToken();
-      if (!token) return;
-      st.do.setDeviceToken(token);
-    })();
     return () => {
       device.unlistenKeyboardChanged();
     };

package/ui/System/Client.tsx

@@ -206,6 +206,7 @@ interface ClientBridgeProps {
 }
 
 export const ClientBridge = ({ env, lang, theme, prefix, gaTrackingId, wsConnect = true }: ClientBridgeProps) => {
+  (globalThis as typeof globalThis & { __AKAN_CLIENT_ENV__?: ClientEnv }).__AKAN_CLIENT_ENV__ = env;
   const uiOperation = st.use.uiOperation();
   const pathname = st.use.pathname();
   const params = st.use.params();

package/webkit/index.ts

@@ -13,5 +13,12 @@ export { useGeoLocation } from "./useGeoLocation";
 export { useHistory } from "./useHistory";
 export { useInterval } from "./useInterval";
 export { useLocation } from "./useLocation";
-export { usePushNoti } from "./usePushNoti";
+export {
+  initPushNotificationClickBridge,
+  type PushNotificationPermission,
+  type PushNotificationPlatform,
+  type PushNotificationProvider,
+  type PushToken,
+  usePushNotification,
+} from "./usePushNotification";
 export { useThrottle } from "./useThrottle";

package/webkit/usePushNotification.tsx

@@ -0,0 +1,267 @@
+"use client";
+
+import { router } from "akanjs/client";
+import { loadCapacitorDevice, loadCapacitorFcm, loadCapacitorPushNotifications } from "akanjs/client/capacitor";
+import { getApps, initializeApp, type FirebaseOptions } from "firebase/app";
+import { getMessaging, getToken as getFirebaseToken } from "firebase/messaging";
+import { useEffect } from "react";
+
+export type PushNotificationPlatform = "web" | "ios" | "android";
+export type PushNotificationProvider = "fcm";
+
+export interface PushToken {
+  token: string;
+  platform: PushNotificationPlatform;
+  provider: PushNotificationProvider;
+  deviceId?: string;
+}
+
+export type PushNotificationPermission = "prompt" | "granted" | "denied" | string;
+
+export interface PushNotificationClientEnv {
+  firebase?: FirebaseOptions & {
+    vapidKey?: string;
+  };
+}
+
+declare global {
+  
+  var __AKAN_PUSH_CLICK_BRIDGE__: Promise<boolean> | undefined;
+  
+  var __AKAN_CLIENT_ENV__: PushNotificationClientEnv | undefined;
+}
+
+const getClientEnv = () => globalThis.__AKAN_CLIENT_ENV__;
+
+const getFirebaseConfig = () => getClientEnv()?.firebase;
+
+const normalizePlatform = (platform: string): PushNotificationPlatform | null => {
+  if (platform === "web" || platform === "ios" || platform === "android") return platform;
+  return null;
+};
+
+const isWebRuntime = () => typeof window !== "undefined" && typeof navigator !== "undefined";
+
+const isInternalDeepLink = (url: string) => {
+  if (url.startsWith("/") && !url.startsWith("//")) return true;
+  if (!isWebRuntime()) return false;
+  try {
+    const parsed = new URL(url, window.location.origin);
+    return parsed.origin === window.location.origin;
+  } catch {
+    return false;
+  }
+};
+
+const enterDeepLink = (url: string) => {
+  if (!isInternalDeepLink(url)) return false;
+  const parsed = new URL(url, isWebRuntime() ? window.location.origin : "http://localhost");
+  return router.enterDeepLink(`${parsed.pathname}${parsed.search}${parsed.hash}`);
+};
+
+const getNativePlatform = async () => {
+  const { Device } = await loadCapacitorDevice();
+  const device = await Device.getInfo();
+  return normalizePlatform(device.platform);
+};
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const getNativeToken = async (options?: { retries?: number }): Promise<PushToken | undefined> => {
+  const [{ FCM }, platform] = await Promise.all([loadCapacitorFcm(), getNativePlatform()]);
+  if (!platform || platform === "web") return undefined;
+
+  const retries = options?.retries ?? 0;
+  for (let attempt = 0; attempt <= retries; attempt += 1) {
+    const { token } = await FCM.getToken();
+    if (token) return { token, platform, provider: "fcm" };
+    if (attempt < retries) await sleep(500 * (attempt + 1));
+  }
+
+  return undefined;
+};
+
+const getWebToken = async (): Promise<PushToken | undefined> => {
+  if (!isWebRuntime() || !("serviceWorker" in navigator)) return undefined;
+  const firebaseConfig = getFirebaseConfig();
+  if (!firebaseConfig?.apiKey || !firebaseConfig.projectId || !firebaseConfig.messagingSenderId || !firebaseConfig.appId) {
+    return undefined;
+  }
+  const firebase = getApps()[0] ?? initializeApp(firebaseConfig);
+  const messaging = getMessaging(firebase);
+  const serviceWorkerRegistration = await navigator.serviceWorker.register("/firebase-messaging-sw.js");
+  const token = await getFirebaseToken(messaging, {
+    vapidKey: firebaseConfig.vapidKey,
+    serviceWorkerRegistration,
+  });
+  if (!token) return undefined;
+  return { token, platform: "web", provider: "fcm" };
+};
+
+const getPushUrlFromNativeEvent = (event: { notification?: { data?: Record<string, unknown> } }) => {
+  const data = event.notification?.data;
+  const fcmMessage = data?.FCM_MSG as { data?: { url?: unknown }; fcmOptions?: { link?: unknown } } | undefined;
+  const directUrl = data?.url;
+  const nestedUrl = fcmMessage?.data?.url ?? fcmMessage?.fcmOptions?.link;
+  return typeof directUrl === "string" ? directUrl : typeof nestedUrl === "string" ? nestedUrl : undefined;
+};
+
+const waitForNativeRegistration = async (
+  PushNotifications: Awaited<ReturnType<typeof loadCapacitorPushNotifications>>["PushNotifications"],
+): Promise<string | undefined> => {
+  let registrationHandle: { remove?: () => Promise<void> | void } | void;
+  let errorHandle: { remove?: () => Promise<void> | void } | void;
+
+  const cleanup = async () => {
+    await registrationHandle?.remove?.();
+    await errorHandle?.remove?.();
+  };
+
+  return await new Promise<string | undefined>((resolve) => {
+    let settled = false;
+    const finish = (token?: string) => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(timeout);
+      void cleanup();
+      resolve(token);
+    };
+
+    const timeout = setTimeout(() => finish(), 8000);
+
+    Promise.resolve(
+      PushNotifications.addListener("registration", (event) => {
+        finish(typeof event.value === "string" ? event.value : undefined);
+      }),
+    ).then((handle) => {
+      registrationHandle = handle;
+    });
+    Promise.resolve(PushNotifications.addListener("registrationError", () => finish())).then((handle) => {
+      errorHandle = handle;
+    });
+    Promise.resolve(PushNotifications.register()).catch(() => finish());
+  });
+};
+
+export const initPushNotificationClickBridge = async () => {
+  if (globalThis.__AKAN_PUSH_CLICK_BRIDGE__) return await globalThis.__AKAN_PUSH_CLICK_BRIDGE__;
+
+  try {
+    const platform = await getNativePlatform();
+    if (!platform || platform === "web") return true;
+
+    globalThis.__AKAN_PUSH_CLICK_BRIDGE__ = (async () => {
+      const { PushNotifications } = await loadCapacitorPushNotifications();
+      await PushNotifications.addListener("pushNotificationActionPerformed", (event) => {
+        const url = getPushUrlFromNativeEvent(event);
+        if (!url) return;
+        try {
+          enterDeepLink(url);
+        } catch {
+        }
+      });
+      return true;
+    })();
+
+    return await globalThis.__AKAN_PUSH_CLICK_BRIDGE__;
+  } catch {
+    return false;
+  }
+};
+
+export const usePushNotification = () => {
+  useEffect(() => {
+    void initPushNotificationClickBridge();
+  }, []);
+
+  const isSupported = async () => {
+    if (!isWebRuntime()) return false;
+    try {
+      const platform = await getNativePlatform();
+      if (platform && platform !== "web") {
+        await Promise.all([loadCapacitorFcm(), loadCapacitorPushNotifications()]);
+        return true;
+      }
+    } catch {
+    }
+    return Boolean(getFirebaseConfig()?.apiKey && "Notification" in window && "serviceWorker" in navigator);
+  };
+
+  const getPermission = async (): Promise<PushNotificationPermission> => {
+    try {
+      const platform = await getNativePlatform();
+      if (platform && platform !== "web") {
+        const { PushNotifications } = await loadCapacitorPushNotifications();
+        const { receive } = await PushNotifications.checkPermissions();
+        return receive;
+      }
+    } catch {
+    }
+    if (!isWebRuntime() || !("Notification" in window)) return "denied";
+    return Notification.permission;
+  };
+
+  const requestPermission = async (): Promise<PushNotificationPermission> => {
+    try {
+      const platform = await getNativePlatform();
+      if (platform && platform !== "web") {
+        const { PushNotifications } = await loadCapacitorPushNotifications();
+        const { receive } = await PushNotifications.requestPermissions();
+        return receive;
+      }
+    } catch {
+    }
+    if (!isWebRuntime() || !("Notification" in window)) return "denied";
+    return await Notification.requestPermission();
+  };
+
+  const getToken = async () => {
+    try {
+      const platform = await getNativePlatform();
+      if (platform && platform !== "web") return await getNativeToken();
+    } catch {
+    }
+    try {
+      return await getWebToken();
+    } catch {
+      return undefined;
+    }
+  };
+
+  const register = async () => {
+    try {
+      const permission = await requestPermission();
+
+      const platform = await getNativePlatform().catch(() => null);
+      if (platform && platform !== "web") {
+        const [{ FCM }, { PushNotifications }] = await Promise.all([
+          loadCapacitorFcm(),
+          loadCapacitorPushNotifications(),
+        ]);
+        await FCM.setAutoInit({ enabled: true });
+
+        if (platform === "android") {
+          return await getNativeToken({ retries: 5 });
+        }
+
+        if (permission !== "granted") return undefined;
+        await waitForNativeRegistration(PushNotifications);
+        return await getNativeToken({ retries: 5 });
+      }
+
+      if (permission !== "granted") return undefined;
+      return await getWebToken();
+    } catch {
+      return undefined;
+    }
+  };
+
+  return {
+    isSupported,
+    getPermission,
+    requestPermission,
+    register,
+    getToken,
+    initClickBridge: initPushNotificationClickBridge,
+  };
+};

package/types/webkit/usePushNoti.d.ts

@@ -1,7 +0,0 @@
-/** Capacitor push/FCM hook for permission, registration, and token retrieval. */
-export declare const usePushNoti: () => {
-    init: () => Promise<void>;
-    checkPermission: () => Promise<boolean>;
-    register: () => Promise<void>;
-    getToken: () => Promise<string | undefined>;
-};

package/webkit/usePushNoti.tsx

@@ -1,48 +0,0 @@
-"use client";
-import { loadCapacitorDevice, loadCapacitorFcm, loadCapacitorPushNotifications } from "akanjs/client/capacitor";
-
-/** Capacitor push/FCM hook for permission, registration, and token retrieval. */
-export const usePushNoti = () => {
-  const init = async () => {
-    const [{ Device }, { FCM }, { PushNotifications }] = await Promise.all([
-      loadCapacitorDevice(),
-      loadCapacitorFcm(),
-      loadCapacitorPushNotifications(),
-    ]);
-    const device = await Device.getInfo();
-    if (device.platform === "web") return;
-    void FCM.setAutoInit({ enabled: true });
-    void PushNotifications.requestPermissions().then(async (result) => {
-      if (result.receive === "granted") {
-        await PushNotifications.register();
-      }
-    });
-  };
-
-  const checkPermission = async () => {
-    const { PushNotifications } = await loadCapacitorPushNotifications();
-    const { receive } = await PushNotifications.checkPermissions();
-    return receive === "granted";
-  };
-  const register = async () => {
-    const [{ Device }, { PushNotifications }] = await Promise.all([
-      loadCapacitorDevice(),
-      loadCapacitorPushNotifications(),
-    ]);
-    const device = await Device.getInfo();
-    if (device.platform === "web") return;
-    const { receive } = await PushNotifications.checkPermissions();
-
-    if (receive === "denied") location.assign("app-settings:");
-    else await PushNotifications.register();
-  };
-  const getToken = async () => {
-    const [{ Device }, { FCM }] = await Promise.all([loadCapacitorDevice(), loadCapacitorFcm()]);
-    const device = await Device.getInfo();
-    if (device.platform === "web") return;
-    const { token } = await FCM.getToken();
-    return token;
-  };
-
-  return { init, checkPermission, register, getToken };
-};