PWA의 핵심, 서비스 워커가 뭘까?

목차

· 서비스 워커가 뭘까?

· 서비스 워커와 웹 워커의 공통점

· 서비스 워커와 웹 워커의 차이점

---

서비스 워커가 뭘까?

서비스 워커는 웹 워커의 일종이다. 서비스 워커와 웹 워커는 매우 유사한 인터페이스를 갖고 있으나, 각각의 의도와 기능은 매우 다르며 공통점과 차이점은 다음과 같다.

웹 워커란?
싱글 스레드 기반으로 작동하는 자바스크립트는 싱글 스레드의 단점을 보완하기 위해 코드들이 비동기로 실행된다. 그러나 API 비동기 실행이 너무 많이 쌓이게 되면 모든 작업의 실행 속도가 느려질 수 있다. 이 문제를 해결하기 위해 나온 것이 바로 워커이다. 웹 워커 API가 멀티 스레딩을 지원하게 되어 워커를 이용하면 워커에서 작성된 스크립트는 메인 스레드에서 분기되어 독립된 스레드로 실행되기 때문에 메모리 자원을 효율적으로 사용할 수 있다.

서비스 워커와 웹 워커의 공통점

· 별도의 워커 스레드에서 동작

   · 직접적인 DOM 접근 및 조작 불가 (웹 워커), 별도의 실행 컨텍스트를 가진 워커 스레드에서 동작하므로 DOM에 직접 접근할 수 없다.

· 클라이언트와 postMessage API를 사용하여 통신한다.

서비스 워커와 웹 워커의 차이점

서비스 워커

· 서비스 워커는 네트워크 요청을 중간에 가로채서 자신이 제어하는 캐시의 리소스를 교체할 수 있으므로 마치 프록시 서버처럼 작동한다고 볼 수 있다. 즉, 웹 어플리케이션에 오프라인 기능을 제공한다. 

· 브라우저가 닫혀 있더라도 백그라운드에서 작동할 수 있다.

· 웹 브라우저의 네트워크 요청을 가로채어 조작 가능하다.

· 참고로 서비스 워커는 보안 상의 이유로 HTTPS에서만 동작한다. 네트워크 요청을 수정할 수 있다는 점에서 중간자 공격에 굉장히 취약하기 때문이다.

· 여러 탭에서 사용할 수 있으며, 모든 탭이 닫힌다고 하더라도 계속 활성화 되어있다.

웹 워커

· 자바스크립트는 싱글 스레드(메인 스레드) 기반으로 동작하기 때문에 오랜 시간이 소요되는 복잡한 작업을 메인 스레드에서 수행할 경우, 웹 페이지가 멈추거나 버벅이는 문제가 발생할 수 있다. 따라서 이러한 복잡한 작업들은 웹 워커를 통해 메인 스레드가 아닌 별도의 워커 스레드에서 연산하도록 구현하여 메인 스레드의 부담을 주이고 성능 하락을 방지한다. 이 처럼 UI의 응답성을 방해하지 않으면서 많은 연산 작업을 수행하기 위해 사용된다.

· 웹 워커의 작동은 하나의 탭으로 제한이 된다.

---

레퍼런스

[js]웹 워커(Web Worker)에 대해서

PWA의 핵심, 서비스 워커란?

Web Worker 사용하기

Can I use... Support tables for HTML5, CSS3, etc