이유
mock service worker(msw) 쓰면서 대략적으로 알고 있는 서비스 워커를 보기 위함
서비스 워커 소개
설명은 mdn https://developer.mozilla.org/ko/docs/Web/API/Service_Worker_API
- 프록시 서버 역활
- 네트워크를 가로채서 추가 액션 가능, 오프라인에서 네트워크 흉내
- 푸시 알람, 백그라운드 동기화 api 등의 접근도 제공
개념
- 이벤트 기반 워커
- 탐색과 리소스를 가로채서 수정하고 캐싱할 수 있음
- 서비스워커는 돔 조작 불가능, 컨텍스트에 동작하기 떄문
- 웹 js엔진과 별개로, 다른 스레드에서 동작, 온전히 비동기적으로 작동함
- 비동기라서 xhr, 웹 저장소에선 사용을 못함
- https에서만 동작함, 보안에 취약해서
사용법
- 등록
- ServiceWorkerContainer.register() (en-US) 메서드를 사용해 처음 등록
- 다운로드
- 처음 접근 시 다운로드 시작됨
- 탐색 발생, 서비스 워커 이벤트가 발생했는데 24시간 내 다운하지 않으면 업데이트 됨
- 설치
- 기존 워커가 없으면 설치함
- 설치 후 대기중 워커로 됨
- 이전 버전의 서비스 워커가 모두 닫힌 경우 활성화 됨
- 모두 닫히면 활성화로 넘어감
- 활성화
- ServiceWorkerGlobalScope.skipWaiting()로 waiting상태를 active로 바꿀 수 있음
- 다른 모든 active 클라이언트들에게 즉시 적용되도록 하기 위해 Clients.claim() 과 이 메소드를 사용한다.
서비스 워커에 다양한 사용법
- 백그라운드 데이터 동기화.
- 다른 출처에서의 리소스 요청을 응답.
- 위치정보, 자이로 센서 등 계산에 높은 비용이 들어가는 다수의 페이지에서 함께 사용할 수 있도록 데이터 업데이트를 중앙화.
- 개발 목적으로서 CoffeeScript, Less, CJS/AMD 모듈 등의 의존성 관리와 컴파일.
- 백그라운드 서비스 훅.
- 특정 URL 패턴에 기반한 사용자 지정 템플릿 제공.
- 성능 향상. 사진 앨범의 다음 사진 몇 장처럼, 사용자가 필요로 할 것으로 생각되는 리소스의 프리페칭 등.
용띠? 웹 워커
참조
웹 워커는 뭐지?
웹 워커는 웹 컨텐츠를 위해서 백그라운드 스레드에서 스크립트를 실행할 간편한 방법을 제공- Woker로 생성된 객체, 이름있는 js 파일을 실행함.
- window와 다른 컨텍스트에서 실행됨
- 최초 실행됨 DedicatedWorkerGlobalScope
- 공유되는 SharedWorkerGlobalScope가 있음
예제
- Create a generic "asynchronous eval()"
- Advanced passing JSON Data and creating a switching system
ㅎㅎ