Slides from my recent presentation on Progressive web apps. I showed what they are and how I believe they are the future of web/app development. I also demonstrated how to use de F12 tools in Chrome to debug the Service Worker and the Manifest.json file. I also demonstrated how, by adding and changing a few lines, a Node.js app is converted to a progressive web app.

1. Progressive Web Apps
Are Native Apps Doomed?
Timmy Kokke
@sorskoot

6. You’ve got everything you need if you know how to write apps using the
most modern web standards to write amazing apps for the iPhone today
Steve Jobs, 2007
https://www.youtube.com/watch?v=y1B2c3ZD9fk&feature=youtu.be&t=1h14m11s

7. The web is becoming more
powerful every day, even on mobile
devices

8. You want to develop the best
experience for every user on every
platform over every network

9. Building native apps is expensive, and a responsive website is often built
anyway

10. You only want to build your application once and run it anywhere

11. Use modern web standards and tools to build amazing user experiences

12. Progressive Web apps are the future of web development

13. PWAs deliver experiences that have the reach of the web

14. Reliable

15. Fast

16. Engaging

17. PWAs use modern web capabilities to deliver an app-like user
experience

18. Start with a good experience for everyone and improve based on what
you know about the user
Graceful
Degradation
Progressive
Enhancement

19. W3C Standards are maturing and
enabling more and more native
features to the web

20. Can work in conjunction with Cordova + HWA to take the step into the
various stores, use window APIs

21. Building a progressive web apps has incredible benefits

22. You can use what you know already
from building web apps

23. You don’t have to go to any complex app marketplace, so you can fix
bugs easy and fast

24. They make it easy to delight your users, grow engagement and increase
conversions

25. You can build progressive web apps today

26. People are building them
already, with success!

27. 14% more monthly
active users on iOS;
30% on Android
Alibaba 76% higher conversions
across browsers
4X higher interaction
rate from Add to
Homescreen

28. 30% faster page loadHousing.com
38% more conversions10% longer average
session

29. Support is there

30. Many APIs are available or are planned

31. Because of feature detection you
realize progressive enhancement

32. Only Safari stays behind

33. It’s good for you AND your users

34. User don’t have to go to the appstores and apps use up less space

35. 53%
Web traffic from mobile

36. Your web experience will improve as well

37. The user will be happy if you provide the best possible experience for
them

38. Progressive Web apps are
build using modern tools
and APIs

39. Tools

40. F12

41. Lighthouse

42. manifoldjs

43. Patterns and pieces

44. Shell Architecture
Application Shell Content

45. Manifest.json
{
"name": "SDN Event Schedule",
"short_name": "SDNEventSchedule",
"icons": [
{
"src": "icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"gcm_sender_id": "840152970702",
"theme_color": "#98be0d",
"background_color": "#FFFFFF"
}
https://w3c.github.io/manifest/

46. Promises
$.getJSON('/api/sessions')
.done(data =>
handle(data.text)
)
.fail(() =>
$('body').append('error')
)
.always(() =>
$('body').append('done')
);

47. Promises
$.getJSON('/api/sessions')
.done(data =>
handle(data.text)
)
.fail(() =>
$('body').append('error')
)
.always(() =>
$('body').append('done')
);

48. Promises
$.getJSON('/api/sessions')
.done(data =>
handle(data.text)
)
.fail(() =>
$('body').append('error')
)
.always(() =>
$('body').append('done')
);

49. Promises
$.getJSON('/api/sessions')
.done(data =>
handle(data.text)
)
.fail(() =>
$('body').append('error')
)
.always(() =>
$('body').append('done')
);

50. Promises
$.getJSON('/api/sessions')
.done(data =>
handle(data.text)
)
.fail(() =>
$('body').append('error')
)
.always(() =>
$('body').append('done')
);

51. APIs

52. Service Workers

54. Fetch
fetch('./api/some.json')
.then(response =>
response.json().then(data =>
console.log(data)
)
)
.catch(err =>
console.log(`Fetch Error :${err}`)
);

55. Fetch
fetch('./api/some.json')
.then(response =>
response.json().then(data =>
console.log(data)
)
)
.catch(err =>
console.log(`Fetch Error :${err}`)
);

56. Cache API

57. DEMO

58. Conclusion

59. Vragen?

60. Timmy Kokke
ICT Consultant @ Centric
Microsoft MVP
@sorskoot
info@timmykokke.com
http://winjs.ninja
http://youtube.com/c/winjsninja
http://twitch.tv/sorskoot

61. Usefull links
https://developers.google.com/web/progressive-web-apps/
https://serviceworke.rs/
http://manifoldjs.com/

62. Resources
http://www.slideshare.net/cheilmann/progressive-web-apps-the-return-of-
the-web-goto-berlin-2016?qid=d300a1c6-a160-4d7b-ba3c-
b1aa0b755472&v=&b=&from_search=1
https://serviceworke.rs/
https://developers.google.com/web/showcase/2016/iowa2016
https://medium.com/javascript-scene/why-native-apps-really-are-doomed-
native-apps-are-doomed-pt-2-e035b43170e9#.7988vvpvl
https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-
progressive-web-apps/
https://developers.google.com/web/fundamentals/instant-and-
offline/service-worker/lifecycle