msw service worker 활성화와 api 호출 시점에 대한 이슈

[baggy-1]

PR #5 에서 발생한 이슈입니다.

<이슈>

• 앱을 구동하였을 때, msw의 service worker가 즉시 활성화 되지 않고 일정 시간 후에 활성화 됩니다. 이 때, index(홈) 페이지에서 mock api를 호출하면 일시적으로 api 주소 404 에러가 발생합니다.
• 404 에러 발생 후, msw service worker가 활성화되면 동일한 api 주소로 mock data를 잘 가져옵니다.

<참고>

[thewoowon]

서비스 워커 생명주기에 따르면 서비스 워커가 활성화 되기 전에 로딩이 시작된 페이지는 서비스 워커가 제어할 수 없다고 하네요. 아마도 fetch 작업을 수행하는 스크립트가 이미 로드되어 파싱하고 실제 동작 까지 이어지는 과정에 서비스워커는 아직도 "Activated(활성화)" 상태가 아니였던 것 같네요. 새로고침을 한다면 잘 동작할 것 같습니다.

[thewoowon]

서비스워커 생명주기는 Installing -> Installed/Waiting -> Activating -> Activated 순서로 실행되며, 중간에 오류가 없다면 서비스워커는 next의 로딩 속도를 앞서지 못하는 것 같아서 발생한 오류같습니다.

서비스 워커의 activated 상태를 미리 확인할 수 있다면 좋을텐데 말이죠... 방법을 찾아 봐야겠네요.

[baggy-1]

<참고>
msw issue #73

해당 이슈를 살펴보니 현재 코드에서 서비스 워커가 실행 된 후에 돔을 렌더링하는 방식으로 해결하고 있습니다.
따라서, _app.tsx에 서비스 워커가 실행되기 전에는 로딩중이라는 돔을 보여주고 워커가 실행되면 기존 앱을 렌더링하는 방식으로 해결하였습니다. 추후, api가 완료되거나 프로덕트 환경에서는 제거하는 등, 조치가 필요해 보입니다.

<첨부>

[thewoowon]

열정적입니다! ㅎㅎㅎ 이슈는 해결 된 것 같아서 닫도록 하겠습니다.