[Web] chrome tab 클릭으로 reload - visibilityState

역시 바쁜나날이다. 개발을 하며 생긴 이슈가 여럿이고 그 중에 아직 완벽하게 해결이 되지 않은 부분이 있는데

이슈는 이렇다

개발 후  deploy -> 하나의 컴퓨터에서 크롬에 dev도메인이 열려있는 상황 -> 배포 완료 되기 전 컴퓨터를 끄고 -> 배포 완료 후 reboot 이전 브라우저 복원 ->  blanck 된 화면

  

자 이걸 해결하기 위해 많은 시도를 했다. 개발자 도구에는 uncaught syntaxerror  요게 뜨고 chunck load 에러가 발생한다.

base tag 설정 meta cache-control 설정, pakcage json homepage 설정 등등 

진짜 많은 걸 해봤다..

코드 스플릿이 잘못 되었나? 아님 내 가 뭘 잘못 설정했나? .. 하.. 아무튼 nginx설정으로 어느정도 해결 된거 같은데 이건

다른 포스팅에서 다룬다.

 

무튼 이걸 해결하는 과정에서 뭔가 이상함을 느꼈다. 다른 사이트들은 탭을 켜놓고 다른 사이트 구경하다가 다시 돌아가면

refresh 가 이루어 지는데 이상하게 우리 사이트는 refresh가 거의 없는 것이다.

뭐가 문제지?  그냥 필자 생각으로는 meta tag 설정을 하면 expire가 결정되니 다시 reload할 것이라고 생각했다..

 

그래서 이것저것 방법을 찾고 고민하다가 그냥 탭을 클릭하면 reload하게 해주면 되잖아! 라는 생각이 들었다.

그래서 검색중  visibilitystate 라는 web api를 발견했다.

https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState

Document.visibilityState - Web APIs | MDN

document.visibilityState 는  document의 ㅎattr 로 유저가 앱을 바라보고 있는지 아니면 다른 화면을 보고있는지 정확히는 해당 탭에서 활동하고 있는지 여부를 확인해준다.

 

자 state가 hidden 이었다가 visible이 되면 refresh해주면 된다. 근데 문제는 언제 해줄 것이냐이다.

5분을 설정했는데 이건 너무 짧다. 일단 20분으로 설정하고 refresh를 적용했는데 아직 qa팀에서 이렇다할  문제제기는 받지 못했다.

아무튼 visible - hidden 이 값을 활용해서

sessionStorage에 hidden이 되는 순간 time 값을 저장 -> 다시 visible이 되었을때 time과 비교를 해서 20분이 지났으면 refresh

 

useEffect(() => {
    const revalidate = () => {
      // Check if the tab is visible
      if (document.visibilityState === 'visible') {
        const date = Date.now();
        const result = sessionStorage.getItem('hidden-browser');
        if (!result || +date > +result + 1200000) {
          window.location.reload();
        }
      } else if (document.visibilityState === 'hidden') {
        const date = Date.now();
        sessionStorage.setItem('hidden-browser', JSON.stringify(date));
      }
    };

    document.addEventListener('visibilitychange', revalidate);
  }, []);

현재 작성된 코드는 이러하다~

r그리고 실행시~!