SlideShare une entreprise Scribd logo
1  sur  22
Télécharger pour lire hors ligne
Service Worker 
New game changer is coming :)
Chang W. Doh 
<hi> </hi> 
GDG WebTech Organizer 
HTML5Rocks/KO Contributor/Coordinator 
http://cwdoh.com
Offline!! App. Cache!! 
App. Cache!! 
Offline!! 
Image: ‘Mission Impossible 4’ Movie
We forgot something! 
But…what?
Mission Impossible: 
before the ‘ServiceWorker’! 
● Truely controlling offline resources 
o Application Cache? OMG! 
o Everything managed by your webbrowser! 
● Plus, background processing 
o Remote Push Notification, Alarm, 
Background-update of resources, ... 
o Everything run on your webpage!
Mission completed: 
‘ServiceWorker’ solves... 
● Truely controlling offline/network stack 
o Programmable cache control 
o Custom response 
● Plus, background processing 
o Remote Push Notification 
o Task Scheduler(e.g. Local Notification) 
o BackgroundSync 
o ...
Yay, 
ServiceWorker!!
Is Service Worker available? 
● Specification is worked in progress. But, 
o Installed 
§ https://slightlyoff.github.io/ServiceWorker/ 
spec/service_worker/ 
o Activating 
§ http://www.w3.org/TR/service-workers/ 
● See also: Is Service Worker ready? 
o https://jakearchibald.github.io/ 
isserviceworkerready/ 
http://www.slideshare.net/jungkees/service-workersa
Overview: 
● Event-driven scripts 
Service Worker 
o that run independently of web pages 
● ServiceWorker has 
o Access to domain-wide events such as 
network fetches 
o scriptable caches 
o The ability to respond to network requests 
from certain web pages via script 
§ A way for applications to "go offline" 
http://www.slideshare.net/jungkees/service-workersa
Overview: 
● Principles & terms 
Service Worker 
o Run on same origin 
o Registration keyed by URL scope 
o Document is controlled by matching 
SeviceWorker upon navigation 
o Successfully installed worker is considered 
worker in waiting 
o Lifecycle events 
o Functional events 
http://www.slideshare.net/jungkees/service-workersa
Overview: 
● Security 
Service Worker 
o Origin relativity 
o Cross origin resource 
o HTTPS only: preventing man-in-the-middle 
attacks 
http://www.slideshare.net/jungkees/service-workersa
Typical network fetch: 
Sufficient response 
http://www.slideshare.net/jungkees/service-workersa
Typical network fetch: 
Insufficient response 
http://www.slideshare.net/jungkees/service-workersa
With ServiceWorker: 
Bring your own cache 
http://www.slideshare.net/jungkees/service-workersa
With ServiceWorker: 
Fallback to network 
http://www.slideshare.net/jungkees/service-workersa
What can we do with 
ServiceWokers? 
● Eliminating loading time 
o Developer knows what is most important 
resource in our webpages. 
§ We can control ‘request/response flow’ and 
‘cache’ with ServiceWorker. 
§ and Front-end developers just write their code 
without other libraries to control cache-flow. 
o Your page will be loaded in an instant!!! 
● Other features come and see us soon. :)
How to: 
enable ‘Service Worker’ 
● Type in the url box 
chrome://flags 
or 
chrome://flags/#enable-service-worker 
● Check ‘enable’ like: 
36+
How to: 
know ‘Service Worker is working’ 
● Type in the url box: 
chrome://inspect/#service-workers 
● To see the registrations: 
chrome://serviceworker-internals
Demo from Google I/O 2014: 
Topeka
Demo from Google I/O 2014: 
● Install 
Topeka 
// ServiceWorker is ‘Installed’!!! 
this.addEventListener("install", function(e) { 
e.waitUntil( caches.create("core") // Creating Cache ‘core’! 
.then(function(core) { 
var resourceUrls = [ 
"", 
"?offline", 
"components/core-ajax/core-ajax.html", 
// ... 
]; 
return Promise.all(resourceUrls.map(function(relativeUrl) { 
// Add resource to cache ‘core’ 
return core.add(baseUrl + relativeUrl); 
})); 
}));});
Demo from Google I/O 2014: 
● fetch 
this.addEventListener("fetch", function(e) { 
var request = e.request; 
if (this.scope.indexOf(request.origin) == -1) { return; } 
// Basic read-through caching. 
e.respondWith( 
caches.match(request, "core").then( 
function(response) { return response; }, 
function() { 
// we didn't have it in the cache, so add it to the cache and return it 
return caches.get("core").then( 
function(core) { log("runtime caching:", request.url); 
// FIXME(slighltyoff): add should take/return an array 
return core.add(request).then( 
function(response) { 
return response; 
}); 
// ... 
Topeka
References 
1. ServiceWorker first draft published 
2. Specification 
3. Explainer 
4. Implemetation Considerations 
5. Service Workers: Bring your own magic 
6. Topeka Demo @Google I/O 2014

Contenu connexe

Tendances

Build RESTful API Using Express JS
Build RESTful API Using Express JSBuild RESTful API Using Express JS
Build RESTful API Using Express JSCakra Danu Sedayu
 
Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationGrunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationDavid Amend
 
Service Worker 101 (en)
Service Worker 101 (en)Service Worker 101 (en)
Service Worker 101 (en)Chang W. Doh
 
Service worker - Offline Web
Service worker - Offline WebService worker - Offline Web
Service worker - Offline WebBruno Oliveira
 
Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseAaron Silverman
 
Bower & Grunt - A practical workflow
Bower & Grunt - A practical workflowBower & Grunt - A practical workflow
Bower & Grunt - A practical workflowRiccardo Coppola
 
Packing for the Web with Webpack
Packing for the Web with WebpackPacking for the Web with Webpack
Packing for the Web with WebpackThiago Temple
 
Service workers
Service workersService workers
Service workersjungkees
 
System webpack-jspm
System webpack-jspmSystem webpack-jspm
System webpack-jspmJesse Warden
 
Superfast Automated Web Testing with CasperJS & PhantomJS
Superfast Automated Web Testing with CasperJS & PhantomJS Superfast Automated Web Testing with CasperJS & PhantomJS
Superfast Automated Web Testing with CasperJS & PhantomJS Hervé Vũ Roussel
 
CasperJs Enjoy Functional Testing
CasperJs Enjoy Functional TestingCasperJs Enjoy Functional Testing
CasperJs Enjoy Functional TestingFabien POMEROL
 
Create a RESTful API with NodeJS, Express and MongoDB
Create a RESTful API with NodeJS, Express and MongoDBCreate a RESTful API with NodeJS, Express and MongoDB
Create a RESTful API with NodeJS, Express and MongoDBHengki Sihombing
 
"Service Worker: Let Your Web App Feel Like a Native "
"Service Worker: Let Your Web App Feel Like a Native ""Service Worker: Let Your Web App Feel Like a Native "
"Service Worker: Let Your Web App Feel Like a Native "FDConf
 
Module, AMD, RequireJS
Module, AMD, RequireJSModule, AMD, RequireJS
Module, AMD, RequireJS偉格 高
 
Hitchhiker's guide to the front end development
Hitchhiker's guide to the front end developmentHitchhiker's guide to the front end development
Hitchhiker's guide to the front end development정윤 김
 
Advanced front-end automation with npm scripts
Advanced front-end automation with npm scriptsAdvanced front-end automation with npm scripts
Advanced front-end automation with npm scriptsk88hudson
 
CasperJS and PhantomJS for Automated Testing
CasperJS and PhantomJS for Automated TestingCasperJS and PhantomJS for Automated Testing
CasperJS and PhantomJS for Automated TestingX-Team
 

Tendances (20)

Build RESTful API Using Express JS
Build RESTful API Using Express JSBuild RESTful API Using Express JS
Build RESTful API Using Express JS
 
Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationGrunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous Integration
 
Service Worker 101 (en)
Service Worker 101 (en)Service Worker 101 (en)
Service Worker 101 (en)
 
Service worker - Offline Web
Service worker - Offline WebService worker - Offline Web
Service worker - Offline Web
 
Service worker API
Service worker APIService worker API
Service worker API
 
Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash Course
 
Bower & Grunt - A practical workflow
Bower & Grunt - A practical workflowBower & Grunt - A practical workflow
Bower & Grunt - A practical workflow
 
Packing for the Web with Webpack
Packing for the Web with WebpackPacking for the Web with Webpack
Packing for the Web with Webpack
 
Service workers
Service workersService workers
Service workers
 
An Intro into webpack
An Intro into webpackAn Intro into webpack
An Intro into webpack
 
System webpack-jspm
System webpack-jspmSystem webpack-jspm
System webpack-jspm
 
Superfast Automated Web Testing with CasperJS & PhantomJS
Superfast Automated Web Testing with CasperJS & PhantomJS Superfast Automated Web Testing with CasperJS & PhantomJS
Superfast Automated Web Testing with CasperJS & PhantomJS
 
CasperJs Enjoy Functional Testing
CasperJs Enjoy Functional TestingCasperJs Enjoy Functional Testing
CasperJs Enjoy Functional Testing
 
Puppeteer
PuppeteerPuppeteer
Puppeteer
 
Create a RESTful API with NodeJS, Express and MongoDB
Create a RESTful API with NodeJS, Express and MongoDBCreate a RESTful API with NodeJS, Express and MongoDB
Create a RESTful API with NodeJS, Express and MongoDB
 
"Service Worker: Let Your Web App Feel Like a Native "
"Service Worker: Let Your Web App Feel Like a Native ""Service Worker: Let Your Web App Feel Like a Native "
"Service Worker: Let Your Web App Feel Like a Native "
 
Module, AMD, RequireJS
Module, AMD, RequireJSModule, AMD, RequireJS
Module, AMD, RequireJS
 
Hitchhiker's guide to the front end development
Hitchhiker's guide to the front end developmentHitchhiker's guide to the front end development
Hitchhiker's guide to the front end development
 
Advanced front-end automation with npm scripts
Advanced front-end automation with npm scriptsAdvanced front-end automation with npm scripts
Advanced front-end automation with npm scripts
 
CasperJS and PhantomJS for Automated Testing
CasperJS and PhantomJS for Automated TestingCasperJS and PhantomJS for Automated Testing
CasperJS and PhantomJS for Automated Testing
 

En vedette

Service Worker 101 (한국어)
Service Worker 101 (한국어)Service Worker 101 (한국어)
Service Worker 101 (한국어)Chang W. Doh
 
インブラウザデザインについて(考察)
インブラウザデザインについて(考察)インブラウザデザインについて(考察)
インブラウザデザインについて(考察)takumaro web
 
ウェブサービスのAARRR
ウェブサービスのAARRRウェブサービスのAARRR
ウェブサービスのAARRRpLucky
 
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기Chang W. Doh
 
Chrome enchanted 2015
Chrome enchanted 2015Chrome enchanted 2015
Chrome enchanted 2015Chang W. Doh
 
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기Chang W. Doh
 
SOSCON 2014: 문서 기반의 오픈소스 기여하기
SOSCON 2014: 문서 기반의 오픈소스 기여하기SOSCON 2014: 문서 기반의 오픈소스 기여하기
SOSCON 2014: 문서 기반의 오픈소스 기여하기Chang W. Doh
 
Ninja Build: Simple Guide for Beginners
Ninja Build: Simple Guide for BeginnersNinja Build: Simple Guide for Beginners
Ninja Build: Simple Guide for BeginnersChang W. Doh
 
Cache in Chromium: Disk Cache
Cache in Chromium: Disk CacheCache in Chromium: Disk Cache
Cache in Chromium: Disk CacheChang W. Doh
 
What is next for the web
What is next for the webWhat is next for the web
What is next for the webChang W. Doh
 
GDG DevFest 2014 - 코드 없이 오픈소스 기여하기: HTML5Rocks/KO 번역 야사
GDG DevFest 2014 - 코드 없이 오픈소스 기여하기: HTML5Rocks/KO 번역 야사GDG DevFest 2014 - 코드 없이 오픈소스 기여하기: HTML5Rocks/KO 번역 야사
GDG DevFest 2014 - 코드 없이 오픈소스 기여하기: HTML5Rocks/KO 번역 야사Chang W. Doh
 
Polymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymerPolymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymerChang W. Doh
 
OVERVIEW: Chromium Source Tree
OVERVIEW: Chromium Source TreeOVERVIEW: Chromium Source Tree
OVERVIEW: Chromium Source TreeChang W. Doh
 
Service Worker 201 (한국어)
Service Worker 201 (한국어)Service Worker 201 (한국어)
Service Worker 201 (한국어)Chang W. Doh
 
Chromium: NaCl and Pepper API
Chromium: NaCl and Pepper APIChromium: NaCl and Pepper API
Chromium: NaCl and Pepper APIChang W. Doh
 
CyberAgentにおけるMongoDB
CyberAgentにおけるMongoDBCyberAgentにおけるMongoDB
CyberAgentにおけるMongoDBAkihiro Kuwano
 
Mongo dbを知ろう
Mongo dbを知ろうMongo dbを知ろう
Mongo dbを知ろうCROOZ, inc.
 
月間10億pvを支えるmongo db
月間10億pvを支えるmongo db月間10億pvを支えるmongo db
月間10億pvを支えるmongo dbYuji Isobe
 
10分で分かるr言語入門ver2.5
10分で分かるr言語入門ver2.510分で分かるr言語入門ver2.5
10分で分かるr言語入門ver2.5Nobuaki Oshiro
 

En vedette (20)

Service Worker 101 (한국어)
Service Worker 101 (한국어)Service Worker 101 (한국어)
Service Worker 101 (한국어)
 
インブラウザデザインについて(考察)
インブラウザデザインについて(考察)インブラウザデザインについて(考察)
インブラウザデザインについて(考察)
 
ウェブサービスのAARRR
ウェブサービスのAARRRウェブサービスのAARRR
ウェブサービスのAARRR
 
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
 
Chrome enchanted 2015
Chrome enchanted 2015Chrome enchanted 2015
Chrome enchanted 2015
 
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
 
SOSCON 2014: 문서 기반의 오픈소스 기여하기
SOSCON 2014: 문서 기반의 오픈소스 기여하기SOSCON 2014: 문서 기반의 오픈소스 기여하기
SOSCON 2014: 문서 기반의 오픈소스 기여하기
 
Ninja Build: Simple Guide for Beginners
Ninja Build: Simple Guide for BeginnersNinja Build: Simple Guide for Beginners
Ninja Build: Simple Guide for Beginners
 
Cache in Chromium: Disk Cache
Cache in Chromium: Disk CacheCache in Chromium: Disk Cache
Cache in Chromium: Disk Cache
 
What is next for the web
What is next for the webWhat is next for the web
What is next for the web
 
GDG DevFest 2014 - 코드 없이 오픈소스 기여하기: HTML5Rocks/KO 번역 야사
GDG DevFest 2014 - 코드 없이 오픈소스 기여하기: HTML5Rocks/KO 번역 야사GDG DevFest 2014 - 코드 없이 오픈소스 기여하기: HTML5Rocks/KO 번역 야사
GDG DevFest 2014 - 코드 없이 오픈소스 기여하기: HTML5Rocks/KO 번역 야사
 
Polymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymerPolymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymer
 
OVERVIEW: Chromium Source Tree
OVERVIEW: Chromium Source TreeOVERVIEW: Chromium Source Tree
OVERVIEW: Chromium Source Tree
 
Service Worker 201 (한국어)
Service Worker 201 (한국어)Service Worker 201 (한국어)
Service Worker 201 (한국어)
 
Chromium: NaCl and Pepper API
Chromium: NaCl and Pepper APIChromium: NaCl and Pepper API
Chromium: NaCl and Pepper API
 
CyberAgentにおけるMongoDB
CyberAgentにおけるMongoDBCyberAgentにおけるMongoDB
CyberAgentにおけるMongoDB
 
Mongo dbを知ろう
Mongo dbを知ろうMongo dbを知ろう
Mongo dbを知ろう
 
Yahoo Mail moving to React
Yahoo Mail moving to ReactYahoo Mail moving to React
Yahoo Mail moving to React
 
月間10億pvを支えるmongo db
月間10億pvを支えるmongo db月間10億pvを支えるmongo db
月間10億pvを支えるmongo db
 
10分で分かるr言語入門ver2.5
10分で分かるr言語入門ver2.510分で分かるr言語入門ver2.5
10分で分かるr言語入門ver2.5
 

Similaire à ServiceWorker: New game changer is coming!

Building Offline Ready and Installable Web App
Building Offline Ready and Installable Web AppBuilding Offline Ready and Installable Web App
Building Offline Ready and Installable Web AppMuhammad Samu
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web AppsUnfold UI
 
Progressive Web Apps 101
Progressive Web Apps 101Progressive Web Apps 101
Progressive Web Apps 101Muhammad Samu
 
GDD Japan 2009 - Designing OpenSocial Apps For Speed and Scale
GDD Japan 2009 - Designing OpenSocial Apps For Speed and ScaleGDD Japan 2009 - Designing OpenSocial Apps For Speed and Scale
GDD Japan 2009 - Designing OpenSocial Apps For Speed and ScalePatrick Chanezon
 
Service workers - Forza lavoro al servizio della tua Performance
Service workers - Forza lavoro al servizio della tua PerformanceService workers - Forza lavoro al servizio della tua Performance
Service workers - Forza lavoro al servizio della tua PerformancePiero Bellomo
 
PWA Roadshow Korea - Service Worker
PWA Roadshow Korea - Service WorkerPWA Roadshow Korea - Service Worker
PWA Roadshow Korea - Service Workerjungkees
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web AppsFITC
 
[1C1]Service Workers
[1C1]Service Workers[1C1]Service Workers
[1C1]Service WorkersNAVER D2
 
Service Worker - Reliability bits
Service Worker - Reliability bitsService Worker - Reliability bits
Service Worker - Reliability bitsjungkees
 
How to build a website that works without internet using angular, service wor...
How to build a website that works without internet using angular, service wor...How to build a website that works without internet using angular, service wor...
How to build a website that works without internet using angular, service wor...Tomiwa Ademidun
 
Progressive Web Apps - Intro & Learnings
Progressive Web Apps - Intro & LearningsProgressive Web Apps - Intro & Learnings
Progressive Web Apps - Intro & LearningsJohannes Weber
 
Building Progressive Web Apps for Windows devices
Building Progressive Web Apps for Windows devicesBuilding Progressive Web Apps for Windows devices
Building Progressive Web Apps for Windows devicesWindows Developer
 
APIs, now and in the future
APIs, now and in the futureAPIs, now and in the future
APIs, now and in the futureChris Mills
 
Rapid Application Development with WSO2 Platform
Rapid Application Development with WSO2 PlatformRapid Application Development with WSO2 Platform
Rapid Application Development with WSO2 PlatformWSO2
 
Docker for Development
Docker for DevelopmentDocker for Development
Docker for Developmentallingeek
 
Building with Firebase
Building with FirebaseBuilding with Firebase
Building with FirebaseMike Fowler
 
OWASP ZAP Workshop for QA Testers
OWASP ZAP Workshop for QA TestersOWASP ZAP Workshop for QA Testers
OWASP ZAP Workshop for QA TestersJavan Rasokat
 

Similaire à ServiceWorker: New game changer is coming! (20)

Building Offline Ready and Installable Web App
Building Offline Ready and Installable Web AppBuilding Offline Ready and Installable Web App
Building Offline Ready and Installable Web App
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Progressive Web Apps 101
Progressive Web Apps 101Progressive Web Apps 101
Progressive Web Apps 101
 
GDD Japan 2009 - Designing OpenSocial Apps For Speed and Scale
GDD Japan 2009 - Designing OpenSocial Apps For Speed and ScaleGDD Japan 2009 - Designing OpenSocial Apps For Speed and Scale
GDD Japan 2009 - Designing OpenSocial Apps For Speed and Scale
 
Service workers - Forza lavoro al servizio della tua Performance
Service workers - Forza lavoro al servizio della tua PerformanceService workers - Forza lavoro al servizio della tua Performance
Service workers - Forza lavoro al servizio della tua Performance
 
PWA Roadshow Korea - Service Worker
PWA Roadshow Korea - Service WorkerPWA Roadshow Korea - Service Worker
PWA Roadshow Korea - Service Worker
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
[1C1]Service Workers
[1C1]Service Workers[1C1]Service Workers
[1C1]Service Workers
 
Service Worker - Reliability bits
Service Worker - Reliability bitsService Worker - Reliability bits
Service Worker - Reliability bits
 
How to build a website that works without internet using angular, service wor...
How to build a website that works without internet using angular, service wor...How to build a website that works without internet using angular, service wor...
How to build a website that works without internet using angular, service wor...
 
Progressive Web Apps - Intro & Learnings
Progressive Web Apps - Intro & LearningsProgressive Web Apps - Intro & Learnings
Progressive Web Apps - Intro & Learnings
 
Building Progressive Web Apps for Windows devices
Building Progressive Web Apps for Windows devicesBuilding Progressive Web Apps for Windows devices
Building Progressive Web Apps for Windows devices
 
GDG Ibadan #pwa
GDG Ibadan #pwaGDG Ibadan #pwa
GDG Ibadan #pwa
 
APIs, now and in the future
APIs, now and in the futureAPIs, now and in the future
APIs, now and in the future
 
Sprint 17
Sprint 17Sprint 17
Sprint 17
 
Rapid Application Development with WSO2 Platform
Rapid Application Development with WSO2 PlatformRapid Application Development with WSO2 Platform
Rapid Application Development with WSO2 Platform
 
Docker for Development
Docker for DevelopmentDocker for Development
Docker for Development
 
Building with Firebase
Building with FirebaseBuilding with Firebase
Building with Firebase
 
OWASP ZAP Workshop for QA Testers
OWASP ZAP Workshop for QA TestersOWASP ZAP Workshop for QA Testers
OWASP ZAP Workshop for QA Testers
 

Plus de Chang W. Doh

Exploring what're new in Web for the Natively app
Exploring what're new in Web for the Natively appExploring what're new in Web for the Natively app
Exploring what're new in Web for the Natively appChang W. Doh
 
Kotlin의 코루틴은 어떻게 동작하는가
Kotlin의 코루틴은 어떻게 동작하는가Kotlin의 코루틴은 어떻게 동작하는가
Kotlin의 코루틴은 어떻게 동작하는가Chang W. Doh
 
Hey Kotlin, How it works?
Hey Kotlin, How it works?Hey Kotlin, How it works?
Hey Kotlin, How it works?Chang W. Doh
 
Kotlin, 어떻게 동작하나요
Kotlin, 어떻게 동작하나요Kotlin, 어떻게 동작하나요
Kotlin, 어떻게 동작하나요Chang W. Doh
 
introduction to Web Assembly
introduction to Web Assembly introduction to Web Assembly
introduction to Web Assembly Chang W. Doh
 
PWA Roadshow Seoul - Keynote
PWA Roadshow Seoul - KeynotePWA Roadshow Seoul - Keynote
PWA Roadshow Seoul - KeynoteChang W. Doh
 
PWA Roadshow Seoul - HTTPS
PWA Roadshow Seoul - HTTPSPWA Roadshow Seoul - HTTPS
PWA Roadshow Seoul - HTTPSChang W. Doh
 
CSS 다시 파서 어디에 쓰나
CSS 다시 파서 어디에 쓰나CSS 다시 파서 어디에 쓰나
CSS 다시 파서 어디에 쓰나Chang W. Doh
 
Natively Web App & Service Worker
Natively Web App & Service WorkerNatively Web App & Service Worker
Natively Web App & Service WorkerChang W. Doh
 
초보 개발자를 위한 웹 프론트엔드 개발 101
초보 개발자를 위한 웹 프론트엔드 개발 101초보 개발자를 위한 웹 프론트엔드 개발 101
초보 개발자를 위한 웹 프론트엔드 개발 101Chang W. Doh
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh
 
Web Components - Part.I, @KIG 30th
Web Components - Part.I, @KIG 30thWeb Components - Part.I, @KIG 30th
Web Components - Part.I, @KIG 30thChang W. Doh
 
Let's contribute, HTML5Rocks/ko!
Let's contribute, HTML5Rocks/ko!Let's contribute, HTML5Rocks/ko!
Let's contribute, HTML5Rocks/ko!Chang W. Doh
 
Overview: How to Measure your WebApp
Overview: How to Measure your WebAppOverview: How to Measure your WebApp
Overview: How to Measure your WebAppChang W. Doh
 

Plus de Chang W. Doh (14)

Exploring what're new in Web for the Natively app
Exploring what're new in Web for the Natively appExploring what're new in Web for the Natively app
Exploring what're new in Web for the Natively app
 
Kotlin의 코루틴은 어떻게 동작하는가
Kotlin의 코루틴은 어떻게 동작하는가Kotlin의 코루틴은 어떻게 동작하는가
Kotlin의 코루틴은 어떻게 동작하는가
 
Hey Kotlin, How it works?
Hey Kotlin, How it works?Hey Kotlin, How it works?
Hey Kotlin, How it works?
 
Kotlin, 어떻게 동작하나요
Kotlin, 어떻게 동작하나요Kotlin, 어떻게 동작하나요
Kotlin, 어떻게 동작하나요
 
introduction to Web Assembly
introduction to Web Assembly introduction to Web Assembly
introduction to Web Assembly
 
PWA Roadshow Seoul - Keynote
PWA Roadshow Seoul - KeynotePWA Roadshow Seoul - Keynote
PWA Roadshow Seoul - Keynote
 
PWA Roadshow Seoul - HTTPS
PWA Roadshow Seoul - HTTPSPWA Roadshow Seoul - HTTPS
PWA Roadshow Seoul - HTTPS
 
CSS 다시 파서 어디에 쓰나
CSS 다시 파서 어디에 쓰나CSS 다시 파서 어디에 쓰나
CSS 다시 파서 어디에 쓰나
 
Natively Web App & Service Worker
Natively Web App & Service WorkerNatively Web App & Service Worker
Natively Web App & Service Worker
 
초보 개발자를 위한 웹 프론트엔드 개발 101
초보 개발자를 위한 웹 프론트엔드 개발 101초보 개발자를 위한 웹 프론트엔드 개발 101
초보 개발자를 위한 웹 프론트엔드 개발 101
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations
 
Web Components - Part.I, @KIG 30th
Web Components - Part.I, @KIG 30thWeb Components - Part.I, @KIG 30th
Web Components - Part.I, @KIG 30th
 
Let's contribute, HTML5Rocks/ko!
Let's contribute, HTML5Rocks/ko!Let's contribute, HTML5Rocks/ko!
Let's contribute, HTML5Rocks/ko!
 
Overview: How to Measure your WebApp
Overview: How to Measure your WebAppOverview: How to Measure your WebApp
Overview: How to Measure your WebApp
 

Dernier

Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 

Dernier (20)

Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 

ServiceWorker: New game changer is coming!

  • 1. Service Worker New game changer is coming :)
  • 2. Chang W. Doh <hi> </hi> GDG WebTech Organizer HTML5Rocks/KO Contributor/Coordinator http://cwdoh.com
  • 3. Offline!! App. Cache!! App. Cache!! Offline!! Image: ‘Mission Impossible 4’ Movie
  • 4. We forgot something! But…what?
  • 5. Mission Impossible: before the ‘ServiceWorker’! ● Truely controlling offline resources o Application Cache? OMG! o Everything managed by your webbrowser! ● Plus, background processing o Remote Push Notification, Alarm, Background-update of resources, ... o Everything run on your webpage!
  • 6. Mission completed: ‘ServiceWorker’ solves... ● Truely controlling offline/network stack o Programmable cache control o Custom response ● Plus, background processing o Remote Push Notification o Task Scheduler(e.g. Local Notification) o BackgroundSync o ...
  • 8. Is Service Worker available? ● Specification is worked in progress. But, o Installed § https://slightlyoff.github.io/ServiceWorker/ spec/service_worker/ o Activating § http://www.w3.org/TR/service-workers/ ● See also: Is Service Worker ready? o https://jakearchibald.github.io/ isserviceworkerready/ http://www.slideshare.net/jungkees/service-workersa
  • 9. Overview: ● Event-driven scripts Service Worker o that run independently of web pages ● ServiceWorker has o Access to domain-wide events such as network fetches o scriptable caches o The ability to respond to network requests from certain web pages via script § A way for applications to "go offline" http://www.slideshare.net/jungkees/service-workersa
  • 10. Overview: ● Principles & terms Service Worker o Run on same origin o Registration keyed by URL scope o Document is controlled by matching SeviceWorker upon navigation o Successfully installed worker is considered worker in waiting o Lifecycle events o Functional events http://www.slideshare.net/jungkees/service-workersa
  • 11. Overview: ● Security Service Worker o Origin relativity o Cross origin resource o HTTPS only: preventing man-in-the-middle attacks http://www.slideshare.net/jungkees/service-workersa
  • 12. Typical network fetch: Sufficient response http://www.slideshare.net/jungkees/service-workersa
  • 13. Typical network fetch: Insufficient response http://www.slideshare.net/jungkees/service-workersa
  • 14. With ServiceWorker: Bring your own cache http://www.slideshare.net/jungkees/service-workersa
  • 15. With ServiceWorker: Fallback to network http://www.slideshare.net/jungkees/service-workersa
  • 16. What can we do with ServiceWokers? ● Eliminating loading time o Developer knows what is most important resource in our webpages. § We can control ‘request/response flow’ and ‘cache’ with ServiceWorker. § and Front-end developers just write their code without other libraries to control cache-flow. o Your page will be loaded in an instant!!! ● Other features come and see us soon. :)
  • 17. How to: enable ‘Service Worker’ ● Type in the url box chrome://flags or chrome://flags/#enable-service-worker ● Check ‘enable’ like: 36+
  • 18. How to: know ‘Service Worker is working’ ● Type in the url box: chrome://inspect/#service-workers ● To see the registrations: chrome://serviceworker-internals
  • 19. Demo from Google I/O 2014: Topeka
  • 20. Demo from Google I/O 2014: ● Install Topeka // ServiceWorker is ‘Installed’!!! this.addEventListener("install", function(e) { e.waitUntil( caches.create("core") // Creating Cache ‘core’! .then(function(core) { var resourceUrls = [ "", "?offline", "components/core-ajax/core-ajax.html", // ... ]; return Promise.all(resourceUrls.map(function(relativeUrl) { // Add resource to cache ‘core’ return core.add(baseUrl + relativeUrl); })); }));});
  • 21. Demo from Google I/O 2014: ● fetch this.addEventListener("fetch", function(e) { var request = e.request; if (this.scope.indexOf(request.origin) == -1) { return; } // Basic read-through caching. e.respondWith( caches.match(request, "core").then( function(response) { return response; }, function() { // we didn't have it in the cache, so add it to the cache and return it return caches.get("core").then( function(core) { log("runtime caching:", request.url); // FIXME(slighltyoff): add should take/return an array return core.add(request).then( function(response) { return response; }); // ... Topeka
  • 22. References 1. ServiceWorker first draft published 2. Specification 3. Explainer 4. Implemetation Considerations 5. Service Workers: Bring your own magic 6. Topeka Demo @Google I/O 2014