Progressive Web Apps in 15 Minutes

Short intro the history of the web and why PWA's are the logical next step

Transcript

2. me@johanndutoit.net email website @signedness
3. Developer Expert (first in Africa)
4. Mentor since 2016
6. 22:30 - October 29, 1969
7. “login” first thing sent over “public” internet
8. l Charley Kline proceeded to type “l”
9. lo Charley Kline proceed to type “o”
10. log Charley Kline proceed to type “g”
11. crashed... classic.
12. “..yet a revolution had begun.”
16. http://info.cern.ch/
17. http://line-mode.cern.ch/
20. “The web has become the platform with the widest reach on all form factors and the least amount of friction for all users“ - Google
21. Top 1000 Mobile Apps VS Top 1000 Mobile Properties
22. Apps Mobile Web Monthly Unique Visitors Reach 4 million 11.4 million
23. Average minutes per user Engagement 188.4 minutes 9.6 minutes Apps Mobile Web
24. SO WHAT IS A PWA???
25. A PWA uses modern web capabilities to deliver an app-like user experience.
28. Trust. I ‘d trust a website running in Chrome/Firefox/Safari over a native app any day
30. The Web Browser is a totally different beast today
34. These API enable various scenarios these days: Web apps that work offline? Yeap Store Data Locally? Yeap Access bluetooth from a web app? Yeap Access to Sensors? Yeap High Performance Graphics? Yeap
35. PWA are the logical next step for web apps
37. Progressive Web Apps are user experiences that have the reach of the web, and are:
38. Reliable
39. Fast
40. Engaging
41. Install Web Apps like Native Apps
44. Active Users with 1 Step
45. Push Notifications
46. Progressive Responsive Connectivity independent App-like Fresh Safe Discoverable Re-engageable Installable Linkable Criteria
47. Progressive Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
48. Responsive Fits any form factor: desktop, mobile, tablet, or whatever is next.
49. Connectivity Independent Enhanced with service workers to work offline or on low-quality networks.
50. App-like Feels like an app, because the app shell model separates the application functionality from application content .
51. Fresh Upfront view for users on the state of the data they are looking at; taking into the offline ability
52. Safe Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.
53. Discoverable Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
54. Re-engageable Makes re-engagement easy through features like push notifications.
55. Installable Allows users to add apps they find most useful to their home screen without the hassle of an app store.
56. Linkable Easily share the application via URL, does not require complex installation.
57. https://app.ft.com
59. https://app.ft.com
60. https://app.ft.com
75. Installs your native code linked to the site from the Playstore
76. So should you use a PWA for your next project?
77. Everything starts as a PWA
78. You go native when you have specific requirements that the browser would limit you from
80. 11.5mb
81. 11.5mb 34mb
82. https://ride.lyft.com
86. The Bad Things tm
88. 1 big one, in one word - Apple
89. https://webkit.org/status/
94. Making your choice TLDR; Does your app need to appear in the Apple App Store? Don’t go web Does your app need to do some very specific background action using hardware on the phone like configuring WIFI? Don’t go web Do you need the lowest latency a phone can possibly give you for high performance needs like live video or processing? Don’t go web
95. FIN