Getting Started With
Service Workers
Jennifer Bland
Slide 2
Slide 2 text
Jennifer Bland
Sr. Software Engineer | Google
Developers Expert
jenniferbland.com
codeprep.io
Slide 3
Slide 3 text
3 Truths 1 Lie
• My senior year of high school cost more
than my freshman year at University
• I graduated university before IBM
introduced the PC AT
• I earned my MBA before Internet was
introduced
• I made only all A’s in University except
for 1 course
Slide 4
Slide 4 text
Pain of Web Apps
• Can be slow to load
• No notification from website
• Images may not show
• Cannot interact if offline
Slide 5
Slide 5 text
Native Apps
• Leverage the power of the operating system
• Background Sync
• Offline-First
• Push Notifications3
Slide 6
Slide 6 text
Progressive Web App
• Web app
• Provides native app functionality
Slide 7
Slide 7 text
What is a Service Worker?
• JavaScript file you add to your website
• Use it to do offline and background stuff
Slide 8
Slide 8 text
What Can They Do?
• Display an offline page
• Store pages offline
• Store content in the cache
• Push notifications
• Background Sync
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Service Worker Lifecycle
Slide 12
Slide 12 text
Service Worker as a Proxy
Slide 13
Slide 13 text
Service Worker Fetch Modes
Cache Only
Slide 14
Slide 14 text
Service Worker Fetch Modes
Network Only
Slide 15
Slide 15 text
Service Worker Fetch Modes
Cache, Falling Back to Network
Slide 16
Slide 16 text
Service Worker Fetch Modes
Network, Falling Back to Cache
Slide 17
Slide 17 text
Service Worker Fetch Modes
Stale While Revalidate
Slide 18
Slide 18 text
Service Worker Fetch Modes
Generic Fallback
Slide 19
Slide 19 text
Service Worker Notes
• Works on HTTPS only, or localhost
• Has controlled scopes
• Runs in background, in a separate thread
• Only one SW activated at a time