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
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
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
JAVASCRIPT: Future of Web Development
JAVASCRIPT: Future of Web Development
Deepak Jha
The Future of Web Design
The Future of Web Design
Vince Moran
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
Node J pdf.docx
Node J pdf.docx
PSK Technolgies Pvt. Ltd. IT Company Nagpur
Node J pdf.docx
Node J pdf.docx
PSK Technolgies Pvt. Ltd. IT Company Nagpur
node_js.pptx
node_js.pptx
dipen55
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
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
Node J pdf.docx
Node J pdf.docx
Node J pdf.docx
Node J pdf.docx
node_js.pptx
node_js.pptx
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)
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
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Maria Levchenko
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
soniya singh
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
gurkirankumar98700
Slack Application Development 101 Slides
Slack Application Development 101 Slides
praypatel2
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
Ridwan Fadjar
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
Pooja Nehwal
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Delhi Call girls
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
ThousandEyes
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Malak Abu Hammad
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
The Digital Insurer
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
Pixlogix Infotech
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
shyamraj55
Recently uploaded
(20)
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Slack Application Development 101 Slides
Slack Application Development 101 Slides
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
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