GDG Korea 7월 정기 밋업 발표 자료

1. Service Worker 101
@cwdoh, GDE for Web

2. TOPIC!
워커에 대한 소개
서비스 워커는 무엇인가?
서비스 워커로 무엇을 할 수 있는가?
약간의 코드
2

3. Web Worker
3

4. 다음 코드의 실행 결과는 무엇일까요?
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
console.log("loop start");
var count = 0;
while (count < 1000000) {
count ++;
}
console.log("loop end");
console.log('script end');
4

5. 예상대로...
script start
loop start
loop end
script end
setTimeout
5

6. 자바스크립트 실행은 UI Thread에서
당신의 렌더러는 당신이 화장실에서 나오기만을 기다리고 있ㅅ...
6

7. W3C에서 말하는 Web Worker
메인 페이지와 병렬 스크립트를 실행하는 백그라운드 워커를 생성하는 API
메세지 전송 기반의 Thread와 유사한 동작을 가능하게 한다.
7

8. 즉, 병렬 스크립트 실행을 위한 API
백그라운드 처리
thread‒like
메세지 전달
8

9. 일반적 규칙
UI 스레드에서 분리되어 실행하여야 하므로
DOM에 대한 직접 접근/조작 불가
자체적인 글로벌 스코프
일부 속성과 API만 허가
9

10. 예제
메세지 전달에 기반한 Thread‒like 동작
fetch('my‐encryped‐doc.txt').then(function(res) {
// spawn worker
var worker = new Worker('decorder.js');
worker.onmessage = function(e) {
console.log('Decoded: ' + e.data);
};
// decode blob data with worker
worker.postMessage([res.clone().blob()]);
});
decorder.js
onmessage = function(e) {
// decode...
postMessage(decodedResult);
};
10

11. Shared Worker
11

12. MDN: Shared Worker
여러 윈도우, iframe 혹은 워커와 같은 다수의 브라우징 컨텍스트에서 접근할 수 있는 특정한 종
류의 워커
Dedicated worker와는 다른 인터페이스를 구현하고 있고, SharedWorkerGlobalScope라
고 하는 별도의 글로벌 스코프를 가진다..
12

13. Shared Worker는 특정한 종류의 워커
다수의 브라우징 컨텍스트에서 접근가능
Dedicated Worker와는 별개의 인터페이스
별도의 글로벌 스코프
13

14. Service Worker
14

15. W3C Specification에서 말하길...
15

16. 오프라인일 경우에도 웹 어플리케이션의 기동을 가능하도록 하는 훅(Hook)을 포함하여, 어플리
케이션으로 하여금 지속적인 백그라운드 프로세싱의 장점을 취하도록 하는 방법
16

17. 이러한 시스템의 핵심은 문서나 다른 소스들로부터 발생되는 이벤트에 대응하는 이벤트 드리븐 웹
워커이다. 이를 위해 설치, 버전 및 업그레이드를 관리하기 위한 시스템이 제공된다.
17

18. 서비스워커는 다른 표준규격들이 확장가능하도록 웹 플랫폼에서 이벤트 드리븐 기반의 백그라운
드 처리를 위한 보편적인 진입점을 제공한다.
18

19. 서비스 워커 역시 또 다른 종류의 워커
지속적인 백그라운드 처리
이벤트 드리븐 모델
설치, 버전 및 업그레이드 관리를 위한 시스템 기능
다른 백그라운드 프로세싱 관련 기능 표준들을 위한 보편적 진입점
19

20. Dedicated/Shared Worker vs Service Worker
20

21. Dedicated/Shared Worker: 런타임 , 생성 , 브라우징 컨텍스트 ¹
런타임에 생성되는 코드로부터 스레드(Thread)와 유사
런타임에 코드에서 직접 워커 인스턴스 생성
생성된 워커는 페이지나 브라우저가 실행되는 동안 동작 가능
다음 로딩 시에 다시 실행하기 위해서는 재생성 필요
21

22. Service Worker: 지속적 , 설치 , 브라우저
브라우저에 설치되는 일종의 시스템 요소와 유사한 기능
페이지/브라우저가 실행 중이지 않더라도 브라우저에 의해 라이프사이클이 제어
페이지 외부 요소 제어를 위한 이벤트 모델
원격 푸시 알림이나 백그라운드 동기화의 최초 진입점으로 적합
22

23. 기억하세요!
..., 지속적인 백그라운드 처리의 장점을 어플리케이션이 취하는 것을 가능하게 하는...
23

24. 왜 이벤트 드리븐 모델일까?
지속적이라 함은 페이지가 로딩되지 않았을 때도 동작하여야 함을 의미
24

25. 생성(Spawn)? 아니, 설치!
지속적이라 함은 페이지가 로딩되지 않았을 때도 동작하여야 함을 의미
25

26. 보편적 진입점
페이지 외 지속적인 백그라운드 요소가 필요한 기능을 구현하는 경우
오프라인 캐시
원격 푸시 알림
백그라운드 동기화
26

27. 오프라인 캐쉬(Offline Cache)
27

28. 원격 푸시 알림(Remote Push Notification)
페이지가 로딩되어 있지 않아도 데이터가 날아옵니다.
28

29. 백그라운드 동기화(Background Sync.)
언제 서버에 연결하면 되는지 브라우저가 알려드립니다.
29

30. ❤ HTTPS
중간자 공격(Man‒in‒the‒middle‒attack)을 방지하기 위해...
30

31. 라이프사이클
31

32. 2.1.1 lifetime
"서비스워커의 라이프사이클은 서비스워커 클라이언트에 의해 유지되는 서비스워커 객체에 대한 참조
가 아니라 이벤트 실행의 라이프사이클과 밀접하게 관련되어 있습니다.
유저 에이전트는 이벤트들을 처리하는 동안 관리해야할 이벤트가 없거나 무한루프 및 부과된 시간 제한
에 도달한 태스크와 같은 비정상적인 동작이 하나라도 발견되면 언제든지 서비스워커를 종료할 수 있습
니다."
32

33. ServiceWorkerState
enum ServiceWorkerState {
"installing",
"installed",
"activating",
"activated",
"redundant"
};
33

34. 34

35. Show me the money code!
데모 코드 GitHub 저장소
35

36. 서비스 워커의 장단점
적용하기 전에 생각해 둘 내용
36

37. 장점: Polyfill이 없다. :‒)
"안되면 그냥 안되는 거죠."
37

38. 단점: Polyfill이 없다. :‒/
"이상하게 장점 같은..."
38

39. Solution: 있으면 동작하고 없으면 동작하지 않는다.
있으면 좀 좋고, 없어도 되는...
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(function(registration) {
// registered :)
enableServiceFeatures(registration);
});
}
39

40. Resources [1/2]
Specifications
Service Worker
Push API
Notification API
Fetch API
Articles
Offline cookbook
2016 ‒ the year of web streams
Push notifications on the open Web
Web Push Encryption
Is service worker ready? 40

41. Resources [2/2]
Case studies
Production case studies
Codes
Service Worker 101 example
Simple Push Demo
Tools
sw‒precache
sw‒toolbox
41

42. Thank you!
42