Web Workers API 개념

Service Worker API

Web에서 흔히 들어볼 수 있는 역할인데,

→ 웹 응용 프로그램, 브라우저, 네트워크 사이의 프록시 역할을 한다. 의도는 여러가지 있지만, 그 중 오프라인 경험, 네트워크 요청 인터셉트, 서버 업데이트가 가능하다. 조사하게된 계기인 푸시 알림, 백그라운드 동기화 API로의 접근도 제공한다고 한다.

*주의사항

지원 브라우저의 보안 컨텍스트(HTTPS)에서만 사용할 수 있음. (+ localhost, 127.0.0.1)

---

서비스 워커의 개념

Javascript 파일의 형태를 갖고 있으며 출처와 경로에 대해 등록하는 이벤트 기반 워커다. (여기서 말하는 Worker는 Backend 에서 작업하는 Worker와 다르다. 처음에 같은건 줄 앎 ㅎㅎ..) 아래 표는 Web Worker, Service Worker, Backend Worker를 비교한 표이다. (Web Worker 내에 Service Worker가 있다고 봐도 무방하다, Web API를 활용한건 동일하지만 기능이 명확히 나뉨)

구분 Web Worker Service Worker Backend Worker

실행 위치	브라우저	브라우저	서버
목적	계산	푸시/캐시	백그라운드 작업
DOM 접근	X	X	없음
Push 알림	X	O	서버 발송
Queue	X	X	O
Cron	X	X	O
Email 발송	X	X	O
이미지 처리	O	X	O
AI 처리	O	X	O
네트워크 가로채기	X	O	X

 

mdn에서는 Web Worker를 두가지로 나누고 있다.

 

DedicatedWorkerGlobalScope : 전용 워커 객체(단일 스크립트 워커)

SharedWorkerGlobalScope : 공유 워커 객체(다중 스크립트 공유 워커)

 

공유 워커의 경우 Chrome(Google)에서는 거의 지원하지 않아 mdn에서는 미사용으로 표기될 정도이며 다른 브라우저에서도 사용되지 않는다. GPT에게 물어보니 불편해서라기 보다는 각 용도에 맞는 기술들이 나오면서 자연스럽게 사용률이 줄었다.

 

간단하게 유래를 살펴보자면, 브라우저는 기본 철학이 탭 = 서로 완전히 격리된 프로세스 이다. 다들 탭 하나가 멈춰도 다른 탭은 정상 구동 되는 모습을 볼 수 있지 않은가..!

이걸 브라우저 프로세스 격리 (Site Isolation / Multi-process architecture) 라고 한다.

// 브라우저 구조
Chrome Browser
 ├─ Tab 1 → Process 1
 ├─ Tab 2 → Process 2
 ├─ Tab 3 → Process 3
 └─ GPU Process

만약 탭들이 메모리를 공유한다고 가정하면, 은행 앱을 킨 동시에 다른 탭에서 악성 코드 감염이 되었다면 속수무책으로 당할 수 밖에 없다. 따라서

• 탭 간 메모리 공유 금지
• 탭 간 JS 접근 금지
• 탭 간 DOM 접근 금지

를 따른다.

 

물론 장점만 있는 것은 아니다.

// WebSocket 연결 시 불필요한 리소스 발생
Tab A → WebSocket 연결
Tab B → WebSocket 연결
Tab C → WebSocket 연결

// Tab A와 Tab B의 로그인 상태 구분 불가

위와 같은 상황들 때문에

 

탭 간 통신	BroadcastChannel
캐시 공유	Service Worker
로그인 공유	Cookie / Storage
데이터 공유	IndexedDB
실시간	WebSocket
알림	Service Worker

이와 같은 기술들이 개발되었다. 그러다보니 필요성이 떨어진 SharedWorker 는 점차 안쓰이게 되었다고 한다.

---

참고링크

Service Worker API - Web API | MDN