O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Progressive Web Apps - Covering the best of both worlds

Keynote at the mobile era conference in Oslo, October 2017 about Progressive Web Apps

Livros relacionados

Gratuito durante 30 dias do Scribd

Ver tudo
  • Seja o primeiro a comentar

Progressive Web Apps - Covering the best of both worlds

  1. 1. aka.ms/mobile-era Chris Heilmann @codepo8
  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 • 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) NativeWeb POSITIVES
  11. 11. • Verification and authentication is hard • Patchy access to hardware • Huge fragmentation of devices and displays • Patchy trust in capabilities • Payments are not easy or expected NativeWeb • 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
  12. 12. needs to be served from a secure origin
  13. 13. needs to have an app manifest
  14. 14. just another resource
  15. 15. index and ingest
  16. 16. Store & Bing
  17. 17. ServiceWorker
  18. 18. Act as proxy servers that sit between web apps, the browser, and the network.
  19. 19. Define the rules what should be cached and loaded from where – no more hoping the browser caches your work.
  20. 20. Intercept network requests and define what happens. Serve from cache, refresh, convert before display, etc….
  21. 21. Refresh your app in the background, pull new content and notify the user with push notifications that something new is available.
  22. 22. aka.ms/serviceworkers
  23. 23. aka.ms/workbox
  24. 24. aka.ms/pwa-builder
  25. 25. aka.ms/pwa-builder
  26. 26. aka.ms/google-lighthouse
  27. 27. aka.ms/webcando
  28. 28. aka.ms/pwa-directory
  29. 29. aka.ms/pwa-stats
  30. 30. “try before you buy”
  31. 31. do what they came for
  32. 32. change their device
  33. 33. where they are
  34. 34. new users will enjoy your products
  35. 35. brings the best of the web
  36. 36. • 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 • 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) NativeWeb POSITIVES
  37. 37. • Verification and authentication is hard • Patchy access to hardware • Huge fragmentation of devices and displays • Patchy trust in capabilities • Payments are not easy or expected NativeWeb • 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
  38. 38. Thank you. Now show me what you got! aka.ms/mobile-era

×