이전 글에서 Vue To FCM을 하던 도중 서비스 워커에 대해서 궁금증이 생겨 공부해봤습니다.
서비스 워커(Service Worker)는 웹 애플리케이션과 네트워크 사이에서 동작하는 자바스크립트 기반의 백그라운드 스크립트입니다.
브라우저가 백그라운드에서 실행하며, 웹 페이지가 열려 있지 않아도 특정 작업(예: 푸시 알림, 캐싱, 백그라운드 동기화 등)을 수행할 수 있습니다.
핵심 개념
서비스 워커는 브라우저와 서버 사이의 중간 계층처럼 동작합니다.
HTTP 요청을 가로채 캐시된 데이터를 반환하거나, 네트워크 요청을 조작할 수도 있습니다.
간단히 말해:
“네트워크 요청을 가로채고, 캐시를 활용하며, 오프라인 환경에서도 작동하게 하는 브라우저 내부의 작은 서버”
주요 기능
| 기능 | 설명 |
|---|---|
| 오프라인 지원 | 네트워크가 없어도 캐시된 데이터를 보여줍니다. |
| 푸시 알림 (Push Notification) | FCM 등과 연동해 백그라운드 푸시 알림을 수신합니다. |
| 백그라운드 동기화 | 네트워크가 복구되었을 때 자동으로 데이터를 동기화합니다. |
| 네트워크 요청 제어 | fetch 이벤트를 통해 요청과 응답을 가로채 조작할 수 있습니다. |
서비스 워커의 동작 구조
- 등록 (register) – 브라우저가 서비스 워커 파일(
service-worker.js)을 등록 - 설치 (install) – 초기 캐시 설정 등 설치 작업 수행
- 활성화 (activate) – 새로운 버전의 서비스 워커가 기존 것을 대체
- 이벤트 대기 (idle) – 이후
fetch,push등 이벤트를 대기하며 동작
OSI 7계층에서의 위치
서비스 워커는 OSI 7계층 중 애플리케이션 계층(7계층)에 해당합니다.
이유는 다음과 같습니다:
- 서비스 워커는 HTTP 요청을 가로채고 처리하는 로직을 다루며,
네트워크 전송(TCP/UDP) 수준이 아닌 애플리케이션 수준의 데이터 흐름을 제어합니다. - 즉, 전송 계층 이하의 물리적 통신이 아니라, 웹 앱과 브라우저 간의 상호작용(애플리케이션 로직)을 담당합니다.
✅ 정리:
Service Worker = 브라우저 애플리케이션 계층(7계층)에서 동작하는 백그라운드 엔진
한 줄 요약
서비스 워커는 오프라인, 캐시, 푸시 알림 등 웹의 확장 기능을 담당하는 7계층 애플리케이션 엔진이다.
참고
운도 실력