Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LDNWebPerf November 2016 - Peter O’Shaughnessy

LDNWebPerf November 2016 - Peter O’Shaughnessy

Developing a progressive web app for Snapchat-like selfies has led me to learn about service worker practicalities, client-side image generation and standalone app limitations. I've come unstuck by a Chromium bug and sparked a WICG discussion. Combining the things I've learned along the way with advice I've received from Google…

London Web Performance Group

November 01, 2016

More Decks by London Web Performance Group

Other Decks in Technology


  1. var RESOURCES = ['/images/emojione/1f600.svg', ...]; self.addEventListener('install', function(event) { function onInstall

    () { return caches.open(CACHE_NAME) .then(function(cache) { return cache.addAll(RESOURCES); }); } ); ( Don't cache too much on install! ⚖
  2. 1. SSR app shell & initial page. CSR takes over.

    2. SSR only app shell. JS fetches rest on load. 3. SSR full page. 4. CSR full page. 5 Rendering preferences (in order) 1
  3. const constraints = { width: {ideal: width, max: width}, height:

    {ideal: height, max: height} }; navigator.mediaDevices.getUserMedia({video: constraints}) ... , Don't rely on getUserMedia constraints 6
  4. var link = document.createElement('a'); link.download = 'My Snapwat'; link.href =

    dataURI; link.click(); ( Common <a download> hack ⛏
  5. <input type=”file”> orientation (I used JavaScript-Load- Image) Calculating canvas text

    bounds Text doesn't render when over ~240px? Other tricky things @