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
Tweet

More Decks by Jennifer Bland

Other Decks in Technology

Transcript

  1. Getting Started With
    Service Workers
    Jennifer Bland

    View full-size slide

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

    View full-size 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 full-size slide

  4. Pain of Web Apps
    • Can be slow to load

    • No notification from website

    • Images may not show

    • Cannot interact if offline

    View full-size slide

  5. Native Apps
    • Leverage the power of the operating system

    • Background Sync

    • Offline-First

    • Push Notifications3

    View full-size slide

  6. Progressive Web App
    • Web app

    • Provides native app functionality

    View full-size slide

  7. What is a Service Worker?
    • JavaScript file you add to your website

    • Use it to do offline and background stuff

    View full-size slide

  8. What Can They Do?
    • Display an offline page

    • Store pages offline

    • Store content in the cache

    • Push notifications

    • Background Sync

    View full-size slide

  9. Service Worker Lifecycle

    View full-size slide

  10. Service Worker as a Proxy

    View full-size slide

  11. Service Worker Fetch Modes
    Cache Only

    View full-size slide

  12. Service Worker Fetch Modes
    Network Only

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. Service Worker Fetch Modes
    Stale While Revalidate

    View full-size slide

  16. Service Worker Fetch Modes
    Generic Fallback

    View full-size slide

  17. 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 full-size slide

  18. Registering a SW

    View full-size slide

  19. service-worker.js

    View full-size slide

  20. Install Service Worker

    View full-size slide

  21. fetch
    • DEMO

    View full-size slide