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?