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.

5. https://demo.vaadin.com/expense-manager

7. a.k.a. “PWA”

8. Progressive Web App

9. Game
Gallery
Book
Newspaper
Art Project
Tool
Web App

10. Progressive Web Site

11. Progressive Web Site++

13. “Web as native”

15. PWA is

16. Installable
PWA is

17. PWA vs. Native

18. PWA or Native?
It depends.

21. 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

22. 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

23. Progressive
PWA is

24. Progressive

25. Progressive Enhancement

26. Progressive Enhancement

27. Progressive Enhancement

28. Progressive Enhancement

29. Progressive Enhancement

30. Progressive Enhancement

31. Progressive Enhancement

32. Progressive Enhancement

33. Progressive Enhancement

34. Progressive Enhancement

35. can use your product
no matter what

36. simple

37. simple
type="email"
Experience deltas
1. Support for email input type?
2. Validation algorithm implemented?
3. Virtual keyboard?

38. simple
required
Experience deltas
1. Support for HTML validation?

39. simple
aria-required="true"
Experience deltas
1. Browser exposure of aria-required property?
2. Assistive tech implementation of aria-required?

40. simple

41. can use your product
no matter what

42. Act as proxy servers that sit
between web apps, the browser,
and the network (when available).

44. Windows

45. Pinned Sites Packaged Web Apps Progressive Web AppsHosted Web Apps

46. Available Now
•
•
•
Coming soon
• Service Worker
• Cache API
• Push API

47.  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

48. Progressive Web Apps are
Hosted Web Apps, evolved

50. Store & Bing

52.  Active Submission
 Passive Ingestion

64. a PWA will just be an app