msw serviceWorker가 비정상 종료될 때 확인해야 할 것

문제 상황

강의실 모바일 개선 중, MSW Mocking을 이용하여 API response를 모킹해 개발을 진행중이였음

강의 자료 다운로드 버튼 클릭 시, 그 이후에 동작하는 모든 request가 모킹되지 않았음

발생 원인

1. anchor tag를 누름으로써, window에 onbeforeunload 이벤트가 발생함.

2. MSW server 초기 세팅 코드에 해당 이벤트가 울릴 경우, 등록된 클라이언트를 close하는 이벤트 발생
   해당 코드

3. MSW 로직 상, 활성화되고 등록되어 있는 클라이언트는 1개만 존재하는데, 해당 클라이언트가 지워짐.

4. 지우는 과정에서 남아있는 클라이언트가 없을 경우, serviceWorker를 종료시킴
   해당 코드
   다음과 같은 과정 이후에 서비스 워커가 제거된 모습
   

5. 이후의 모든 요청이 모킹 되지 않음

해결법

강의실에 있는 강의 자료 다운로드 버튼에 target="_black" 속성 추가.
해당 속성을 넣을 경우 현재 브라우저에서 href로 이동하는게 아닌, 새 창을 띄우고 그 창에서 href로 접근하기 때문에 onbeforeunload 이벤트가 울리지 않음.

재발 방지책

추후 MSW 사용 시, anchor tag같은 페이지 이동 액션 사용에 유의해야 한다.