서비스 워커에 대해 알아보고 Mock Response 만들기

카카오엔터테인먼트 FE 개발그룹이 PWA 사내 스터디에서 알게 된 서비스 워커로, 네트워크 호출을 가로채 Mock Response 를 내려주는 구현을 직접 만들어본 글이다. 서비스 워커의 생명주기와 fetch 이벤트 가로채기, MessageChannel 양방향 통신을 차례로 짚고 마지막에 조합한다.

핵심 포인트

서비스 워커는 특정 출처의 페이지를 제어하는 이벤트 기반 스크립트로, 자신이 제어하는 페이지의 이벤트를 수신하고 네트워크 요청을 가로채 수정할 수 있다.
가로챌 수 있는 이유는 브라우저와 네트워크 사이의 새로운 계층에 있기 때문이다. 브라우저와 독립적인 연결을 가지므로 오프라인이나 느린 네트워크에서 캐시된 리소스를 전달할 수 있다.
독립적이라는 특성 때문에 모든 탭을 닫아도 네트워크와 통신할 수 있고, 그래서 푸시 알림 수신과 백그라운드 데이터 최신화가 가능하다.
생명주기는 등록, 설치 중, 설치됨과 대기 중, 활성화 중, 활성화됨, 중복됨 순으로 이어진다. 활성화된 뒤에야 fetch 같은 동작 이벤트를 처리한다.
페이지와 서비스 워커는 직접 소통할 수 없어 메시지로 통신하며, postMessage 에 통신 채널을 넘기면 양방향 대화가 가능하다.

상세 정리

등록은 navigator.serviceWorker.register 로 하고, 자바스크립트 파일이 다운로드되고 파싱되면 설치 중 상태가 된다.
현재 활성화된 서비스 워커가 없으면 곧바로 활성화되고, 다른 서비스 워커가 앱을 제어 중이면 대기 상태에 머문다.
활성화 직전 activate 이벤트가 발생하며, 등록이나 설치에 실패하거나 새 버전으로 교체되면 중복됨 상태가 돼 앱에 아무 영향을 주지 못한다.
fetch 이벤트 핸들러에서는 요청의 HTTP method 와 headers, url 을 읽을 수 있고, 관찰에 그치지 않고 respondWith 로 새 응답을 만들어 돌려줄 수 있다.
원래 요청을 그대로 보낸 뒤 그 응답을 수정해 새 응답으로 만들어 브라우저에 넘기는 것도 가능하다.
페이지에서 서비스 워커로 메시지를 보내려면 navigator.serviceWorker.controller 로 제어 중인 워커를 가져와 postMessage 를 호출하고, 워커 쪽에서 message 이벤트를 받는다.
반대 방향은 clients 객체를 쓴다. matchAll 로 워커 범위 안의 열린 윈도우를 가져와 특정 클라이언트에 메시지를 보낸다.
MessageChannel 은 두 컵을 실로 이은 종이컵 전화기에 비유된다. 각자 port 로 말하고 이벤트 리스너로 듣는다.
Mock Response 구현 순서는 넷이다. 서비스 워커가 새 메시지 채널을 만들어 요청을 그대로 웹 앱에 전달하고, 웹 앱이 핸들러를 참조해 가짜 응답을 만들고, 그 응답을 채널로 돌려주고, 서비스 워커가 원래 요청의 응답을 바꿔치기한다.
통신하려면 활성 클라이언트가 있어야 하므로 클라이언트 id 를 먼저 저장해둔다. 예제는 탭 하나만 지원하며 여러 탭을 쓰려면 Set 으로 여러 id 를 담아야 한다.
fetch 핸들러는 메시지를 전달할 클라이언트가 없으면 요청을 그대로 반환하고, 있으면 원본 요청 정보를 넘긴 뒤 응답 타입에 따라 원본과 Mock 중 무엇을 돌려줄지 결정한다.
클라이언트에 해당 요청의 핸들러가 없으면 요청을 그대로 흘려보내고, 핸들러가 실패를 의도하면 error 를 throw 해 요청을 실패시킨다.
요청 body 는 request.text 로 문자열로 만들어 넘기고, 채널 로직은 Promise 로 감싸 응답을 받은 뒤 다음 처리가 이어지게 했다.
웹 앱 쪽 핸들러는 요청 url 을 키로 상태 코드와 응답 본문을 관리하는 객체를 두고, 서비스 워커에서 온 메시지의 url 에 맞는 핸들러를 찾아 응답을 만들어 돌려준다.

왜 읽나MSW 같은 라이브러리가 무슨 원리로 요청을 가로채는지 궁금했던 프론트엔드 개발자에게, 서비스 워커 생명주기부터 직접 조립해보게 하는 학습 기록.

카카오 엔터테인먼트 FE 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

서비스 워커에 대해 알아보고 Mock Response 만들기

이 글과 비슷한

토스는 어떻게 광고 속에 게임을 넣었을까

RxJS로 우아하게 사이드 이펙트 통제하기

항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다