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 - Bringing the web front and center

786 views

Published on

PolandJS keynote

Published in: Education
  • Be the first to comment

Progressive Web Apps - Bringing the web front and center

  1. 1. https://demo.vaadin.com/expense-manager
  2. 2. a.k.a. “PWA”
  3. 3. Lots of events, tools, ideas and great documentation – and a few misconceptions
  4. 4. Progressive Web App
  5. 5. Game Gallery Book Newspaper Art Project Tool Web App
  6. 6. Progressive Web Site
  7. 7. Progressive Web Site++
  8. 8. Progressive Web Site++
  9. 9. “Web as native”
  10. 10. “Web as native”
  11. 11. “Web as native”
  12. 12. “Web as native”
  13. 13. “Web as native”
  14. 14. “Web as native”
  15. 15. “Web as native”
  16. 16. “Web as native”
  17. 17. “Web as native”
  18. 18. “Web as native”
  19. 19. “Web as native”
  20. 20. PWA is
  21. 21. PWA is
  22. 22. PWA is
  23. 23. PWA is
  24. 24. PWA is
  25. 25. PWA is
  26. 26. PWA is
  27. 27. PWA is
  28. 28. PWA is
  29. 29. PWA is
  30. 30. PWA is
  31. 31. PWA is Discoverable Installable LinkableSafe
  32. 32. needs to be served from a secure origin
  33. 33. needs to have an app manifest
  34. 34. Responsive App-LikeProgressive PWA is
  35. 35. Progressive Enhancement
  36. 36. Progressive Enhancement
  37. 37. Progressive Enhancement
  38. 38. Progressive Enhancement
  39. 39. can use your product no matter what
  40. 40. do what they came for
  41. 41. change their device
  42. 42. where they are
  43. 43. PWA is Network Independent Re-engageable Fresh
  44. 44. Act as proxy servers that sit between web apps, the browser, and the network.
  45. 45. Define the rules what should be cached and loaded from where – no more hoping the browser caches your work.
  46. 46. Intercept network requests and define what happens. Serve from cache, refresh, convert before display, etc….
  47. 47. Refresh your app in the background, pull new content and notify the user with push notifications that something new is available.
  48. 48. Detect support easily. If your user’s device doesn’t support it, fall back to push service.
  49. 49. PWA is Discoverable Installable LinkableSafe
  50. 50. discover
  51. 51. “try before you buy”
  52. 52. Updates happen in the background
  53. 53. store experience?
  54. 54. just another resource
  55. 55. index and ingest
  56. 56. Store & Bing
  57. 57.  Active Submission
  58. 58.  Active Submission  Passive Ingestion
  59. 59. a PWA will just be an app
  60. 60. Available Now • • •
  61. 61. Available Now • • • Coming soon • Service Worker • Cache API • Push API
  62. 62.  Standalone Window  Independent from browser process  Less overhead  Isolated cache  Nearly unlimited storage (indexed DB, localStorage, etc.)  Offline & background processes  Access to Windows Runtime (WinRT) APIs via JavaScript  Calendar  Cortana  Address Book
  63. 63. helps the web
  64. 64. new users will enjoy your products
  65. 65. App core iPhone iPad Android Phone Android Tablet Windows MacOS Web Submit to App Store Submit to Play Store Submit to Windows Store Submit to Mac App Store Host
  66. 66. App core iPhone iPad Android Phone Android Tablet Windows MacOS Web Submit to App Store Submit to Play Store Submit to Windows Store Submit to Mac App Store Host App core Web iPhone iPad Android Phone Android Tablet Windows MacOS Other PWA-capable Host Free
  67. 67. brings the best of the web

×