프론트엔드
서비스 워커에 대해 알아보고 Mock Response 만들기
두줄요약
서비스 워커의 생명주기와 fetch 가로채기, 페이지 통신 방식을 소개했습니다.\nMessageChannel로 요청을 전달해 Mock 응답·오류·원본 통과를 제어하는 방법을 설명했습니다.
구조와 흐름
- 브라우저와 네트워크 사이에서 페이지를 제어하는 이벤트 기반 JavaScript 워커
- Installing·waiting·activating·activated·redundant 상태로 이어지는 생명주기
- 오프라인 리소스 제공, 캐싱, 푸시 알림, 백그라운드 동기화 기반
해결 방법
navigator.serviceWorker.register로 워커 등록 후fetch이벤트 수신respondWith로 특정 URL의 응답을 새Response객체로 대체하거나 원본 응답 수정- 페이지와 워커 사이의
postMessage,MessageChannel기반 양방향 통신
적용해볼 점
- 워커가 요청 정보를 페이지의 handler에 전달하고 Mock 응답·네트워크 오류·원본 요청 통과를 분기하는 구조
- 단일 탭 예제의 클라이언트 ID 관리와 다중 탭용 클라이언트 집합 관리 필요
- localStorage 기반 handler 설정으로 앱 실행 중 동적 응답 제어 가능성
