service workers: no more offline!
TRANSCRIPT
![Page 1: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/1.jpg)
Service Workers: no more offline!Maciej Adamczak
meet.js Lublin | 11-02-2015
![Page 2: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/2.jpg)
about:me
• Senior Front-End Developer
• 7+ years of Web Development experience
• AngularJS Developer
• Automatization enthusiast
• Fan of web based mobile apps
• Privately a runner, reader addict and cooking lover
2
![Page 3: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/3.jpg)
Agenda
• Offline• What is ServiceWorker?• Service Worker Standard• What for and why…?• API• Usage examples• Can I use?• No more offline?• Summary
3
![Page 4: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/4.jpg)
Offline (mobile)
Lack of the connectivity with network while using either wireless connection or while being connected to device with internet access.
• Mobile Internet (GPRS, Edge, 3G, HSDPA, LTE)
• Wi-Fi
• Bluetooth
• other
4
![Page 5: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/5.jpg)
What is Service Worker?
• A client-side proxy server with programmatic API
• Allows to intercept network requests
• Runs in a background (own browser thread)
• Supports only HTTPS requests
• In the future will be integrated with Push Notificationand Background Sync APIs
5
![Page 6: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/6.jpg)
Service Worker Standard
6
![Page 7: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/7.jpg)
Service Worker Standard
• postMessage• Promise• Web Worker• Shared Worker• Request and Response• Cache• Fetch
7
![Page 8: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/8.jpg)
postMessage: a parent
8
![Page 9: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/9.jpg)
postMessage: a child
9
![Page 10: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/10.jpg)
Promise: callbacks hell
10
![Page 11: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/11.jpg)
Promise: not yet, just a callback
11
![Page 12: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/12.jpg)
Promise: not yet, just a callback
12
![Page 13: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/13.jpg)
Promise
13
![Page 14: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/14.jpg)
Promise
14
![Page 15: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/15.jpg)
Promise vs. callback
15
![Page 16: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/16.jpg)
Web Worker: starting
16
![Page 17: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/17.jpg)
Web Worker: the worker
17
![Page 18: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/18.jpg)
Service Worker
• Works like a Web Worker
• Requires installation and activation beforefirst use
• Can use Cache and CacheStorage APIs
• Intercepts any HTTPS request
18
![Page 19: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/19.jpg)
Service Worker API: Installation
19
![Page 20: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/20.jpg)
Service Worker API: Checking status
20
![Page 21: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/21.jpg)
Service Worker API: The Worker
21
![Page 22: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/22.jpg)
Service Worker API: The Fetch
22
![Page 23: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/23.jpg)
How to Fetch?
23
![Page 24: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/24.jpg)
How to Fetch?
24
![Page 25: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/25.jpg)
Can I use?
25
![Page 26: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/26.jpg)
Can I use?
26
![Page 27: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/27.jpg)
Can I use?
27
![Page 28: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/28.jpg)
Can I use?
28
![Page 29: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/29.jpg)
Can I use?
29
![Page 30: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/30.jpg)
Can I use?
30
• Chrome 40 (released)– Both dekstop and mobile (android) based browsers
• Firefox Nightly– Partial support, requires enabling on about:config
• Internet Explorer– Under consideration :(
• Safari– Unknown :(
• Opera 27– Jus like Chrome
![Page 31: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/31.jpg)
No more offline?
31
![Page 32: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/32.jpg)
References
• http://www.w3.org/TR/service-workers/
• https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API
• http://www.html5rocks.com/en/tutorials/service-worker/introduction/
• https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers
• https://jakearchibald.github.io/isserviceworkerready/#serviceworker-enthusiasm
• http://www.chromium.org/blink/serviceworker
• http://www.chromium.org/blink/serviceworker/service-worker-faq
• https://hacks.mozilla.org/2014/06/serviceworkers-and-firefox/
• http://caniuse.com/#search=service%20worker
• https://status.modern.ie/serviceworker
32
![Page 33: Service Workers: no more offline!](https://reader030.vdocument.in/reader030/viewer/2022032420/55a5ea841a28abb6128b48fa/html5/thumbnails/33.jpg)
THANK YOU LUBLIN!
Maciej Adamczak
meet..js Lublin | 11-02-2015
33