본문으로 건너뛰기

9.5 Service Worker, WebSocket

Service worker와 WebSocket은 page와 backend 사이에 추가 event layer를 만듭니다. Request가 frame에서 시작됐다고 가정하거나 HTTP response만 기다리면 원인을 잘못 해석할 수 있습니다.

Playwright의 Service Worker 관측, 제어 API는 현재 Chromium 기반 browser에서만 지원됩니다. Firefox, WebKit project에서는 같은 범위가 검증된다고 가정하지 말고, 제품의 cross-browser fallback을 별도 시나리오로 다룹니다.

Service worker가 network를 가로채는 구조​

Page fetch → Service Worker fetch handler → cache 또는 network → Page

Service worker request는 context-level network event에서 관측할 수 있습니다. request.serviceWorker()가 존재하면 frame-owned request가 아닙니다.

context.on('request', request => {
  const owner = request.serviceWorker() ? 'service-worker' : 'frame';
  console.log(owner, request.method(), request.url());
});

Service worker request에서 request.frame()을 호출하면 예외가 날 수 있으므로 owner를 먼저 확인합니다.

결정성을 위해 block할 것인가​

export default defineConfig({
  use: { serviceWorkers: 'block' },
});

일반 network mocking test에서는 service worker를 block하면 route behavior가 예측 가능해질 수 있습니다. 그러나 실제 제품이 offline cache를 핵심 기능으로 사용한다면 별도 project에서 allow하고 service worker 자체를 검증해야 합니다.

WebSocket 관측​

page.on('websocket', socket => {
  console.log('open', socket.url());
  socket.on('framesent', event => console.log('>', event.payload));
  socket.on('framereceived', event => console.log('<', event.payload));
  socket.on('close', () => console.log('closed'));
});

Message ordering, reconnect, duplicate delivery, heartbeat timeout은 단순 “socket이 열렸다” assertion보다 중요합니다.

WebSocket routing​

관측을 넘어 message를 차단하거나 server를 대체하려면 socket이 만들어지기 전에 routeWebSocket()을 등록합니다.

await page.routeWebSocket('/ws', ws => {
  ws.onMessage(message => {
    if (message === 'ping') ws.send('pong');
  });
});

await page.goto('/realtime');

연결을 실제 server로 넘겨 양방향 traffic 일부만 바꾸려면 handler 안에서 ws.connectToServer()와 send/message routing API를 함께 사용합니다. 완전 mock과 실제 연결 수정은 test title에서 구분합니다.

Mock 경계​

  • HTTP bootstrap만 mock하고 real WebSocket을 사용할 것인가?
  • Server message를 route로 대체하면 client retry logic을 검증할 수 있는가?
  • Service worker cache hit와 network fallback을 별도 scenario로 나눴는가?
  • Chromium-only service worker behavior를 cross-browser requirement로 오해하지 않았는가?

실습 설계​

  1. Service worker를 block한 project와 allow한 project를 분리합니다.
  2. Request log에 owner를 attachment로 남깁니다.
  3. WebSocket open → message → close 순서를 수집합니다.
  4. Connection drop 후 reconnect UI를 검증합니다.
  5. Offline mode에서 cached shell과 stale data 표시를 구분합니다.

운영 주의​

Service worker 지원과 routing 제한은 browser별, version별 차이가 있을 수 있습니다. 이 영역의 test는 Playwright upgrade 때 release note와 공식 limitation을 다시 확인합니다.

참고: Service Workers, Network and WebSockets, WebSocketRoute API