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

2. aka.ms/mobile-era
Chris Heilmann @codepo8

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
• 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

23. • 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

25. needs to be served
from a secure origin

26. needs to have an app
manifest

28. just another
resource

29. index and ingest

30. Store & Bing

32. ServiceWorker

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

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

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

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

38. aka.ms/serviceworkers

39. aka.ms/workbox

40. aka.ms/pwa-builder

41. aka.ms/pwa-builder

42. aka.ms/google-lighthouse

43. aka.ms/webcando

44. aka.ms/pwa-directory

45. aka.ms/pwa-stats

48. “try before you buy”

49. do what they
came for

50. change their device

51. where they are

52. new users will
enjoy your products

53. brings the best of the web

54. • 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

55. • 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

57. Thank you.
Now show me what you got!
aka.ms/mobile-era