Progressive Web Apps (PWAs) can provide app-like experiences through the web by making web content fast, reliable and engaging. While PWAs may not be necessary for all projects, they can help clean up and speed up current web-based projects. PWAs leverage new web capabilities like service workers to work offline, load fast, and improve the user experience without having to meet all the requirements of native apps.

2. aka.ms/mobile-era
Chris Heilmann @codepo8
bit.ly/DR2017-heilmann

4. PWA is

5. too much to ask

6. and that’s OK
aka.ms/whats-a-pwa

8. development approach
web content to be app-like
experiences

9. Progressive

10. opportunity
clean up and speed up current
web based projects

11. reconsider what
we call apps
doesn’t work

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

22. • 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
POSITIVES (Web)

23. • Patchy access to hardware
• Verification and authentication is hard
• Huge fragmentation of devices and displays
• Patchy trust in capabilities
• Payments are not easy or expected
NEGATIVES (Web)

24. • 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)
POSITIVES (Native)

25. • 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 (Native)

27. needs to be served
from a secure origin

28. needs to have an app
manifest

30. just another
resource

31. index and ingest

32. Store & Bing

34. ServiceWorker

35. Act as proxy servers that sit
between web apps, the browser,
and the network.

36. Define the rules what should be
cached and loaded from where –
no more hoping the browser
caches your work.

37. Intercept network requests and
define what happens. Serve from
cache, refresh, convert before
display, etc….

38. Refresh your app in the
background, pull new content
and notify the user with push
notifications that something new
is available.

40. aka.ms/serviceworkers

41. aka.ms/workbox

42. aka.ms/pwa-builder

43. aka.ms/pwa-builder

44. aka.ms/google-lighthouse

45. aka.ms/webcando

46. aka.ms/pwa-directory

47. aka.ms/pwa-stats

50. “try before you buy”

51. do what they
came for

52. change their device

53. where they are

54. new users will
enjoy your products

55. brings the best of the web

56. PWA is

57. PWAs are supposed to be on FIRE
• Fast
• Integrated
• Reliable
• Engaging

59. Thank you.
Now show me what you got!
aka.ms/mobile-era
bit.ly/DR2017-heilmann