Service Workers: no more offline! (by Maciej Adamczak, http://www.slideshare.net/maciej-adamczak) Code: https://github.com/macku/service-worker Demo: https://macku.github.io/service-worker/demo/

1. Service Workers: no more offline!
Maciej Adamczak
meet.js Lublin | 11-02-2015

2. 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

3. Agenda
• Offline
• What is ServiceWorker?
• Service Worker Standard
• What for and why…?
• API
• Usage examples
• Can I use?
• No more offline?
• Summary
3

4. 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

5. 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 Notification
and Background Sync APIs
5

6. Service Worker Standard
6

7. Service Worker Standard
• postMessage
• Promise
• Web Worker
• Shared Worker
• Request and Response
• Cache
• Fetch
7

8. postMessage: a parent
8

9. postMessage: a child
9

10. Promise: callbacks hell
10

11. Promise: not yet, just a callback
11

12. Promise: not yet, just a callback
12

13. Promise
13

14. Promise
14

15. Promise vs. callback
15

16. Web Worker: starting
16

17. Web Worker: the worker
17

18. Service Worker
• Works like a Web Worker
• Requires installation and activation before
first use
• Can use Cache and CacheStorage APIs
• Intercepts any HTTPS request
18

19. Service Worker API: Installation
19

20. Service Worker API: Checking status
20

21. Service Worker API: The Worker
21

22. Service Worker API: The Fetch
22

23. How to Fetch?
23

24. How to Fetch?
24

25. Can I use?
25

26. Can I use?
26

27. Can I use?
27

28. Can I use?
28

29. Can I use?
29

30. 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

31. No more offline?
31

32. 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

33. THANK YOU LUBLIN!
Maciej Adamczak
meet..js Lublin | 11-02-2015
33