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

Instant Loading with Service Workers Jeff Posnick @jeffposnick

App Shell + Service Worker

ifixit-pwa.appspot.com

ifixit-pwa.appspot.com 2G Network, first visit ~ 650ms for above-the-fold

ifixit-pwa.appspot.com 2G Network, second visit ~ 200ms for above-the-fold (~
560ms w/o service worker)

ifixit-pwa.appspot.com 2G Network, new page ~ 225ms for above-the-fold (~
650ms w/o service worker)

Take the Network Out of the Picture

1 second delay in page times leads to 11% fewer
page views 16% decrease in customer satisfaction goo.gl/SOR47G

What’s an App Shell?

Anatomy of an App Shell /shell HTML + styles.css Styles
app.js JavaScript = Shell

Populating an App Shell iFixit API Content Shell

What’s a Service Worker?

An Air Traffic Controller for Your Requests

The Life of a Service Worker No Service Worker install
Event ↪ Cache the App Shell!

GET /shell

template placeholder Service Worker Installation site-wide styles Contents of /shell
site-wide JS <head> <style> /* inline styles */ </style> </head> <body>  <script src="app.js"> </body> Shell

The Life of a Service Worker No Service Worker install
Event activate Event Idle fetch Event ↪ Cache Clean Up ↪ Handle Network Requests Stopped Stopped

Service Worker fetch Interception GET /guide/456 fetch Event /shell (from
cache) Shell

Service Workers without the Work sw-precache Shell sw-toolbox Content

Service Workers without the Work Case Study: goo.gl/HD6ngC

sw-precache for Your App Shell sw-precache + = github.com/GoogleChrome/sw-precache npm
install --save-dev sw-precache Shell

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}/**/*

sw-precache in Action: Updates Shell // [file, hash] pairs ...
[js/app.js, hashXYZ] ... [styles/all.css, hash789] // Service worker code service-worker.js

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.

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`], });

sw-toolbox for Your Dynamic Content sw-toolbox github.com/GoogleChrome/sw-toolbox npm install --save-dev
sw-toolbox Content

Strategy: Cache-first, Network-fallback Content toolbox.cacheFirst

Strategy: Network-first, Cache-fallback Content toolbox.networkFirst

Strategy: Cache/Network Race Content toolbox.fastest

Thinking Strategically Content toolbox.router.get('/images', toolbox.cacheFirst); toolbox.router.get('/api', toolbox.networkFirst); toolbox.router.get('/profile', toolbox.fastest);

Why use sw-toolbox?

Battle Lie-Fi! Content toolbox.router.get( '/path/to/image', toolbox.networkFirst, {networkTimeoutSeconds: 3} );

Rein in Your Caches! Content toolbox.router.get( '/path/to/images/.*', toolbox.cacheFirst, {cache: {
name: 'images', maxEntries: 6 }} );

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$/ });

if (‘serviceWorker’ in navigator) { navigator.serviceWorker.register(‘sw.js’); } else { //
But not all browsers // support service workers! }

Air Traffic Controllers as Progressive Enhancement(?!?)

Initial Visit

Next Visit: Service Worker Supported

Next Visit: Service Worker Not Supported

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!

Service Workers FTW! But, service workers let you: ✓ Serve
the HTML for the landing page cache-first... ✓ ...even if that page is server-rendered.

Next Steps:

Embrace Your Shell!

iFixit API Demo ifixit-pwa.appspot.com github.com/GoogleChrome/sw-precache/ tree/master/app-shell-demo

sw-precache Codelab www.code-labs.io/codelabs/sw-precache/

Polymer Demo zuperkulblog.appspot.com github.com/polymerlabs/ zuperkulblog-progressive

github.com/Google/web-starter-kit

“Vanilla JS” App Shell app-shell.appspot.com github.com/GoogleChrome/application-shell

Instant Loading with Service Workers Jeff Posnick @jeffposnick

Instant Loading with Service Workers (Chrome De...

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

More Decks by Jeffrey Posnick

Other Decks in Technology

Featured

Transcript