Enviar pesquisa
Carregar
Service Worker 101 (en)
•
1 gostou
•
1,014 visualizações
Chang W. Doh
Seguir
Talk about `Service Worker` at GDG Korea Monthly Meetup on Aug. 2016.
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 43
Baixar agora
Baixar para ler offline
Recomendados
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
Recomendados
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
Mais conteúdo relacionado
Mais procurados
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
Mais procurados
(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
Destaque
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
Destaque
(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
Semelhante a 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
Semelhante a 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)
Mais de 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
Mais de 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
Último
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Juan lago vázquez
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
rafiqahmad00786416
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
Overkill Security
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
MIND CTI
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
Khushali Kathiriya
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
Khem
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
lior mazor
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
wesley chun
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Zilliz
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
apidays
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Jeffrey Haguewood
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
Rustici Software
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
Zilliz
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
apidays
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Deepika Singh
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Edi Saputra
Último
(20)
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
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
Baixar agora