Getting Started With Service Workers

A Service Worker is a relatively new API that’s been introduced in modern web browsers in the last few years. It’s a special kind of web worker that can be installed in your browser to provide features that were previously unavailable to ordinary web pages. Find out how to create them and use them in a Progressive Web App.

Transcript

1. Getting Started With Service Workers Jennifer Bland
2. Jennifer Bland Sr. Software Engineer | Google Developers Expert jenniferbland.com codeprep.io
3. 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
4. Pain of Web Apps • Can be slow to load • No notification from website • Images may not show • Cannot interact if offline
5. Native Apps • Leverage the power of the operating system • Background Sync • Offline-First • Push Notifications3
6. Progressive Web App • Web app • Provides native app functionality
7. What is a Service Worker? • JavaScript file you add to your website • Use it to do offline and background stuff
8. What Can They Do? • Display an offline page • Store pages offline • Store content in the cache • Push notifications • Background Sync
11. Service Worker Lifecycle
12. Service Worker as a Proxy
13. Service Worker Fetch Modes Cache Only
14. Service Worker Fetch Modes Network Only
15. Service Worker Fetch Modes Cache, Falling Back to Network
16. Service Worker Fetch Modes Network, Falling Back to Cache
17. Service Worker Fetch Modes Stale While Revalidate
18. Service Worker Fetch Modes Generic Fallback
19. 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
20. Registering a SW
21. service-worker.js
22. Install Service Worker
23. fetch • DEMO