service workers: no more offline!
TRANSCRIPT
Service Workers: no more offline!Maciej Adamczak
meet.js Lublin | 11-02-2015
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
Agenda
• Offline• What is ServiceWorker?• Service Worker Standard• What for and why…?• API• Usage examples• Can I use?• No more offline?• Summary
3
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
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
Service Worker Standard
6
Service Worker Standard
• postMessage• Promise• Web Worker• Shared Worker• Request and Response• Cache• Fetch
7
postMessage: a parent
8
postMessage: a child
9
Promise: callbacks hell
10
Promise: not yet, just a callback
11
Promise: not yet, just a callback
12
Promise
13
Promise
14
Promise vs. callback
15
Web Worker: starting
16
Web Worker: the worker
17
Service Worker
• Works like a Web Worker
• Requires installation and activation beforefirst use
• Can use Cache and CacheStorage APIs
• Intercepts any HTTPS request
18
Service Worker API: Installation
19
Service Worker API: Checking status
20
Service Worker API: The Worker
21
Service Worker API: The Fetch
22
How to Fetch?
23
How to Fetch?
24
Can I use?
25
Can I use?
26
Can I use?
27
Can I use?
28
Can I use?
29
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
No more offline?
31
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
THANK YOU LUBLIN!
Maciej Adamczak
meet..js Lublin | 11-02-2015
33