What event to listen to for mobile tab switches

I currently have this piece of react code to listen to call reconnectedCallback.

import { useEffect, useState } from "react";
import usePrevious from "../usePrevious";

  const useTabVisible = (reconnectedCallback: () => void) => {
    const [visible, setVisible] = useState<boolean>();
    const prevVisible = usePrevious(visible);

    useEffect(() => {
      const handleVisibilityChange = () => {
        setVisible(document.visibilityState === "visible");
      };

      window.addEventListener("visibilitychange", handleVisibilityChange);
      return () => {
        window.removeEventListener("visibilitychange", handleVisibilityChange);
      };
    }, []);

    useEffect(() => {
      if (prevVisible === false && visible) {
        reconnectedCallback();
      }
    }, [prevVisible, reconnectedCallback, visible]);
  };

  export default useTabVisible;

This part of the code
window.addEventListener("visibilitychange", handleVisibilityChange);
listens to visibility changes. So when I switch to another tab of google chrome and come back to my app’s tab, reconnectedCallback is called.

However, I also want the app to be mobile friendly, so if i am on safari on my iphone on my site, I leave it on the site for a while, switch to a different app like Subway Surfer or Whatsapp or to my phone home screen, when I switch back, I want to call reconnectedCallback but this visibilitychange is not triggered.

What event would listen to inter-app switches for mobile, especially when the safari ? I tried focus and blur but they both dont work. And what is term called when a site has been left stale for some time already?