This document discusses background operations in web applications including background sync, periodic background sync, and background fetch. Background sync allows sending data whenever the network is available, periodic background sync gives the feeling of constant connection to the server even when offline, and background fetch allows downloading content from the network without stopping when the network throttles or stops. These background operations help make the user experience less dependent on the network status.

1. Let’s go to the
background
Ran Wahle
Ran Wahle

2. About me
Frontend developer and tech lead @
Tikal
Writes mainly in Angular, loves
vanilla, and moving towards Vue.

3. When network
fails...
Disconnecting, as much as we can,
the user experience from the
network status.

4. Service Worker

5. And today is
about
background
Background sync
Periodic background
sync
Background fetch

6. I want to send
something whenever the
network is on
Background sync

7. Demo, but don’t shut
down your network
Background sync

8. Regular network request

9. Background sync

10. I want to feel like I have
constant connection with the
server, although I may not
Periodic sync

11. Restricted to already
installed apps, frequently
used sites and trusted
networks.
Restricted to PWA context
Periodic sync

12. Main worker
Service worker code

13. The user-agent decides
when to dispatch this
event. You may dispatch it
using dev-tools

15. I want to download from
the network and not
stop even when the
network throttled or
stops.
Background fetch

16. Dispatch

17. Progress

18. onSuccess

19. Let’s demo

20. Lets wrap
Background operations enable
our user experience to be
less dependent on network.
Most of it are in experience
stages, but it looks
promising.

21. Thank you
ran.wahle@gmail.com
ranw@tikalk.com
@ranwahle
Demo code https://github.com/ranwahle/Background-operations