Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting Started With Service Workers

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.

Jennifer Bland

March 07, 2019

More Decks by Jennifer Bland

Other Decks in Technology


  1. Getting Started With Service Workers Jennifer Bland

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

  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

  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
  9. None
  10. None
  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