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.
aka.ms/mobile-era
Chris Heilmann @codepo8
PWA is
too much to ask
and that’s OK
aka.ms/whats-a-pwa
development approach
web content to be app-like
experiences
Progressive
opportunity
clean up and speed up current
web based projects
reconsider what
we call apps
doesn’t work
https://demo.vaadin.com/expense-manager
• Link as simple distribution model
• Simple, atomic updates
• Flexible layout options (grids,
flexbox, media queries, vw,...
• Verification and authentication is
hard
• Patchy access to hardware
• Huge fragmentation of devices
and displays
• Patch...
needs to be served
from a secure origin
needs to have an app
manifest
just another
resource
index and ingest
Store & Bing
ServiceWorker
Act as proxy servers that sit
between web apps, the browser,
and the network.
Define the rules what should be
cached and loaded from where –
no more hoping the browser
caches your work.
Intercept network requests and
define what happens. Serve from
cache, refresh, convert before
display, etc….
Refresh your app in the
background, pull new content
and notify the user with push
notifications that something new
is ava...
aka.ms/serviceworkers
aka.ms/workbox
aka.ms/pwa-builder
aka.ms/pwa-builder
aka.ms/google-lighthouse
aka.ms/webcando
aka.ms/pwa-directory
aka.ms/pwa-stats
“try before you buy”
do what they
came for
change their device
where they are
new users will
enjoy your products
brings the best of the web
• Link as simple distribution model
• Simple, atomic updates
• Flexible layout options (grids,
flexbox, media queries, vw,...
• Verification and authentication is
hard
• Patchy access to hardware
• Huge fragmentation of devices
and displays
• Patch...
Thank you.
Now show me what you got!
aka.ms/mobile-era
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Upcoming SlideShare
Loading in …5
×

Progressive Web Apps - Covering the best of both worlds

550 views

Published on

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

Published in: Education
  • Be the first to comment

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

×