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
   

   View Slide

2. Jennifer Bland
   Sr. Software Engineer | Google
   Developers Expert
   jenniferbland.com
   codeprep.io
   

   View Slide

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
   

   View Slide

4. Pain of Web Apps
   • Can be slow to load
   
   • No notification from website
   
   • Images may not show
   
   • Cannot interact if offline
   

   View Slide

5. Native Apps
   • Leverage the power of the operating system
   
   • Background Sync
   
   • Offline-First
   
   • Push Notifications3
   

   View Slide

6. Progressive Web App
   • Web app
   
   • Provides native app functionality
   

   View Slide

7. What is a Service Worker?
   • JavaScript file you add to your website
   
   • Use it to do offline and background stuff
   

   View Slide

8. What Can They Do?
   • Display an offline page
   
   • Store pages offline
   
   • Store content in the cache
   
   • Push notifications
   
   • Background Sync
   

   View Slide

9. View Slide

10. View Slide

11. Service Worker Lifecycle
    

    View Slide

12. Service Worker as a Proxy
    

    View Slide

13. Service Worker Fetch Modes
    Cache Only
    

    View Slide

14. Service Worker Fetch Modes
    Network Only
    

    View Slide

15. Service Worker Fetch Modes
    Cache, Falling Back to Network
    

    View Slide

16. Service Worker Fetch Modes
    Network, Falling Back to Cache
    

    View Slide

17. Service Worker Fetch Modes
    Stale While Revalidate
    

    View Slide

18. Service Worker Fetch Modes
    Generic Fallback
    

    View Slide

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
    

    View Slide

20. Registering a SW
    

    View Slide

21. service-worker.js
    

    View Slide

22. Install Service Worker
    

    View Slide

23. fetch
    • DEMO
    

    View Slide