Slide 1

Slide 1 text

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

Slide 20

Slide 20 text

Registering a SW

Slide 21

Slide 21 text

service-worker.js

Slide 22

Slide 22 text

Install Service Worker

Slide 23

Slide 23 text

fetch • DEMO