고양이 고씨 2025. 3. 13. 16:59

출처: https://velog.io/@hyeonzii/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%84%9C%EB%B9%84%EC%8A%A4%EC%9B%8C%EC%BB%A4-workbox

 

프론트엔드 개발자분과 이야기를 하다가 '서비스워커' 라는 단어가 나왔다. 프론트 단에서 사용하는 캐싱과 관련된 개념이었다.

서비스워커
브라우저와 웹 서버 사이의 중개자 역할을 하는 자바스크립트 파일로, 웹 애플리케이션에서 백그라운드에서 실행되며 페이지가 닫혀도 동작함

주요 기능
1. 오프라인 지원: 캐시된 데이터를 활용하여 인터넷 연결 없이도 제공 (PWA, Progressive Web App 제공)
2. 푸시 알림: 웹앱이 실행되지 않아도 푸시 알림 지원 가능
3. 백그라운드 동기화: 사용자가 네트워크가 없는 상태에서 요청을 보내고 연결이 복구되면 자동으로 요청을 재처리
4. 리소스 캐싱 및 최적화: 페이지의 이미지, CSS 등을 브라우저에 저장(캐시)하여 다음 방문 시 빠르게 로드

특징
일반적인 웹페이지 코드와 달리 별도의 백그라운드 스레드에서 실행되어 비동기적인 이벤트 기반 구조를 가짐

서비스워커를 사용하지 않는 경우
 - 동적 콘텐츠가 많아 실시간 업데이트가 중요한 경우
 - 캐시를 언제 갱신하고 무효화할지 등 유지보수 전략이 필요한 경우
 - 모든 브라우저에 동일하게 동작하지 않을 수 있으므로 주의

 

출처
ChatGPT 4o