Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progressive Web Apps - Covering the best of both worlds - DevReach

568 views

Published on

Keynote slides of DevReach 2017

Published in: Engineering
  • Be the first to comment

Progressive Web Apps - Covering the best of both worlds - DevReach

  1. 1. aka.ms/mobile-era Chris Heilmann @codepo8 bit.ly/DR2017-heilmann
  2. 2. PWA is
  3. 3. too much to ask
  4. 4. and that’s OK aka.ms/whats-a-pwa
  5. 5. development approach web content to be app-like experiences
  6. 6. Progressive
  7. 7. opportunity clean up and speed up current web based projects
  8. 8. reconsider what we call apps doesn’t work
  9. 9. https://demo.vaadin.com/expense-manager
  10. 10. • Link as simple distribution model • Simple, atomic updates • Flexible layout options (grids, flexbox, media queries, vw, vh) • Small data footprint, loading on demand and environment • Reusability of code – conversion to other form factors POSITIVES (Web)
  11. 11. • Patchy access to hardware • Verification and authentication is hard • Huge fragmentation of devices and displays • Patchy trust in capabilities • Payments are not easy or expected NEGATIVES (Web)
  12. 12. • Offline capabilities by design • Full access to hardware • Authenticated, verified device access • High trust distribution model • Easy payments • Bleeding edge tech (as a competitive advantage) POSITIVES (Native)
  13. 13. • Huge data footprint with non-atomic updates • Slow update cycles because of negotiation overhead • High expectations and breakneck competition (price race to bottom) • Bespoke development for each platform with only minor re-use NEGATIVES (Native)
  14. 14. needs to be served from a secure origin
  15. 15. needs to have an app manifest
  16. 16. just another resource
  17. 17. index and ingest
  18. 18. Store & Bing
  19. 19. ServiceWorker
  20. 20. Act as proxy servers that sit between web apps, the browser, and the network.
  21. 21. Define the rules what should be cached and loaded from where – no more hoping the browser caches your work.
  22. 22. Intercept network requests and define what happens. Serve from cache, refresh, convert before display, etc….
  23. 23. Refresh your app in the background, pull new content and notify the user with push notifications that something new is available.
  24. 24. aka.ms/serviceworkers
  25. 25. aka.ms/workbox
  26. 26. aka.ms/pwa-builder
  27. 27. aka.ms/pwa-builder
  28. 28. aka.ms/google-lighthouse
  29. 29. aka.ms/webcando
  30. 30. aka.ms/pwa-directory
  31. 31. aka.ms/pwa-stats
  32. 32. “try before you buy”
  33. 33. do what they came for
  34. 34. change their device
  35. 35. where they are
  36. 36. new users will enjoy your products
  37. 37. brings the best of the web
  38. 38. PWA is
  39. 39. PWAs are supposed to be on FIRE • Fast • Integrated • Reliable • Engaging
  40. 40. Thank you. Now show me what you got! aka.ms/mobile-era bit.ly/DR2017-heilmann

×