서비스 워커(Service Worker)

 

문제4) 서비스 워커(Service Worker)에 대하여 다음을 설명하시오.

가. 서비스 워커의 개념

나. 구현 기술

다. 수명 주기

라. 활용 분야

 

답)

 

 

1. PWA (Progressive Web App) 핵심핵심, 서비스 워커의 등장배경 및 개념

개념	브라우저가 백그라운드에서 웹페이지와 별개로 실행하는 스크립트로 서버간 미들웨어 역할을 수행하는 기술
등장배경	모바일 생태계 진화로 다양한 플랫폼과 네이티브 앱이 등장했으나 웹의 확장상을 지원하지 않는 단점 발생 PWA의 핵심 기술인 서비스 워커를 통해 백그라운드 동기화, 푸쉬 알람, 캐싱을 통해 네이티브 앱과 하이브리드 앱의 강점 융합 및 확장성 이슈 해결
브라우저에 상관없이 PWA 작업 수행 시, 서비스워커 지원여부 확인 후 모듈을 생성할 워크 프리캐시필요

 

2. 서비스 워커의 구성도 및 구현 기술

가. 서비스 워커의 구성도

오프라인 상태에서도 웹어플리케이션 서비스가 구현되도록구현되도록, 서비스워커가 사용자 요청 확인

 

나. 서비스 워커 구현 기술

구분	구현 기술	설명
Network 측면	HTTPs	어떤 request 든 Intercept 할 수 있기 때문에 secure deplory 환경이 요구
	Proxy	프로그램 가능한 네트워크 프록시 페이지의 네트워크 요청 처리 방법을 제어
Language 측면	Promise	ES6 Promise 를 광범위하게 사용하여 작성
	JavaScript	DOM 에 직접 엑세스 불가 제어 대상 페이지와 통신 위해 postMessage 인터페이스 사용
Process 측면	Single Thread	독립된 single thread 로 작동
	Decoupling	등록 후 html 파알과 Decoupling 되어 독립적으로 구동 해당 Domain 의 모든 Page에 해당 작동 Scope 를 갖음
	Background	index.html 에서 load 되는 app.js로 통해 등록 bowser가 꺼진 상태에서도 동작, 모든 event 를 listening 가능
Localhost 환경이 아 닌 경우경우, 안정성확보를 위해 서버 배포 시 https 등록 필요

 

3. 서비스 워커의 수명주기

가. 서비스 워커 수명주기 흐름도

웹페이지와는 별개의 생명주기를 가지므로 오프라인에서도 유연한 서비스 구현 가능

 

나. 서비스 워커의 수명주기

수명 주기 상태	설명	이벤트
Installing	다운로드 및 등록 단계, Service worker 가 존재하는 사이 또는 페이지에 처음 접속하면 다운로드 후 서비스 워커 URL 을 지정해서 등록 Promise 실패 시 전체 설치가 실패로 간주되어 redundant 상태 처리됨	Install
Installed/waiting	등록에 성공하면 installed 상태가 되어, 다른 동작 중인 서비스 워커가 앱을 제어하지 않는 다면 바로 Activating 상태로 이동 다른 서비스 워커가 앱을 통제하는 경우 waiting 상태로 유지	-
Activating	서비스 워커가 활성화되어 앱 제어하기 전에 activate 이벤트가 트리거 됨 Event Handler안에서 event waithintil(promise)를 활용하여 promise를 통해 추상화된 해당 동작이 resolve 될 때까지 SW의 lifetime 을 느릴 수 있음	Activate
Activated	서비스 워커가 활성화되면 페이지를 제어하고 기능 이벤트 수신 가능 서비스 워커는 페이지를 로드하기 전에만 페이지 제어. 로드 후 제어 불가	fetch sync push
Redundant	등록 또는 설치 중 실패한 경우 새로운 서비스 워커가 활성화된 경우	-
둘 이상의 상이한 버전의 서비스 워커가 동시 수행 할 경우경우, 생명주기 충돌로 오류발생 또는 데이터 손실 발생 가능

 

4. 서비스 워커 활용 분야

활용 분야	활용 사례	활용 사례 설명
Caching strategies	Network of Cache	최신 컨텐츠를 검색하려고 시도하지만 네트워크가 너무 많이 걸리면 대신 캐시 된 컨텐츠를 제공
	Cache only	서비스 워커가 항상 fetch 시 응답하는 방식
	Cache, update and refresh	캐시 통한 빠른 응답 후 네트워크로부터의 응답 기반으로 캐시를 갱신 갱신 후 UI는 자동으로 갱신
Web Push	Push and Retrieve Payload	푸시 알림을 보내고 페이로드를 검색하는 방식
	Push Payload	푸시 알림과 페이로드를 같이 보내는 방식 다양한 형식으로 메시지 추출 가능
	Push Tag	TAG 를 이용해서 이전 Push 알림을 새 Push 알림으로 변경 사용자에게 최신 정보만을 표시하거나 단일 Push 알림으로 축소하는 경우
	Push Clients	사용자 푸시 이벤트에서 생성된 Push 알림을 클릭하면 서비스 워커가 클라이언트 통제 앱의 텝에 초점을 맞추거나 닫은 경우 다시 열기 등 가능
Offline	Offline Fallback	사용자가 오프라인일 때 캐시에서 컨텐츠를 제공
	Local Download	사용자가 클라이언트에서 생성한 파일을 다운로드 하도록 함
	Virtual Server	원격 서버처럼 서비스 워커를 작동시켜서 응답을 받는 식으로 구현
	Load Balancer	컨텐츠 제공자를 동적으로 선택하기 위함 네트워크 로직을 서비스 워커에 포함
프로세스 동작 중 설치 실패 알림기능 부족, 인증 정보 부재, CORS 미지원 리소스에서 URL 로드 불가능 등의 해결과제를 고려한 설계 또는 예외 처리가 필요함

---

 

공감과 댓글은 아이티신비에게 큰 힘이 됩니다.

블로그 글이 유용하다면 블로그를 구독해주세요.♥