네이버 지도 딥링크 — visibilitychange로 fallback 중복 막기

병원 위치를 네이버 지도 앱으로 열었다가 돌아오면, 앱 이동에 성공했는데도 웹 검색 fallback이 또 실행됐다. 브라우저는 "앱으로 잘 갔다"를 알려주지 않는다 — 그 빈틈을 visibilitychange로 메웠다.

문제

병원 검색에서 위치를 누르면 네이버 지도 앱으로 딥링크 이동하고, 앱이 없으면 웹 검색 fallback을 열도록 했다. 그런데 앱 이동에 성공한 뒤 브라우저로 복귀하면, 불필요하게 fallback(웹 검색)까지 실행됐다. 원래는 앱 이동 실패 시에만 fallback이 열려야 했다.

원인

딥링크는 "앱이 실제로 열렸는지"를 직접 알려주지 않는다. 그래서 일정 시간 뒤 fallback을 여는 흔한 방식은, 앱이 열렸어도 타이머가 그대로 돌아 fallback이 중복 실행되기 쉽다.

해결: visibilitychange로 앱 이동 감지

앱으로 이동하면 브라우저 탭이 백그라운드(hidden)가 된다. 이를 visibilitychange로 감지해, hidden이 되면 fallback 실행을 취소했다.

const openMap = (appUrl: string, fallbackUrl: string) => {
  const timer = setTimeout(() => {
    document.removeEventListener("visibilitychange", onHidden);
    window.location.href = fallbackUrl; // 앱이 안 열렸을 때만 웹 검색
  }, 1500);
 
  const onHidden = () => {
    if (document.visibilityState === "hidden") {
      clearTimeout(timer); // 앱으로 이동 성공 → fallback 취소
    }
  };
  document.addEventListener("visibilitychange", onHidden, { once: true });
 
  window.location.href = appUrl; // 앱 딥링크 시도
};

결과

• 앱 이동에 성공하면 fallback(웹 검색)이 열리지 않음
• 앱이 없을 때만 fallback 동작 → 불필요한 네이버 지도 웹 검색 제거