Download - Service workers - Velocity 2016 Training
![Page 1: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/1.jpg)
DEBUGGINGFRONT-END PERFORMANCE
Tim Kadlec (@tkadlec) & Pat Meenan (@patmeenan)June 20-21, 2016 at Velocity Conference (#velocityconf)
![Page 2: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/2.jpg)
SERVICE WORKERS
![Page 3: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/3.jpg)
RESOURCE FETCHING (IN CHROME)
DOM
![Page 4: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/4.jpg)
RESOURCE FETCHING (IN CHROME)
DOM
In-memory Resource
Cache
![Page 5: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/5.jpg)
RESOURCE FETCHING (IN CHROME)
DOM
In-memory Resource
Cache
Resource Fetcher
![Page 6: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/6.jpg)
RESOURCE FETCHING (IN CHROME)
DOM Resource Fetcher
Net Stack
In-memory Resource
Cache
![Page 7: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/7.jpg)
RESOURCE FETCHING (IN CHROME)
DOM
In-memory Resource
Cache
Resource Fetcher
Net Stack
Disk Cache
![Page 8: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/8.jpg)
RESOURCE FETCHING (IN CHROME)
DOM
In-memory Resource
Cache
Resource Fetcher
Net Stack Net
Disk Cache
![Page 9: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/9.jpg)
RESOURCE FETCHING (IN CHROME)
DOM
In-memory Resource
Cache
Resource Fetcher
Net Stack Net
Disk Cache
Service Worker
![Page 10: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/10.jpg)
• Sees every request for your documento Including cross-origino And headers
• Can synthesize responses• Supports fetch• Has a programmable cache and Indexed DB
CAPABILITIES
![Page 11: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/11.jpg)
• HTTPS documents only• Not active for first view• iFrames are separate documents• Non-CORS Cross-origin responses are opaque• No global stateo or concept of a “page”
• No Sync API’s (localstorage, XHR, etc)
LIMITATIONS
![Page 12: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/12.jpg)
BROWSER SUPPORT
http://caniuse.com/#feat=serviceworkers
![Page 13: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/13.jpg)
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/my-app/sw.js', { scope: '/my-app/' });}
REGISTRATION
![Page 14: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/14.jpg)
• Honors caching headers• Forced re-download every 24 hours
DOWNLOAD
![Page 15: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/15.jpg)
self.addEventListener('install', function(event) { event.waitUntil( fetchStuffAndInitDatabases() );});
To install immediately:event.waitUntil(self.skipWaiting());
INSTALLATION EVENT
![Page 16: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/16.jpg)
self.addEventListener('activate', function(event) { // You're good to go!});
To activate immediately:event.waitUntil(self.clients.claim());
ACTIVATION EVENT
![Page 17: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/17.jpg)
From Page:navigator.serviceWorker.controller.postMessage(message);
In Service Worker:self.addEventListener('message', function(event) {}
MESSAGING
![Page 18: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/18.jpg)
self.addEventListener('fetch', function(event) { event.respondWith(new Response("Hello world!"));});
REQUEST INTERCEPTION
![Page 19: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/19.jpg)
self.importScripts('foo.js');self.importScripts(‘https://ads/offlineads.js');
IMPORTS
![Page 20: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/20.jpg)
Some Use Cases
![Page 21: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/21.jpg)
• Chrome New Tab Page• Flipkart
OFFLINE
![Page 22: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/22.jpg)
• Fetch Request Normally• For non-200 responses serve a local error page• Not just server errors:o DNS failureso CDN/Proxy Errorso Intermediaries
CUSTOM ERROR PAGES
![Page 23: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/23.jpg)
• Identify requests of interesto 3rd-party javascripto Fonts
• Set a timer• Pass fetch requests through• If timer expires before fetch completes
generate error response
SPOF PREVENTION / SLA
![Page 24: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/24.jpg)
• Identify CDN requests by URL• Set a timer• Pass fetch request through• If timer expires, create fetch request to origin• Respond with first fetch request to complete
CDN / ORIGIN FAILOVER
![Page 25: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/25.jpg)
• Identify CDN requests by URL• Replace CDN domain with alternate CDN (or
origin)• Keep track of performance by origin• Prefer faster origin (keep measuring)
• Could also race the CDNs in parallelo Be careful about increased data
MULTI ORIGIN / CDN
![Page 26: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/26.jpg)
• Respond with local cached resourceo Ignoring Expires, max-age, etc.
• Pass fetch request through in parallel• Update cache with new response
• Works best for known resources (analytics/ads JS, etc)
STALE-WHILE-REVALIDATE
![Page 27: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/27.jpg)
• Custom response headers with prefetch resources
• When idle, prefetch suggested resources
PREFETCH
![Page 28: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/28.jpg)
• Delta compression for build->build updateso Include version in URL schemeo Get latest version number from cacheo Request delta from servero Apply patcho Cache new version
• New compression algorithms
DELTA COMPRESSION
![Page 29: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/29.jpg)
• New compression algorithmso Brotlio Fractal image compressiono JSON-specific dictionarieso Application-specific
• Prove-out new algorithms before standardizing• …as long as it can be implemented in JS and
code size is reasonable
CUSTOM COMPRESSION
![Page 30: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/30.jpg)
• Identify JPEG image requests from known origin
• Synthesize response• Range request (or smarter) for first few scans• Stream initial range into synthesized response• Range request for remaining image (some
point later)• Append remaining data into synthesized
response
INCREMENTAL PROGRESSIVE IMAGES
![Page 31: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/31.jpg)
• 930 x 11,362 px WebPageTest waterfall• 351KB compressed PNG• 42 MB in-memory (server) to generate• < 20KB compressed JSON data to describe
• Prefer actual images for WPT waterfalls for easier embeddingo Otherwise SVG, Canvas or DOM would work
DRAWING IMAGES LOCALLY
![Page 32: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/32.jpg)
• Identify appropriate requests (i.e. waterfall.png?...)
• Fetch data necessary to draw image• Draw to canvas• Extract as PNG• Synthesize PNG response
DRAWING IMAGES LOCALLY
![Page 33: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/33.jpg)
• Pass all requests through• Passively observe timings and success• Report metrics back• Gives visibility into failures and requests that are
in flighto Unlike resource timing
METRICS / DEBUGGING
![Page 34: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/34.jpg)
• Background Sync• WebRTC Data Channels?o Custom protocol/fetching
o GeoFencing?o Required for:o Push Notifications
EVOLVING…
![Page 35: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/35.jpg)
Debugging
![Page 36: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/36.jpg)
![Page 37: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/37.jpg)
![Page 38: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/38.jpg)
![Page 39: Service workers - Velocity 2016 Training](https://reader034.vdocuments.site/reader034/viewer/2022042906/58a99b1c1a28abc2518b5955/html5/thumbnails/39.jpg)
THANK YOU!
Tim Kadlec (@tkadlec) & Pat Meenan (@patmeenan)June 20-21, 2016 at Velocity Conference (#velocityconf)
Icons courtesy of The Noun Project