Submit Search
Upload
Service Worker 101 (en)
•
1 like
•
1,014 views
Chang W. Doh
Follow
Talk about `Service Worker` at GDG Korea Monthly Meetup on Aug. 2016.
Read less
Read more
Technology
Report
Share
Report
Share
1 of 43
Download Now
Download to read offline
Recommended
Service Worker 201 (en)
Service Worker 201 (en)
Chang W. Doh
Nodejs web service for starters
Nodejs web service for starters
Bruce Li
ServiceWorker: New game changer is coming!
ServiceWorker: New game changer is coming!
Chang W. Doh
General Assembly Workshop: Advanced JavaScript
General Assembly Workshop: Advanced JavaScript
Spike Brehm
Building Isomorphic Apps (JSConf.Asia 2014)
Building Isomorphic Apps (JSConf.Asia 2014)
Spike Brehm
Npm scripts
Npm scripts
정윤 김
Js unit testing
Js unit testing
Mihail Irintchev
Introduction to REST API with Node.js
Introduction to REST API with Node.js
Yoann Gotthilf
More Related Content
What's hot
Backbone.js
Backbone.js
Omnia Helmi
Developing large scale JavaScript applications
Developing large scale JavaScript applications
Milan Korsos
Continuous Integration for front-end JavaScript
Continuous Integration for front-end JavaScript
Lars Thorup
Workshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General Overview
Visual Engineering
An Intro into webpack
An Intro into webpack
Squash Apps Pvt Ltd
Web workers
Web workers
Surbhi Mathur
Packing it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to now
Derek Willian Stavis
Angular2 ecosystem
Angular2 ecosystem
Kamil Lelonek
Building a Startup Stack with AngularJS
Building a Startup Stack with AngularJS
FITC
Drive chrome(headless) with puppeteer
Drive chrome(headless) with puppeteer
VodqaBLR
Node js
Node js
Rohan Chandane
Module, AMD, RequireJS
Module, AMD, RequireJS
偉格 高
JavaScript Web Workers
JavaScript Web Workers
Tobias Pfeiffer
Websockets and SockJS, Real time chatting
Websockets and SockJS, Real time chatting
University of Alabama at Birmingham
Getting Started with HTML 5 Web workers
Getting Started with HTML 5 Web workers
Flumes
The 5 Layers of Web Accessibility
The 5 Layers of Web Accessibility
Dirk Ginader
JavaScript Dependencies, Modules & Browserify
JavaScript Dependencies, Modules & Browserify
Johan Nilsson
#2 Hanoi Magento Meetup - Part 2: Knockout JS
#2 Hanoi Magento Meetup - Part 2: Knockout JS
Hanoi MagentoMeetup
Webpack
Webpack
Anjali Chawla
Webpack Introduction
Webpack Introduction
Anjali Chawla
What's hot
(20)
Backbone.js
Backbone.js
Developing large scale JavaScript applications
Developing large scale JavaScript applications
Continuous Integration for front-end JavaScript
Continuous Integration for front-end JavaScript
Workshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General Overview
An Intro into webpack
An Intro into webpack
Web workers
Web workers
Packing it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to now
Angular2 ecosystem
Angular2 ecosystem
Building a Startup Stack with AngularJS
Building a Startup Stack with AngularJS
Drive chrome(headless) with puppeteer
Drive chrome(headless) with puppeteer
Node js
Node js
Module, AMD, RequireJS
Module, AMD, RequireJS
JavaScript Web Workers
JavaScript Web Workers
Websockets and SockJS, Real time chatting
Websockets and SockJS, Real time chatting
Getting Started with HTML 5 Web workers
Getting Started with HTML 5 Web workers
The 5 Layers of Web Accessibility
The 5 Layers of Web Accessibility
JavaScript Dependencies, Modules & Browserify
JavaScript Dependencies, Modules & Browserify
#2 Hanoi Magento Meetup - Part 2: Knockout JS
#2 Hanoi Magento Meetup - Part 2: Knockout JS
Webpack
Webpack
Webpack Introduction
Webpack Introduction
Viewers also liked
JAVASCRIPT: Future of Web Development
JAVASCRIPT: Future of Web Development
Deepak Jha
The Future of Web Design
The Future of Web Design
Vince Moran
Design Process in the Responsive Age
Design Process in the Responsive Age
Pon Kattera
What is next for the web
What is next for the web
Chang W. Doh
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016
Robert Nyman
Progressive Web Apps [pt_BR]
Progressive Web Apps [pt_BR]
Evandro Santos
Future Web Trends - at Innovation series with Jimmy Wales
Future Web Trends - at Innovation series with Jimmy Wales
Matthew Buckland
Introduce Angular2 & render & firebase flow
Introduce Angular2 & render & firebase flow
Caesar Chi
The web‘s next adventure(s)
The web‘s next adventure(s)
Rakuten Group, Inc.
The Future of the Web: HTML5
The Future of the Web: HTML5
Derek Bender
The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017
Christian Heilmann
Viewers also liked
(11)
JAVASCRIPT: Future of Web Development
JAVASCRIPT: Future of Web Development
The Future of Web Design
The Future of Web Design
Design Process in the Responsive Age
Design Process in the Responsive Age
What is next for the web
What is next for the web
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016
Progressive Web Apps [pt_BR]
Progressive Web Apps [pt_BR]
Future Web Trends - at Innovation series with Jimmy Wales
Future Web Trends - at Innovation series with Jimmy Wales
Introduce Angular2 & render & firebase flow
Introduce Angular2 & render & firebase flow
The web‘s next adventure(s)
The web‘s next adventure(s)
The Future of the Web: HTML5
The Future of the Web: HTML5
The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017
Similar to Service Worker 101 (en)
Automated JavaScript Deobfuscation - PacSec 2007
Automated JavaScript Deobfuscation - PacSec 2007
Stephan Chenette
Proposal
Proposal
Constantine Priemski
Introduction to Node.js
Introduction to Node.js
Aaron Rosenberg
Node js
Node js
Chirag Parmar
Nodejs
Nodejs
Bhushan Patil
Developing high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web worker
Suresh Patidar
Html web workers
Html web workers
AbhishekMondal42
GWT = easy AJAX
GWT = easy AJAX
Olivier Gérardin
Introduction to Node.js
Introduction to Node.js
Vikash Singh
Day In A Life Of A Node.js Developer
Day In A Life Of A Node.js Developer
Edureka!
Day in a life of a node.js developer
Day in a life of a node.js developer
Edureka!
Node azure
Node azure
Emanuele DelBono
Electron - cross platform desktop applications made easy
Electron - cross platform desktop applications made easy
Ulrich Krause
NodeJS guide for beginners
NodeJS guide for beginners
Enoch Joshua
learn mvc project in 7 day
learn mvc project in 7 day
Quach Long
Basic API Creation with Node.JS
Basic API Creation with Node.JS
Azilen Technologies Pvt. Ltd.
What is Node.js? (ICON UK)
What is Node.js? (ICON UK)
Tim Davis
Real time web
Real time web
Medhat Dawoud
Nodejs
Nodejs
Vinod Kumar Marupu
Ajax Performance
Ajax Performance
kaven yan
Similar to Service Worker 101 (en)
(20)
Automated JavaScript Deobfuscation - PacSec 2007
Automated JavaScript Deobfuscation - PacSec 2007
Proposal
Proposal
Introduction to Node.js
Introduction to Node.js
Node js
Node js
Nodejs
Nodejs
Developing high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web worker
Html web workers
Html web workers
GWT = easy AJAX
GWT = easy AJAX
Introduction to Node.js
Introduction to Node.js
Day In A Life Of A Node.js Developer
Day In A Life Of A Node.js Developer
Day in a life of a node.js developer
Day in a life of a node.js developer
Node azure
Node azure
Electron - cross platform desktop applications made easy
Electron - cross platform desktop applications made easy
NodeJS guide for beginners
NodeJS guide for beginners
learn mvc project in 7 day
learn mvc project in 7 day
Basic API Creation with Node.JS
Basic API Creation with Node.JS
What is Node.js? (ICON UK)
What is Node.js? (ICON UK)
Real time web
Real time web
Nodejs
Nodejs
Ajax Performance
Ajax Performance
More from Chang W. Doh
Exploring what're new in Web for the Natively app
Exploring what're new in Web for the Natively app
Chang W. Doh
Kotlin의 코루틴은 어떻게 동작하는가
Kotlin의 코루틴은 어떻게 동작하는가
Chang W. Doh
Hey Kotlin, How it works?
Hey Kotlin, How it works?
Chang W. Doh
Kotlin, 어떻게 동작하나요
Kotlin, 어떻게 동작하나요
Chang W. Doh
introduction to Web Assembly
introduction to Web Assembly
Chang W. Doh
PWA Roadshow Seoul - Keynote
PWA Roadshow Seoul - Keynote
Chang W. Doh
PWA Roadshow Seoul - HTTPS
PWA Roadshow Seoul - HTTPS
Chang W. Doh
CSS 다시 파서 어디에 쓰나
CSS 다시 파서 어디에 쓰나
Chang W. Doh
Natively Web App & Service Worker
Natively Web App & Service Worker
Chang W. Doh
초보 개발자를 위한 웹 프론트엔드 개발 101
초보 개발자를 위한 웹 프론트엔드 개발 101
Chang W. Doh
Service Worker 201 (한국어)
Service Worker 201 (한국어)
Chang W. Doh
Service Worker 101 (한국어)
Service Worker 101 (한국어)
Chang W. Doh
Instant and offline apps with Service Worker
Instant and offline apps with Service Worker
Chang W. Doh
Chrome enchanted 2015
Chrome enchanted 2015
Chang W. Doh
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
Chang W. Doh
Polymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymer
Chang W. Doh
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations
Chang W. Doh
SOSCON 2014: 문서 기반의 오픈소스 기여하기
SOSCON 2014: 문서 기반의 오픈소스 기여하기
Chang W. Doh
Chromium: NaCl and Pepper API
Chromium: NaCl and Pepper API
Chang W. Doh
Cache in Chromium: Disk Cache
Cache in Chromium: Disk Cache
Chang W. Doh
More from Chang W. Doh
(20)
Exploring what're new in Web for the Natively app
Exploring what're new in Web for the Natively app
Kotlin의 코루틴은 어떻게 동작하는가
Kotlin의 코루틴은 어떻게 동작하는가
Hey Kotlin, How it works?
Hey Kotlin, How it works?
Kotlin, 어떻게 동작하나요
Kotlin, 어떻게 동작하나요
introduction to Web Assembly
introduction to Web Assembly
PWA Roadshow Seoul - Keynote
PWA Roadshow Seoul - Keynote
PWA Roadshow Seoul - HTTPS
PWA Roadshow Seoul - HTTPS
CSS 다시 파서 어디에 쓰나
CSS 다시 파서 어디에 쓰나
Natively Web App & Service Worker
Natively Web App & Service Worker
초보 개발자를 위한 웹 프론트엔드 개발 101
초보 개발자를 위한 웹 프론트엔드 개발 101
Service Worker 201 (한국어)
Service Worker 201 (한국어)
Service Worker 101 (한국어)
Service Worker 101 (한국어)
Instant and offline apps with Service Worker
Instant and offline apps with Service Worker
Chrome enchanted 2015
Chrome enchanted 2015
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
Polymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymer
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations
SOSCON 2014: 문서 기반의 오픈소스 기여하기
SOSCON 2014: 문서 기반의 오픈소스 기여하기
Chromium: NaCl and Pepper API
Chromium: NaCl and Pepper API
Cache in Chromium: Disk Cache
Cache in Chromium: Disk Cache
Recently uploaded
20150722 - AGV
20150722 - AGV
Jamie (Taka) Wang
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
infogdgmi
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Aijun Zhang
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
SkyPlanner
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
bruanjhuli
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
Matt Ray
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Safe Software
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
YounusS2
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
IES VE
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
Brian Pichman
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UbiTrack UK
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
Liveplex
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
David Newbury
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
Jamie (Taka) Wang
Nanopower In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
Pedro Manuel
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
shyamraj55
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
DianaGray10
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
Matsuo Lab
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
Bachir Benyammi
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
dgelyza
Recently uploaded
(20)
20150722 - AGV
20150722 - AGV
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
COMPUTER 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 OpenCost
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
Nanopower In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
Service Worker 101 (en)
1.
Service Worker 101 @cwdoh, GDE for Web 1
2.
Web Worker 2
3.
What will happen from the following code: var till = Date.now() + 5000; while(Date.now() < till) {} 3
4.
Freeeee...eeeeze!!! Can't do anything such as scroll, click, ... 4
5.
Your JavaScipt codes runs on UI thread It means that your code always try to block rendering under your control. :‒p 5
6.
Long queue makes others unhappy. 6
7.
Web Worker will rescue your browser Yeah, if you wrote right codes, and find nice customers using modern browser...probably... 7
8.
Web Workers An API that allows to spawn background workers running scripts in parallel to their main page. This allows for thread‒like operation with message‒ passing as the coordination mechanism. 8
9.
Web Worker is a browser feature for Running scripts: thread‒likely in Background with message‒passing 9
10.
Common rules of Web Worker Has own global scope Can't directly manipulate the DOM Can't use all of properties and method in window scope 10
11.
Code Thread‒like operation with message‒passing 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); }; 11
12.
Shared Worker 12
13.
Shared Worker A specific kind of worker that can be accessed from several browsing contexts, such as several windows, iframes or even workers. They implement an interface different than dedicated workers and have a different global scope, SharedWorkerGlobalScope. 13
14.
Shared Worker is a specific kind of worker: Accessible from several browsing contexts Different interface Different global scope 14
15.
Usally we call dedicated worker , if it's not shared. 15
16.
Service Worker 16
17.
W3C Specification: A method that enables applications to take advantage of persistent background processing, including hooks to enable bootstrapping of web applications while offline. 17
18.
The core of this system is an event‒driven Web Worker, which responds to events dispatched from documents and other sources. 18
19.
A system for managing installation, versions, and upgrades is provided. 19
20.
The service worker is a generic entry point for event‒driven background processing in the Web Platform that is extensible by other specifications. 20
21.
Service Worker is another type of worker for persistent background processing Having an event‒driven model Managing installation, versions and upgrades Generic entry point for other specifications 21
22.
Dedicated/Shared Worker vs Service Worker 22
23.
Dedicated Worker & Shared Worker: Runtime , Creation , Browsing context A thread‒like things can be created at runtime. You should create Worker and control it at runtime. Only available when page is loaded and created it. You should create it at every time when wanna use it again. 23
24.
ServiceWorker: Persistent , installation , browser Daemon‒like thing can be install on system aka browser. Lifecycle is independent from webpage or browser. Provide version control for update from system Nicely fit as entry‒point to Remote Notification, Background Sync. and so on. 24
25.
REMINDER: Persistent background processing is a goal of service worker, and it decided all of service worker mechanism 25
26.
Why event‒driven model? Promised events enable Persistent background processing even if page isn't loading. It helps of implementing features that need something more than pages. 26
27.
Spawn? No, install! spawn would be executed at runtime. 27
28.
Lifecycle 28
29.
2.1.1 lifetime The lifetime of a service worker is tied to the execution lifetime of events, not references held by service worker clients to the ServiceWorker object. The user agent may terminate service workers at any time it has no event to handle or detects abnormal operation such as infinite loops and tasks exceeding imposed time limits, if any, while handling the events. 29
30.
ServiceWorkerState enum ServiceWorkerState { "installing", "installed", "activating", "activated", "redundant" }; 30
31.
31
32.
Sevice Worker families 32
33.
Offline Cache Make your own dinosaurs! :‒p 33
34.
Remote Push Notification A long time ago in a galaxy far, far away...there are spams 34
35.
Background Sync. Browser let you know perfect time to connect to server. 35
36.
❤ HTTPS For avoiding man‒in‒the‒middle‒attack However you can use 127.0.0.1 aka localhost without certificate for testing your module. 36
37.
Show me the money code! Simple Demo: random image for same request. :‒p 37
38.
Pros. and Cons. What do we have to think about before adopting SW? 38
39.
There's no Polyfills! Everything has two sides. We don't need to manage polyfills and check our codes run well on cross‒browsing environments. :‒) We don't use polyfill for using SW features on unsupport browsers. :‒/ 39
40.
Adopting it progressively if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(function(registration) { // registered your services depend on SW. :‐) if (enableServiceWorkerFeatures(registration)) { // show some helpful message. showSomeToastMessage(); } }); } 40
41.
Links [1/2] Specifications Service Worker Push API Notification API Fetch API Some articles Offline cookbook 2016 ‒ the year of web streams Push notifications on the open Web Web Push Encryption Is service worker ready? 41
42.
Links [2/2] Case studies Production case studies @developers.google.com Codes Service Worker 101 simple demo code Simple Push Demo by @gauntface Tools sw‒precache sw‒toolbox 42
43.
Thank you! 43
Download Now