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

Progressive Web App at Google I/O 2016

Jimmy Moon
September 20, 2016
69

Progressive Web App at Google I/O 2016

Summary of Progressive Web App at Google I/O 2016

Jimmy Moon

September 20, 2016
Tweet

Transcript

  1. - Progressively Becoming Apps, building in as Progressive Enhancement Alex

    Russell - Progressive Web Apps: Escaping Tabs Without Losing Our Soul
  2. - Progressively Becoming Apps, building in as Progressive Enhancement Alex

    Russell - Progressive Web Apps: Escaping Tabs Without Losing Our Soul
  3. - The site begins life as a regular tab. It

    doesn’t have super- powers - The site begins life as a regular tab. It doesn’t have super- powers
  4. The second (or third or fourth) time one visits the

    site - prompt is shown by the browser - Add to home screen Users can decide to keep apps to - the home screen or app launcher - Splash screen - Instant loading
  5. When launched from the home screen, these apps blend into

    their environment - top-level - full-screen
  6. “How do you build a great (progressive) web app on

    the mobile … ? > Our answer is to”
  7. Use the Platform to build create apps - Minimal payload

    & overhead - Minimal time to first interaction - Offline-first
  8. - Service Worker - Push notification - Geolocation and More

    Platform APIs - HTTP/2 - Firebase hosting - Brotli HTTPS
  9. Use the Platform to build create apps - Minimal payload

    & overhead - Minimal time to first interaction - Offline-first
  10. - Very fast first loading experience - Cached shell load

    instantly - Running on RAIL App shell architecture
  11. Service Worker - Born to kill the offline- dinosaur -

    Javascript running in background - Full programmatic control of network and cache - IndexedDB - Plugins https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
  12. Use the Platform to build create apps - Minimal payload

    & overhead - Minimal time to first interaction - Offline-first
  13. It was a challenge. Wrap IndexedDB, Stash IDB first, try

    to write it to firebase and then remove that stashed data Stashing IndexedDB and Pushing Firebase
  14. Next • All screenshots and video clips come from Google

    IO 2016 Videos for Progressive Web App • Google I/O 2016 Codelabs • Progressive Web App Dev Summit 2016 • Progressive Web App on Google developers site • GDG Meetup • Join GDG slack channel #progressive-webapp