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 and the Windows Ecosystem [Build 2017]

8,564 views

Published on

Whether at home or at work, the web plays an increasingly critical role in our daily lives. As we have become more dependent on accessing the tools it powers, we’ve also struggled to overcome some of its limitations—network connectivity, for instance. At Microsoft, we’ve long been interested in the power of the web for software development and we are even more excited for the future possibilities offered by progressive web apps (PWAs). In this session, we discuss what PWAs are, how they can be integrated into the development process of modern websites, the advantages and disadvantages of PWAs vs. native development, and what opportunities they present when installed alongside native apps in Windows.

Published in: Technology

Progressive Web Apps and the Windows Ecosystem [Build 2017]

  1. 1. https://demo.vaadin.com/expense-manager
  2. 2. a.k.a. “PWA”
  3. 3. Progressive Web App
  4. 4. Game Gallery Book Newspaper Art Project Tool Web App
  5. 5. Progressive Web Site
  6. 6. Progressive Web Site++
  7. 7. “Web as native”
  8. 8. PWA is
  9. 9. Installable PWA is
  10. 10. PWA vs. Native
  11. 11. PWA or Native? It depends.
  12. 12. 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
  13. 13. 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
  14. 14. Progressive PWA is
  15. 15. Progressive
  16. 16. Progressive Enhancement
  17. 17. Progressive Enhancement
  18. 18. Progressive Enhancement
  19. 19. Progressive Enhancement
  20. 20. Progressive Enhancement
  21. 21. Progressive Enhancement
  22. 22. Progressive Enhancement
  23. 23. Progressive Enhancement
  24. 24. Progressive Enhancement
  25. 25. Progressive Enhancement
  26. 26. can use your product no matter what
  27. 27. simple
  28. 28. simple type="email" Experience deltas 1. Support for email input type? 2. Validation algorithm implemented? 3. Virtual keyboard?
  29. 29. simple required Experience deltas 1. Support for HTML validation?
  30. 30. simple aria-required="true" Experience deltas 1. Browser exposure of aria-required property? 2. Assistive tech implementation of aria-required?
  31. 31. simple
  32. 32. can use your product no matter what
  33. 33. Act as proxy servers that sit between web apps, the browser, and the network (when available).
  34. 34. Windows
  35. 35. Pinned Sites Packaged Web Apps Progressive Web AppsHosted Web Apps
  36. 36. Available Now • • • Coming soon • Service Worker • Cache API • Push API
  37. 37.  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
  38. 38. Progressive Web Apps are Hosted Web Apps, evolved
  39. 39. Store & Bing
  40. 40.  Active Submission  Passive Ingestion
  41. 41. a PWA will just be an app

×