웹워커와 서비스워커

들어가기 앞서

Drag&Drop 강의를 듣던 중 알게 된 웹워커를 공부하다 보니, 서비스워커라는 매력적인 API도 알게되어 스터디 겸 정리해보았다. 웹워커는 무거운 작업을 백그라운드에서 실행하기 위해, 서비스워커는 PWA(프로그레시브웹앱)을 위해 주로 사용되고 있다. 다만 웹워커와 서비스워커는 생각보다 자주 사용되지는 않아서인지 최근 사례나 자료를 구하지 못해, 이러한 것이 있구나 정도로 알고 넘어가면 좋을 것 같다.

웹워커

• 무거운 작업을 실행할 때 별도의 백그라운드 스레드에서 실행하는 기술이다.

• 브라우저가 백그라운드에서 실행하는 스크립트로 웹페이지 또는 사용자의 인터랙션이 필요하지 않은 기능만 제공하며, 웹 페이지와 별개로 존재하므로 DOM이나 window요소에 접근할 수 없다.

• 웹 워커는 주로 UI block을 피하기 위해 무거운 연산이 소요되는 작업(AI, games, image encoding, etc)을 보조 스레드에서 실행하기 위해 사용된다.

서비스워커

• 서비스워커는 브라우저가 백그라운드에서 실행하는 스크립트로, 웹 페이지와 별개로 존재하므로 DOM이나 window요소에 접근할 수 없다는 점에서 백워커와 공통점을 가진다.

• Fetch와 같은 네트워크 요청을 탈취하거나, push와 같은 Push API를 받을 수 있다.

• 웹 페이지 life cycle을 따르지 않으며, 웹페이지가 닫히더라도 자동으로 비활성화되지 않는다

• 단일 서비스 워커는 등록된 scope내에서 모든 활성 탭을 제어한다.

위의 나열한 백워커와의 공통점을 제외한 서비스워커의 특징으로 서비스워커는 캐시와 상호작용, 푸쉬알림, 백그라운드 동기화 등의 기능을 가질 수 있으며, 이를 통해 서비스워커는 PWA 혹은 오프라인 경험을 제공하는 것에 활용할 수 있다.

서비스워커의 구조

서비스워커의 구조를 아주 단순히 표현하자면 아래와 같은 구조를 가진다.

• 등록: 서비스워커 설치를 위해 페이지에 자바스크립트를 이용하여 등록
• 설치: 서비스워커가 제어하는 페이지에 접근하면 브라우저가 백그라운드에서 서비스워커를 설치
• 활성화: 서비스워커가 활성(activation) 이벤트를 받기 시작
• 기능제어: 서비스워커가 페이지를 제어

서비스워커 사용시 주의할 점

• 대부분의 API의 주의할 점이 그러하듯, 지원하지 않는 브라우저 존재하며 사파리가 대표적으로 지원하고 있지 않다.
• 기본적인 인증 정보가 없으며, 이를 보완하기 위해 HTTPS 인증서가 있어야만 사용할 수 있도록 되어있다.
• CORS를 지원하지 않는 리소스에서는 URL을 가져올 수 없다.
• 설치 실패시 알림 기능이 부족하기 때문에 알림 기능을 위해서는 추가적인 작업이 필요하다.