Skip to content

Instantly share code, notes, and snippets.

@glennreyes
Created June 2, 2016 18:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save glennreyes/ca5c2f58c2ca2ee0525537e71357bde9 to your computer and use it in GitHub Desktop.
Save glennreyes/ca5c2f58c2ca2ee0525537e71357bde9 to your computer and use it in GitHub Desktop.
Notes on Progressive Webapps with Nolan Lawson

Progressive Webapps

Application Shell

  • Progressive rendering
    • Don't show a blank screen
  • Progressive enhancement

Strategies

  • Server-side HTML
    • React

IndexedDB/WebSQL for data storage

  • localForage
  • capable API
  • IDB is fast, but blocks the DOM
  • Web Workers mitigate this
  • No IDB+WW in Safari, use pseudo-worker

60fps animations

  • Only use hardware-accelerated:
    • transform
    • opacity
    • Q: colors?
      • A: 2 layers -> opacity

FLIP animations

Workshop: Web Starter Kit

https://gist.github.com/nolanlawson

Secrets

  • chrome://flags
    • enable "Developer Tools experiments"
    • in Experiments tab in DevTools: hit shift-key 6 times! 😎

Tools

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment