$30 off During Our Annual Pro Sale. View Details »

Instant Loading with Service Workers (Chrome De...

Instant Loading with Service Workers (Chrome Dev Summit '15)

Presentation video: https://www.youtube.com/watch?v=jCKZDTtUA2A

Service workers can power your web app while offline, but they can also offer substantial performance benefits while online. We’ll explain how to structure your web app to optimize load time for initial and return visitors, and cover helpful service worker libraries that minimize the amount of boilerplate code you’ll have to write.

Jeffrey Posnick

November 17, 2015
Tweet

More Decks by Jeffrey Posnick

Other Decks in Technology

Transcript

  1. 1 second delay in page times leads to 11% fewer

    page views 16% decrease in customer satisfaction goo.gl/SOR47G
  2. template placeholder Service Worker Installation site-wide styles Contents of /shell

    site-wide JS <head> <style> /* inline styles */ </style> </head> <body> <!-- template insertion point --> <script src="app.js"> </body> Shell
  3. The Life of a Service Worker No Service Worker install

    Event activate Event Idle fetch Event ↪ Cache Clean Up ↪ Handle Network Requests Stopped Stopped
  4. sw-precache in Action Shell // [file, hash] pairs ... [js/app.js,

    hashABC] ... [styles/all.css, hash123] // Service worker code service-worker.js build/{images,js,styles}/**/*
  5. sw-precache in Action: Updates Shell // [file, hash] pairs ...

    [js/app.js, hashXYZ] ... [styles/all.css, hash789] // Service worker code service-worker.js
  6. sw-precache Command-line Interface Shell $ npm install -g sw-precache $

    sw-precache --verbose Caching static resource "./images/back.png" (151 B) Caching static resource "./js/app.js" (319.06 kB) Caching static resource "./js/register-service-worker.js" (546 B) Caching static resource "./js/third-party.js" (245.03 kB) Caching static resource "./service-worker.js" (8.59 kB) Caching static resource "./styles/all.css" (1.82 kB) Total precache size is about 575.19 kB for 6 resources. service-worker.js has been generated with the service worker contents.
  7. gulp.babel.js Shell App Shell Template Partials/Inlines Request Redirection App Shell

    External Styles/Images/JS sw-toolbox Import swPrecache.write('service-worker.js', { dynamicUrlToDependencies: { '/shell': [...glob.sync(`${BUILD_DIR}/rev/js/**/*.js`), ...glob.sync(`${BUILD_DIR}/rev/styles/all*.css`), `${SRC_DIR}/views/index.handlebars`] }, navigateFallback: '/shell', staticFileGlobs: [ `${BUILD_DIR}/rev/js/**/*.js`, `${BUILD_DIR}/rev/styles/all*.css`], importScripts: [`${BUILD_DIR}/sw/sw-toolbox.js`], });
  8. sw-toolbox-config.js Content iFixit API Route toolbox.fastest fallback logic Image Route

    toolbox.cacheFirst LRU cache expiration toolbox.router.get('/api/2.0/(.*)', toolbox.fastest, { origin: /^https:\/\/www.ifixit.com$/ }); const MISSING_IMAGE = '/images/missing.png'; toolbox.cache(MISSING_IMAGE); function imageHandler(request, values, options) { return toolbox.cacheFirst(request, values, options).catch(() => { return caches.match(MISSING_IMAGE); }); } toolbox.router.get('/(.*)', imageHandler, { cache: {name: 'image-cache', maxEntries: 50}, origin: /cloudfront.net$/ });
  9. HTTP Caching Best Practices Still Apply ✓ Add hashes to

    resource file names in your build ↪ /styles/all.css → /styles/all.ed34c56.css ✓ Use far-future HTTP caching headers ↪ Cache-Control: max-age=31536000 Still plays nicely with sw-precache!
  10. Service Workers FTW! But, service workers let you: ✓ Serve

    the HTML for the landing page cache-first... ✓ ...even if that page is server-rendered.