GDG DevFest 2016 Seoul

1. 서비스워커201
@cwdoh, GDE for Web
1

2. Remind 101
아직보지못하셨다면여기를살펴보세요.
2

3. 자바스크립트코드는UI 스레드상에서동작합니다.
즉, 여러분의코드는항상
모든렌더링과 상호작용을블록하며,
(웹페이지가) 로딩되어있는동안만스크립트가 실행됩니다.
3

4. 웹워커와공용(Shared) 워커는브라우저의기능
스레드와유사하게 스크립트실행합니다.
백그라운드에서
메세지전달메커니즘을기반으로
특히, Shared Worker 는여러브라우징컨텍스트로부터액세스가 가능
합니다.
4

5. 웹워커의기본규칙
전용의글로벌스코프
DOM에직접액세스불가
window 스코프의메소드와속성들을모두사용할수는없음
5

6. 서비스워커
어플리케이션이영속적인백그라운드처리의이점을가질수있도록하
며, 오프라인상태에서도웹어플리케이션의구동이가능하도록하는기
능을포함하고 있습니다.
6

7. 서비스워커역시워커의한종류
그러나, 영속적인백그라운드처리를위해
이벤트‑드리븐모델기반
설치, 버전시스템, 업그레이드와같은관리기능제공
다른규격들에대한포괄적인진입점제공
7

8. 비교
전용(Dedicated)/공용워커서비스워커
8

9. 전용및공용워커: 런타임 , 생성 , 브라우징 콘텍스트
런타임에생성가능한스레드와유사
런타임에워커를생성하고 조작가능
페이지로딩되고 생성된뒤에만사용가능
페이지가 새로로딩될떄마다새로생성하여사용해야함
9

10. 서비스워커: 지속성 , 설치 , 브라우저
시스템‑즉, 브라우저‑에설치되는데몬(Daemon)과 유사
웹페이지및브라우저의생명주기와는무관
시스템에서버전관리를위한업데이트기능제공
원격 푸시알림, 백그라운드동기화등에대한진입점으로적합
10

11. 기억하세요!
지속적인백그라운드처리는서비스워커의목적이며, 이점이서비스워커
의모든메커니즘을결정합니다.
11

12. Service Worker ❤ HTTPS
중간자 공격(man‐in‐the‐middle‐attack) 의방지가 목적이지만,
127.0.0.1 즉, localhost 에서는SSL 인증이없이서비스워커의개
발및모듈테스팅이가능합니다.
12

13. Dive into 201
몸풀기Warm‑up
오프라인에서의동작
웹앱메니페스트를이용한바로가기의설치
푸시알림
13

14. 몸풀기
14

15. 메세지전달
기억하시나요? 워커와상호작용하기 위한방법은 메세지 입니다. :)
.postMessage()
.onmessage
15

16. 클라이언트에서워커로의메세지전달
index.html
navigator.serviceWorker.controller
.postMessage('hello, worker!');
sw.js
// 페이지로부터 메세지를 포스팅할 때 발생하는 이벤트입니다.
self.addEventListener('message', e => {
console.log('Worker got: ' + e.data);
});
16

17. 워커로부터클라이언트로의메세지전달
navigator.serviceWorker
.addEventListener('message', e => {
console.log('page got: ' + e.data);
});
sw.js
self.addEventListener('message', e => {
// post Message to source client
e.source.postMessage('hello, page!');
});
17

18. serviceWorker.register()
서비스워커모듈의등록및 등록 결과 반환
18

19. 쉬운사용예
navigator.serviceWorker.register('/sw.js')
// promise!!
.then(function(registration) {
// 등록 정보가 전달됩니다.
});
19

20. scope 옵션활용
서비스워커가 동작할 url의 범위 정의
var options = {
scope: './statics'
};
navigator.serviceWorker.register('/sw.js', options)
.then(function(registration) {
// getting registeration info
});
20

21. importScripts()
동기적인방식으로하나이상의스크립트를워커내로로딩
// loading single script
self.importScripts('perfmatters.js');
// import script for arithmetic operation :)
importScripts('add.js', 'minus.js', 'mult.js', 'divide.js');
21

22. 그 외의주요메소드및속성
.getRegistration()
.getRegistrations()
.ready
.controller
22

23. 오프라인에서의동작
여러분만의공룡을만들수있습니다! :‑p
23

24. 오프라인웹앱구현을위해학습할내용
1. Caches 를사용한캐시구현
2. .waitUntil() 을통한이벤트의생명주기 연장
3. fetch 이벤트를통한네트워크프록시구현
24

25. Cache Storage
Cache를위한저장소인터페이스. 모든API는 Promise 객체 를반환.
.match()
.has()
.open()
.delete()
.keys()
25

26. 마스터경로내에저장된Named 캐시의예
CacheStorages
│
├── ServiceWorker_A
│ ├── cache.1
│ ├── cache.2
│ └── cache.3
│
└── ServiceWorker_B
├── cache.1
├── cache.2
└── cache.3
26

27. .waitUntil()
_현재상태_를연장.
install 상태이전의 installing 상태
activate 상태이전의 activating 상태
27

28. 처음서비스워커가 설치되면모든리소스를다운로드하는코드
self.addEventListener('install', function(event) {
predownloadAssets().then(function() {
console.log('finished downloading awesome resoures.');
});
});
28

29. 이슈: 다운로드가 완료되기 전에서비스워커가 활성화(activated)
29

30. 해결: 필요한동작이끝나기 전까지현재상태를연장!! :)
self.addEventListener('install', function(event) {
// waitUntil()을 사용하여 `install` 상태를 연장
event.waitUntil(
predownloadAssets().then(function() {
console.log('finished downloading awesome resoures.');
})
);
});
30

31. .waitUntil() 은주어진Promise 객체가 처리될때까지현재이벤트
상태를연장합니다.
31

32. .onfetch
브라우저가 리소스를fetch할때마다발생하는이벤트핸들러.
32

33. FetchEvent
.onfetch 에전달되는인자
요청및완료결과에대한정보를포함
.respondWith() 를사용하여원하는응답을되돌릴수있음
33

34. .respondWith()
주어진 응답 생성 코드 로부터생성된응답을원래요청된곳(일반적으로
페이지)으로전달합니다.
self.addEventListener('fetch', function(event) {
// custom response with response‐generating‐code
event.respondWith(
// response like typical fetch‐response model
fetch(event.request)
.then(function(res) {
return res;
}).catch(function(error) {
throw error;
})
);
});
34

35. 오프라인샘플코드
install 이벤트를이용한리소스의prefetch
fetct 이벤트를사용한네트워크프록시
35

36. 웹앱매니페스트를활용한바로가기 설치
AndroidManifest.xml 나 .plist 를들어보셨나요>
36

37. 웹앱매니페스트
JSON 기반의매니페스트파일은_어플리케이션이름, 설명, 저작자, 아
이콘링크, 오리엔테이션이나디스플레이모드_와같은웹앱과 관련된
메타데이터를모아서저장할장소를개발자에게 제공한다.
37

38. 웹앱매니페스트의기능
실제로딩된페이지리소스와의상호작용대신
메타데이터를가진단일JSON 파일로부터
웹앱을관리하기 위한앱정보의조회하는기능제공
38

39. 사용방법
1. short_name , name , icons 등의정보가 담긴 매니페스트파일작성
{
"short_name": "My superapp",
...
}
2. 작성된파일을 <link> 를통해지정
<link rel="manifest" href="YOUR_MANIFEST_URL">
39

40. 홈화면에추가(Add to homescreen)
웹앱매니페스트는사이트북마크를디바이스홈화면에저장하는기능
을제공합니다.
40

41. 앱과 유사하게 바로가기를설치하고, 그로부터실행
41

42. 웹앱매니페스트를통해로딩없이앱정보조회가능
홈화면상에앱아이콘과 이름표시
설치아이콘의클릭을통해원하는URL을실행
42

43. 코드
manifest.json
{
"name": "나의 대박 웹앱",
"short_name": "HelloWorld",
"start_url": ".",
"display": "standalone",
"icons": [{
"src": "images/touch/homescreen48.png",
"sizes": "48x48",
"type": "image/png"
},
// ...웹앱에 대해 원하는 정보를 추가
}
43

44. index.html
<head>
...
<title>나의 대박 웹앱</title>
...
<link rel="manifest" href="manifest.json">
...
</head>
44

45. 실행스타일정의
웹앱 매니페스트 를사용하여디스플레이형태나페이지의방향등을설
정할수있습니다. 더자세한정보는여기를참조하세요.
{
// 풀스크린 모드, UI를 표시하려면 "browser" 사용
"display": "standalone",
// 특정 방향으로 디스플레이하는 것을 강제
"orientation": "landscape",
// 전체 사이트에서 적용될 UI(주소창 등)에 대한 테마 색상 정의
"theme_color": "#2196F3"
}
45

46. 웹앱설치배너
자동으로사용자에게 홈화면에 설치 를질의
46

47. 47

48. 요구사항
페이지는반드시다음속성을가진 매니페스트 파일 를링크
short_name
name
144x144 png icon (mime type: image/png)
start_url
서비스 워커 등록
HTTPS 지원
두번이상방문
단, 각 방문사이의시간은5분이상이어야함
48

49. chrome://flags 를통해테스트설정가능
방문빈도를무시하려면
#bypass‐app‐banner‐engagement‐checks 설정
데스크탑에서의테스트를위해서
#enable‐add‐to‐shelf 설정
49

50. 예제: manifest.json
{
"name": "My super powered Web App",
"short_name": "HelloWorld",
"start_url": ".",
"display": "standalone",
"icons": [{
"src": "images/touch/homescreen48.png",
"sizes": "48x48",
"type": "image/png"
},
// ...awesome data to define your web app
],
"related_applications": [{
"platform": "web"
}, {
"platform": "play",
"url": "https://play.goo../details?id=com.android.chrome"
}]
}
50

51. 원격 푸시알림
A long time ago in a galaxy far, far away...there are spams
51

52. 원격 푸시 알림 을구현하기 위해배울것들
1. 푸시서비스에액세스하기 위한 Push manager
2. 푸시등록정보를다루는 Push subscription
3. 푸시이벤트를다루는 Push event
4. 전달된데이터를다루기 위한 Push message data
52

53. 동작흐름
1. 등록: 푸시서비스를통해푸시메세지의구독
2. 전달: 구독시할당받은엔드포인트정보를서비스서버에전달
3. 발송: 서비스에서등록된엔드포인트로푸시메세지발송
4. 조회: 브라우저는주기적으로구독하고 있는엔드포인트조회
5. 수신: 푸시메세지데이터를다운로드
6. 이벤트발생: 수신된푸시데이터를서비스워커에이벤트로전달
53

54. source: Web Fundamentals
54

55. Push manager
푸시서비스와의연동인터페이스제공
subscribe(options):
getSubscription():
permissionState(options):
55

56. Push subscription
구독하고 있는URL 엔드포인트, 푸시서비스에대한구독취소등의인
터페이스제공
56

57. Push event
수신한푸시메세지에대한정보구조체
서비스워커글로벌스코프의 onpush 로전달됨
모든메세지정보는 .data 필드에기록
57

58. .onpush
푸시메세지를브라우저가 캐치하면발생하는이벤트
// `push` event handler
self.addEventListener('push', function(event) {
console.log('Push message received', event);
event.waitUntil(
// show notification
self.registration.showNotification(title, description));
});
58

59. 알림이벤트핸들러
// 알림을 클릭하면 `notificationclick` 이벤트가 발생합니다.
self.addEventListener('notificationclick', function(event) {
// 알림창을 닫음
event.notification.close();
// 알림창과 관련된 동작을 수행
event.waitUntil(doPushNotification(event));
});
59

60. 감사합니다!
60

61. Special thanks to
DEVIEW 2016 쉼터/생수를제공해준
61