shubham43MP/fallback-redirect-ios.ts

## fallback-redirect-ios.ts
// useDeepLinker.ts
import { useCallback, useEffect, useRef } from "react";

export type DeepLinkOptions = {
  onIgnored?: () => void;
  onFallback?: () => void;
  onReturn?: () => void;
  /**
   * Time to wait before deciding the browser "ignored" the deep link.
   * Default: 500ms (same as original code)
   */
  dialogTimeoutMs?: number;
};

export type UseDeepLinkerResult = {
  openUrl: (url: string) => void;
};

/**
 * React/TS version of the DeepLinker logic using useEffect and hooks.
 *
 * Handles:
 *  - onIgnored: browser never popped a dialog / deep link did nothing
 *  - onFallback: dialog closed / user returned but deep link failed
 *  - onReturn: user came back from native app after a successful open
 */
export function useDeepLinker(options: DeepLinkOptions): UseDeepLinkerResult {
  const hasFocusRef = useRef(true);
  const didHideRef = useRef(false);
  const optionsRef = useRef<DeepLinkOptions>(options);

  // Always keep the latest callbacks without re-binding listeners
  useEffect(() => {
    optionsRef.current = options;
  }, [options]);

  useEffect(() => {
    if (typeof window === "undefined" || typeof document === "undefined") {
      return;
    }

    const onBlur = () => {
      hasFocusRef.current = false;
    };

    const onVisibilityChange = (e: Event) => {
      const target = e.target as Document | null;
      if (target && target.visibilityState === "hidden") {
        didHideRef.current = true;
      }
    };

    const onFocus = () => {
      const { onFallback, onReturn } = optionsRef.current;

      if (didHideRef.current) {
        // User returned from native app or browser came back into view
        if (onReturn) {
          onReturn();
        }
        didHideRef.current = false; // reset
      } else {
        // Ignore duplicate focus when returning from native app on iOS 13.3+
        if (!hasFocusRef.current && onFallback) {
          // Wait for app switch transition to fully complete – only then
          // does 'visibilitychange' reliably fire
          window.setTimeout(() => {
            // If browser was not hidden, the deep link failed
            if (!didHideRef.current) {
              onFallback();
            }
          }, 1000);
        }
      }

      hasFocusRef.current = true;
    };

    const bindEvents = (mode: "add" | "remove") => {
      const handler =
        mode === "add" ? "addEventListener" : ("removeEventListener" as const);

      window[handler]("blur", onBlur);
      window[handler]("focus", onFocus);
      document[handler]("visibilitychange", onVisibilityChange);
    };

    // Attach listeners
    bindEvents("add");

    // Cleanup on unmount
    return () => {
      bindEvents("remove");
    };
  }, []);

  const openUrl = useCallback((url: string) => {
    if (typeof window === "undefined") return;

    const { onIgnored, dialogTimeoutMs = 500 } = optionsRef.current;

    // It can take a while for the native dialog to appear
    window.setTimeout(() => {
      if (hasFocusRef.current && onIgnored) {
        // Browser failed to respond to the deep link
        onIgnored();
      }
    }, dialogTimeoutMs);

    // Trigger the deep link
    window.location.href = url;
  }, []);

  return { openUrl };
}


// usage
import React, { useEffect } from "react";

const DeepLinkEffectExample: React.FC = () => {
  const { openUrl } = useDeepLinker({
    onIgnored: () => {
      console.log("Browser ignored the deep link (no dialog, no redirect)");
    },
    onFallback: () => {
      console.log("Deep link failed; user returned to tab. Trigger fallback.");
    },
    onReturn: () => {
      console.log("User returned from native app");
    },
  });

  // Example boolean condition
  const shouldTriggerDeepLink = true; // Replace with real logic

  useEffect(() => {
    if (!shouldTriggerDeepLink) return;

    // Deep link you want to open
    const APP_URL = "fb://profile/240995729348595";

    // Trigger the link
    openUrl(APP_URL);

  }, [shouldTriggerDeepLink, openUrl]);

  return <div>Attempting deep link…</div>;
};

export default DeepLinkEffectExample;
	// useDeepLinker.ts
	import { useCallback, useEffect, useRef } from "react";

	export type DeepLinkOptions = {
	onIgnored?: () => void;
	onFallback?: () => void;
	onReturn?: () => void;
	/**
	* Time to wait before deciding the browser "ignored" the deep link.
	* Default: 500ms (same as original code)
	*/
	dialogTimeoutMs?: number;
	};

	export type UseDeepLinkerResult = {
	openUrl: (url: string) => void;
	};

	/**
	* React/TS version of the DeepLinker logic using useEffect and hooks.
	*
	* Handles:
	* - onIgnored: browser never popped a dialog / deep link did nothing
	* - onFallback: dialog closed / user returned but deep link failed
	* - onReturn: user came back from native app after a successful open
	*/
	export function useDeepLinker(options: DeepLinkOptions): UseDeepLinkerResult {
	const hasFocusRef = useRef(true);
	const didHideRef = useRef(false);
	const optionsRef = useRef<DeepLinkOptions>(options);

	// Always keep the latest callbacks without re-binding listeners
	useEffect(() => {
	optionsRef.current = options;
	}, [options]);

	useEffect(() => {
	if (typeof window === "undefined" \|\| typeof document === "undefined") {
	return;
	}

	const onBlur = () => {
	hasFocusRef.current = false;
	};

	const onVisibilityChange = (e: Event) => {
	const target = e.target as Document \| null;
	if (target && target.visibilityState === "hidden") {
	didHideRef.current = true;
	}
	};

	const onFocus = () => {
	const { onFallback, onReturn } = optionsRef.current;

	if (didHideRef.current) {
	// User returned from native app or browser came back into view
	if (onReturn) {
	onReturn();
	}
	didHideRef.current = false; // reset
	} else {
	// Ignore duplicate focus when returning from native app on iOS 13.3+
	if (!hasFocusRef.current && onFallback) {
	// Wait for app switch transition to fully complete – only then
	// does 'visibilitychange' reliably fire
	window.setTimeout(() => {
	// If browser was not hidden, the deep link failed
	if (!didHideRef.current) {
	onFallback();
	}
	}, 1000);
	}
	}

	hasFocusRef.current = true;
	};

	const bindEvents = (mode: "add" \| "remove") => {
	const handler =
	mode === "add" ? "addEventListener" : ("removeEventListener" as const);

	window[handler]("blur", onBlur);
	window[handler]("focus", onFocus);
	document[handler]("visibilitychange", onVisibilityChange);
	};

	// Attach listeners
	bindEvents("add");

	// Cleanup on unmount
	return () => {
	bindEvents("remove");
	};
	}, []);

	const openUrl = useCallback((url: string) => {
	if (typeof window === "undefined") return;

	const { onIgnored, dialogTimeoutMs = 500 } = optionsRef.current;

	// It can take a while for the native dialog to appear
	window.setTimeout(() => {
	if (hasFocusRef.current && onIgnored) {
	// Browser failed to respond to the deep link
	onIgnored();
	}
	}, dialogTimeoutMs);

	// Trigger the deep link
	window.location.href = url;
	}, []);

	return { openUrl };
	}


	// usage
	import React, { useEffect } from "react";

	const DeepLinkEffectExample: React.FC = () => {
	const { openUrl } = useDeepLinker({
	onIgnored: () => {
	console.log("Browser ignored the deep link (no dialog, no redirect)");
	},
	onFallback: () => {
	console.log("Deep link failed; user returned to tab. Trigger fallback.");
	},
	onReturn: () => {
	console.log("User returned from native app");
	},
	});

	// Example boolean condition
	const shouldTriggerDeepLink = true; // Replace with real logic

	useEffect(() => {
	if (!shouldTriggerDeepLink) return;

	// Deep link you want to open
	const APP_URL = "fb://profile/240995729348595";

	// Trigger the link
	openUrl(APP_URL);

	}, [shouldTriggerDeepLink, openUrl]);

	return <div>Attempting deep link…</div>;
	};

	export default DeepLinkEffectExample;
No results found