Service Worker 기초 및 활용 (Korean) W3C HTML5 대한민국 관심그룹 (KIG) 2015년 2월 회의 발표자료

1. Service Workers
기초 및 활용

2. Jungkee Song
Github: https://github.com/jungkees
Twitter: @jungkees
Google+: +JungkeeSong
Facebook: https://www.facebook.com/jungkees

3. Service Worker 가 해결하는 문제들
• 웹의 오프라인 사용성
- 오프라인 우선 (Offline-first)
- 개발자가 원하는대로!
개발자가 프로그래밍을 통하여 컨트롤 하는 Cache
개발자가 직접 작성하는 HTTP request 프록시
• 백그라운드 프로세싱
- 브라우저가 실행 중이지 않을 때도 이벤트 처리를 하고 싶다!
- Push notification, System alarm, BackgroundSync …

4. 표준개발 현황
W3C Working Draft
[ED] https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html
[Github] https://github.com/slightlyoff/ServiceWorker

5. 이벤트 기반으로 동작하는 Worker
Service Worker는 브라우저에 의해 언제든지 종료 될 수 있음
fetch event
Navigation/Resource request
onfetch
Page
SW
Cache
self.caches.match(url)
Promise<response>
e.respondWith
(Promise<response>)
Page Page
Navigation/Resource request
fetch event
e.respondWith
(Promise<response>)

6. 개발자가 프로그래밍으로 컨트롤 하는 Cache
Cache / CacheStorage 오프젝트 활용
Cache 오브젝트 메소드 참조
caches.open(“myCache”).then(function(cache) { … })

7. 설계 및 동작 원리
• Same origin 기반으로 동작
• URL scope 이 registration 을 식별하는 key가 됨
• Client request 시 matching 되는 SW 에 의해 control 시작 됨
• Registration 은 installing / waiting / active worker를 가짐
• Lifecycle 이벤트: install, activate
• Functional 이벤트: fetch, push, sync 등
• Document 또는 Worker 가 Client 가 됨
• Client 가 register 를 요청하여 브라우저에 install 됨
• Resource request 시 선택된 SW 에 의해 control 됨
• HTTPS 필수

8. Client request
Client 가 client request 시 SW registration 을 선택함
onfetch
sw.js
Cache
self.caches.match(url)
Promise<response>
e.respondWith
(Promise<response>)
“/” /sw.js
[ Registration map ]
Scope Script URL
“/foo/” /foo/sw.js
Page
Navigate to https://example.com/index.html
fetch event
Scope matching
Run SW

9. Resource request
Control 되고 있는 client 는 resource request 시 해당 SW를 사용함
onfetch
sw.js
Cache
self.caches.match(url)
Promise<response>
e.respondWith
(Promise<response>)
“/” /sw.js
[ Registration map ]
Scope Script URL
“/foo/” /foo/sw.js
Page
Fetch “https://example.com/img/flower.png
fetch event
Control
Run SW

10. Registration
Client 에서 수행
// scope 은 default로 script의 위치와 동일한 url로 설정 됨
navigator.serviceWorker.register("/assets/v1/serviceworker.js").then(
function(registration) {
console.log("success!");
registration.installing.postMessage(“Howdy from your installing page.");
}, function(why) {
console.error("Installing the worker failed!", why);
});
“/assets/v1/” /assets/v1/serviceworker.js
[ Registration map ]
Scope Script URL

11. Registration
Client 에서 수행
[ Registration map ]
Scope Script URL
navigator.serviceWorker.register(“/sw.js”, { scope: “/bar/” });
“/bar/” /sw.js
“/foo/” /foo/sw.js
“/bar/” /bar/sw.js
navigator.serviceWorker.register("/foo/sw.js", { scope: “/foo/” });
navigator.serviceWorker.register("/bar/sw.js");

12. Service Worker 상태 변화
Service Worker 생명주기
HTML5 Rocks Introduction to Service Worker 내용 중
서비스워커 생명주기 단락을 참조해 보자

13. Install 과정: oninstall / onactivate
• 브라우저가 SW에 install 이벤트를 발생 시켜줌
- 개발자가 App에 필요한 resource를 미리 Caching할 수 있는 시간
• Event handler 안에서 event.waitUntil(promise) 를 활용하
여 promise를 통해 추상화 된 해당 동작이 resolve될 때까지
SW의 lifetime을 늘일 수 있음
• 브라우저가 SW에 activate 이벤트를 발생 시켜줌
- 개발자가 갱신이 필요한 resource를 정리할 수 있는 시간

14. oninstall
SW script fetch및 실행이 성공적으로 이루어 지면
install 이벤트가 service worker 에 dispatch 됨
Jake Archibald’s “The offline cookbook” 중
1-1/1-2 On install 참조

15. onactivate
waiting worker 가 activation 될 조건이 만족될 때
activate 이벤트가 service worker 에 dispatch 됨
Jake Archibald’s “The offline cookbook” 중
1-3. On activate 참조

16. Fetch 이벤트 핸들링: onfetch
Client / resource request 발생시 마다 fetch 이벤트
가 Service Worker 에 dispatch 됨
Jake Archibald’s “The offline cookbook” 중
1-6. Stale-while-revalidate 참조

17. Service Worker Update 발생 경로
• navigator.serviceWorker.register() API 명시적 호출
• 브라우저에 의한 자동 Update
• 매 client request 처리 시
• register.update() API의 명시적 호출

18. Update 동작
모든 client가 unload 되기 전에는 기존 active worker를 그대로 사용
onfetch
sw-v2
Cache
self.caches.match(url)
Promise<response>
e.respondWith
(Promise<response>)
“/” /sw-v1
[ Registration map ]
Scope active
fetch event
-
waiting
Page
sw-v1
Update
Install
Page
sw-v1
/sw-v2 /sw-v2-
Page
sw-v2
Fetch “https://example.com/img/flower.png
Run SW

19. 브라우저 지원 현황
Chrome 40+
Firefox nightly
Under consideration
40에서는 Cache, Client 지원하지 않음
IE
Partial under flag
about:config > dom.serviceWorkers.enabled
Jake’s “Is ServiceWorker ready?”
Stay alerted!
Cache polyfill 활용 가능

20. 참고자료
Service Worker - first draft published - Jake Archibald
Specification
Github’s explainer
Github’s implementation considerations
Introduction to Service Worker - Matt Gaunt (번역: 도창욱)
The offline cookbook - Jake Archibald
Push Notifications & Service Worker