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

1

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

2

자바스크립트 코드는 UI 스레드 상에서 동작합니다.

즉, 여러분의 코드는 항상

모든 렌더링과 상호작용을 블록하며,

(웹페이지가) 로딩되어 있는 동안만 스크립트가 실행됩니다.

3

웹 워커와 공용(Shared) 워커는 브라우저의 기능

스레드와 유사하게 스크립트 실행합니다.

백그라운드에서

메세지 전달 메커니즘을 기반으로

특히,  Shared Worker 는 여러 브라우징 컨텍스트로부터 액세스가 가능합니다.

4

웹 워커의 기본 규칙

전용의 Ú로벌 스코프

DOM에 직접 액세스 불가

window 스코프의 메소드와 속성들을 모두 사용할 수는 없음

5

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

6

서비스 워커 역시 워커의 한 종류

그러나, Ý속적인 백그라운드 처리를 위해

이벤트‑드리븐 모델 기반

설치, 버전 시스템, 업그레이드와 같은 관리 기능 제공

다른 규격들에 �한 포괄적인 진입점 제공

7

비교

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

8

전용 및 공용 워커:  런타임 ,  생성 ,  브라우징 콘텍스트 

런타임에 생성 가능한 스레드와 유사

런타임에 워커를 생성하고 조작 가능

페이지 로딩되고 생성된 뒤에만 사용 가능

페이지가 새로 로딩될 떄마다 새로 생성하여 사용해야 함

9

서비스 워커:  지속성 ,  설치 ,  브라우저 

시스템‑즉, 브라우저‑에 설치되는 데몬(Daemon)과 유사

웹페이지 및 브라우저의 생명주기와는 무관

시스템에서 버전 관리를 위한 업데이트 기능 제공

원격 푸시 알림, 백그라운드 동기화 등에 �한 진입점으로 적합

10

기억하세요!

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

11

Service Worker ❤ HTTPS

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

12

Dive into 201몸풀기Warm‑up

오프라인에서의 동작

웹앱 메니페스트를 이용한 바로가기의 설치

푸시 알림

13

몸풀기

14

메세지 전달

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

.postMessage()

.onmessage

15

클라이언트에서 워커로의 메세지 전달

index.html

navigator.serviceWorker.controller  .postMessage('hello, worker!');

sw.js

// 페이지로부터 메세지를 포스팅할 때 발생하는 이벤트입니다.self.addEventListener('message', e => {  console.log('Worker got: ' + e.data);});

16

워커로부터 클라이언트로의 메세지 전달

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

serviceWorker.register()

서비스워커 모듈의 등록 및  등록 결과  반환

18

쉬운 사용예

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

19

 scope  옵션 활용

서비스워커가 동작할  url의 범위  정의

var options = {  scope: './statics'};

navigator.serviceWorker.register('/sw.js', options) .then(function(registration) {     // getting registeration info });

20

importScripts()

동기적인 방식으로 하나 이상의 스크립트를 워커 내로 로딩

// loading single scriptself.importScripts('perfmatters.js');

// import script for arithmetic operation :)importScripts('add.js', 'minus.js', 'mult.js', 'divide.js');

21

그 외의 주요 메소드 및 속성

.getRegistration()

.getRegistrations()

.ready

.controller

22

오프라인에서의 동작

여러분만의 공룡을 만들 수 있습니다! :‑p

23

오프라인 웹앱 구현을 위해 학습할 내용

1.  Caches 를 사용한 캐시 구현

2.  .waitUntil() 을 통한 이벤트의 생명주기 연장

3.  fetch  이벤트를 통한 네트워크 프록시 구현

24

Cache Storage

Cache를 위한 저장소 인터페이스. 모든 API는  Promise 객체 를 반환.

 .match() 

 .has() 

 .open() 

 .delete() 

 .keys() 

25

마스터 경로내에 저장된 Named 캐시의 예

CacheStorages│├── ServiceWorker_A│   ├── cache.1│   ├── cache.2│   └── cache.3│└── ServiceWorker_B    ├── cache.1    ├── cache.2    └── cache.3

26

.waitUntil()

_현재 상태_를 연장.

 install  상태 이전의  installing  상태

 activate  상태 이전의  activating  상태

27

처음 서비스워커가 설치되면 모든 리소스를 다운로드하는 코드

self.addEventListener('install', function(event) {    predownloadAssets().then(function() {      console.log('finished downloading awesome resoures.');    });});

28

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

29

해결: 필요한 동작이 끝나기 전까지 현재 상태를 연장!! :)

self.addEventListener('install', function(event) {  // waitUntil()을 사용하여 ̀install̀ 상태를 연장  event.waitUntil(    predownloadAssets().then(function() {      console.log('finished downloading awesome resoures.');    })  );});

30

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

31

.onfetch

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

32

 FetchEvent 

 .onfetch 에 전달되는 인자

요청 및 완료 결과에 �한 정보를 포함

 .respondWith() 를 사용하여 원하는 응답을 되돌릴 수 있음

33

.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

오프라인 샘플 코드

 install  이벤트를 이용한 리소스의 prefetch

 fetct  이벤트를 사용한 네트워크 프록시

35

웹앱 매니페스트를 활용한 바로가기 설치

 AndroidManifest.xml 나  .plist 를 들어보셨나요>

36

웹앱 매니페스트

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

37

웹앱 매니페스트의 기능

실제 로딩된 페이지 리소스와의 상호작용 �신

메타데이터를 가진 단일 JSON 파일로부터

웹앱을 관리하기 위한 앱 정보의 조회하는 기능 제공

38

사용 방법

1.  short_name ,  name ,  icons  등의 정보가 담긴 매니페스트 파일 작성

{  "short_name": "My superapp",   ...}

2. 작성된 파일을  <link> 를 통해 지정

<link rel="manifest" href="YOUR_MANIFEST_URL">

39

홈 화면에 추가(Add to homescreen)

웹앱 매니페스트는 사이트 북마크를 디바이스 홈 화면에 저장하는 기능을 제공합니다.

40

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

41

웹앱 매니페스트를 통해 로딩없이 앱 정보 조회 가능

홈화면 상에 앱 아이콘과 이름 표시

설치 아이콘의 클릭을 통해 원하는 URL을 실행

42

코드

manifest.json

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

43

index.html

<head>    ...    <title>나의 �박 웹앱</title>    ...    <link rel="manifest" href="manifest.json">    ...</head>

44

실행 스타일 정의

 웹앱 매니페스트 를 사용하여 디스플레이 형태나 페이지의 방향 등을 설정할 수 있습니다. 더 자세한 정보는 여기를 참조하세요.

{    // 풀스크린 모드, UI를 표시하려면 "browser" 사용    "display": "standalone",         // 특정 방향으로 디스플레이하는 것을 강제    "orientation": "landscape",        // 전체 사이트에서 적용될 UI(주소창 등)에 �한 테마 색상 정의    "theme_color": "#2196F3"}

45

웹앱 설치 배너

자동으로 사용자에게  홈화면에 설치 를 질의

46

47

요구사항

페이지는 반드시 다음 속성을 가진  매니페스트 파일 를 링크 short_name 

 name 

144x144 png icon (mime type: image/png)

 start_url 

 서비스 워커  등록

 HTTPS  지원

두번 이상 방문단, 각 방문 사이의 시간은 5분 이상이어야 함

48

 chrome://flags 를 통해 테스트 설정 가능

방문 빈도를 무시하려면 #bypass‐app‐banner‐engagement‐checks  설정

데스크탑에서의 테스트를 위해서 #enable‐add‐to‐shelf  설정

49

예제: 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

원격 푸시 알림

A long time ago in a galaxy far, far away...there are spams

51

 원격 푸시 알림 을 구현하기 위해 배울 것들

1. 푸시 서비스에 액세스하기 위한  Push manager 

2. 푸시 등록 정보를 다루는  Push subscription 

3. 푸시 이벤트를 다루는  Push event 

4. 전달된 데이터를 다루기 위한  Push message data 

52

동작 흐름

1. 등록: 푸시 서비스를 통해 푸시 메세지의 구독

2. 전달: 구독시 할당받은 엔드포인트 정보를 서비스 서버에 전달

3. 발송: 서비스에서 등록된 엔드포인트로 푸시 메세지 발송

4. 조회: 브라우저는 주기적으로 구독하고 있는 엔드포인트 조회

5. 수신: 푸시 메세지 데이터를 다운로드

6. 이벤트 발생: 수신된 푸시 데이터를 서비스워커에 이벤트로 전달

53

source: Web Fundamentals54

Push manager

푸시 서비스와의 연동 인터페이스 제공

subscribe(options):

getSubscription():

permissionState(options):

55

Push subscription

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

56

Push event

수신한 푸시 메세지에 �한 정보 구조체

서비스워커 Ú로벌 스코프의  onpush 로 전달됨

모든 메세지 정보는  .data  필드에 기록

57

.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

알림 이벤트 핸들러

// 알림을 클릭하면 ̀notificationclick̀ 이벤트가 발생합니다.self.addEventListener('notificationclick', function(event) {  // 알림창을 닫음  event.notification.close();

  // 알림창과 관련된 동작을 수행  event.waitUntil(doPushNotification(event));});

59

감사합니다!

60

Special thanks to

DEVIEW 2016 쉼터/생수를 제공해준

61