Upload
chang-w-doh
View
851
Download
0
Embed Size (px)
Citation preview
다음 코드의 실행 결과는 무엇일까요?
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
W3C에서 말하는 Web Worker
메인 페이지와 병렬 스크립트를 실행하는 백그라운드 워커를 생성하는 API메세지 전송 기반의 Thread와 유사한 동작을 가능하게 한다.
7
예제
메세지 전달에 기반한 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
MDN: Shared Worker
여러 윈도우, iframe 혹은 워커와 같은 다수의 브라우징 컨텍스트에서 접근할 수 있는 특정한 종류의 워커Dedicated worker와는 다른 인터페이스를 구현하고 있고, SharedWorkerGlobalScope라고 하는 별도의 Ú로벌 스코프를 가진다..
12
이러한 시스템의 핵심은 문서나 다른 소스들로부터 발생되는 이벤트에 �응하는 이벤트 드리븐 웹워커이다. 이를 위해 설치, 버전 및 업그레이드를 관리하기 위한 시스템이 제공된다.
17
서비스 워커 역시 또 다른 종류의 워커
지속적인 백그라운드 처리
이벤트 드리븐 모델설치, 버전 및 업그레이드 관리를 위한 시스템 기능다른 백그라운드 프로세싱 관련 기능 표준들을 위한 보편적 진입점
19
Dedicated/Shared Worker: 런타임 , 생성 , 브라우징 컨텍스트 ¹
런타임에 생성되는 코드로부터 스레드(Thread)와 유사
런타임에 코드에서 직접 워커 인스턴스 생성생성된 워커는 페이지나 브라우저가 실행되는 동안 동작 가능다음 로딩 시에 다시 실행하기 위해서는 재생성 필요
21
Service Worker: 지속적 , 설치 , 브라우저
브라우저에 설치되는 일종의 시스템 요소와 유사한 기능
페이지/브라우저가 실행 중이지 않더라도 브라우저에 의해 라이프사이클이 제어페이지 외부 요소 제어를 위한 이벤트 모델원격 푸시 알림이나 백그라운드 동기화의 최초 진입점으로 적합
22
2.1.1 lifetime
"서비스워커의 라이프사이클은 서비스워커 클라이언트에 의해 유지되는 서비스워커 객체에 �한 참조가 아니라 이벤트 실행의 라이프사이클과 Â접하게 관련되어 있습니다.
유저 에이전트는 이벤트들을 처리하는 동안 관리해야할 이벤트가 없거나 무한루프 및 부과된 시간 제한에 도달한 태스크와 같은 비정상적인 동작이 하나라도 발견되면 언제든지 서비스워커를 종료할 수 있습니다."
32
ServiceWorkerState
enum ServiceWorkerState { "installing", "installed", "activating", "activated", "redundant" };
33
Solution: 있으면 동작하고 없으면 동작하지 않는다.
있으면 좀 좋고, 없어도 되는...
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(function(registration) { // registered :) enableServiceFeatures(registration); }); }
39
Resources [1/2]
Specifications
Service WorkerPush APINotification APIFetch API
Articles
Offline cookbook
2016 ‒ the year of web streams
Push notifications on the open Web
Web Push Encryption
Is service worker ready? 40
Resources [2/2]
Case studies
Production case studies
Codes
Service Worker 101 exampleSimple Push Demo
Tools
sw‒precachesw‒toolbox
41