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