Web Workers,
Service Workers,
and PWA's
Thank you!
Who is Michael Cole?
michael@powma.com
Full-stack. JavaScript. DevOps.
Freelancer. Technologist.
Web Workers,
Service Workers,
and PWA's
Thank you!
Reglar Web Pages
Reglar Web Pages
-
Reglar HTML/CSS/JS
-
Shift-Esc in Chrome to see processes
-
Limited access to CPU/Memory/Disk
-
One process per tab/plugin/extension
-
Can't access memory of other tabs
-
LocalStorage/Cookies/Etc.
-
Reglar Web Pages
-
One process per tab/plugin/extension
-
Can't access memory of other tab
![](https://www.xtremerain.com/wp-content/uploads/2014/12/kill_pages__by_smosh_4evrr-d51xins.png)
Web Workers
-
Create multiple processes
-
Pass messages between them
Web Workers
// index.html - regular web page <script>
// Create worker, using code from your site
w = new Worker('worker.js');
// Listen for results.
w.addEventListener('message', function(event) {
var el = document.getElementById('result');
el.innerHTML += event.data + '\n';
});
// Send data to worker
setTimeout(function() {
console.log('page sends message ...');
w.postMessage('Hello from Page!');
}, 2000);
Web Workers
-
Multiple processes
-
Communicate between them
// worker.js
// Listen for messages from main page w/ string for outgoing messages.
var task = 'Hello from Worker!';
var r = self.addEventListener('message', function(e) {
console.log('... worker got message ' + e.data);
task = e.data;
}, false);
// Fibonacci numbers generator.
// F(0) = 0, F(1) = 1, F(x) = (F(x-2) + F(x-1).
function F(x) {
if (x<2) return x; return F(x-1) + F(x-2);
}
// Send messages with Fibonacci numbers and task string
var i = 0;
setInterval(function() {
self.postMessage(F(i++) + ' ' + task);
}, 200);
// Don't use while(true) {}, or message events won't be processed
-
Multiple processes
-
Messages between (not shared memory)
-
caniuse.com: 96.8%
-
No DOM access (no jQuery, etc)
-
importScripts(url, url)
-
Network via new XMLHttpRequest() or Fetch()
-
-
Practical applications:
-
Browser Cryptominer Malware
-
PDF.js
-
Web Workers
Ctrl-shift-i
Web Workers
Questions?
Service Workers
Service Workers
![](https://s3.amazonaws.com/media-p.slid.es/uploads/361097/images/4606706/serviceworker-caniuse.png)
-
caniuse.com => 91.54%
-
Next Version: Edge, Safari, iOS Safari
Service Workers
Code: https://github.com/MichaelJCole/talk_webworkers
-
All that
-
A JavaScript proxy, to edit responses
of your page's network requests -
Installation life-cycle
-
Push Notifications, etc.
What is a Proxy?
"A Proxy is an intermediary
for requests from clients seeking resources
from other servers."
![](https://s3.amazonaws.com/media-p.slid.es/uploads/361097/images/4606595/unproxy.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/361097/images/4606599/proxy.png)
What is a Proxy?
"A Proxy is an intermediary
for requests from clients seeking resources
from other servers."
![](https://s3.amazonaws.com/media-p.slid.es/uploads/361097/images/4606600/cachingproxy.png)
HEAD
What is a Proxy?
"A Proxy is an intermediary
for requests from clients seeking resources
from other servers."
![](https://s3.amazonaws.com/media-p.slid.es/uploads/361097/images/4606603/pwa.png)
Browser
Service Worker
"A JavaScript proxy, to edit responses
of your page's network requests
Service Workers
-
Web Worker
-
A JavaScript proxy, to edit responses
of your page's network requests -
Installation Life-cycle
-
Push Notifications
Service Workers
Installation Life-Cycle
- Register (from index.html)
ServiceWorkerContainer.register(scriptURL, options).then(...)
- Browser Downloads (redownloads ~every 24 hrs)
Updated ServiceWorker scripts wait until "activated"
- Installs, then Activates
Service Worker listens for events
- Proxy requests with "FetchEvent" FetchEvent.respondWith(stuff)
Service Workers
Register? Install? Notifications?
This sounds like a Native App.
Example?
https://googlechrome.github.io/samples/service-worker/basic/
See also: https://serviceworke.rs/
Service Workers
Register? Install? Notifications?
This sounds like a Native App.
Example? Vue.js PWA starter template.
$ npm install -g vue-cli
$ vue init pwa my-project
$ cd my-project
$ npm install
$ npm run dev
Web Workers, Service Workers, and PWA's
By michaelcole
Web Workers, Service Workers, and PWA's
- 8,184