Progressive Web Apps

The web has one major benefit over native mobile apps, reach. It's the famous goal of Java ("Write once run everywhere"), come to fruition that works securely over various form factors.

The web has become the platform with the widest reach and the least amount of friction for users to start. Progressive Web Apps are the logical next step this ever-evolving web that allows us as developers to build apps that act/feel and compare to native apps.

This talk will focus on:

• How the web started, the history

• The state of the web today

• What PWA's are and why they are the next logical step

• Examples of well built real-world apps and stats

• The various benefits and how big companies are pushing this forward

• Simple steps to start exploring building your own

---

Talk by Roxanne Davids and Johann du Toit

Transcript

1. Progressive Web Apps or PWA for short ...
3. Johann du Toit johanndutoit.net - @johann_du_toit
4. This Talk 1. State of the union, history to today 2. What is a progressive web app 3. How to create your own PWA
5. This Talk 1. State of the union, history to today 2. What is a progressive web app 3. How to create your own PWA
11. 1976 1980 1989 1993 2017 1994
14. 1976 1980 1989 1993 2017 1994
17. 1976 1980 1989 1993 2017 1994
19. http://info.cern.ch/
20. http://line-mode.cern.ch/
22. 1976 1980 1989 1993 2017 1994
24. 1976 1980 1989 1993 2017 1994
33. 1976 1980 1989 1993 2017 1994
35. Source - https://wearesocial.com/special-reports/digital-in-2 017-global-overview https://www.youtube.com/watch?v=m-sCdS 0sQO8 https://www.gsmaintelligence.com/
42. Source - https://www.lukew.com/ff/entry.asp?1506
48. Progressive Progressive / Responsive / Connection Independent / App Like / Fresh / Safe / Discoverable / Re-engageable / Installable / Linkable
49. Responsive Progressive / Responsive / Connection Independent / App Like / Fresh / Safe / Discoverable / Re-engageable / Installable / Linkable
50. Connectivity Independent Progressive / Responsive / Connection Independent / App Like / Fresh / Safe / Discoverable / Re-engageable / Installable / Linkable
51. In India one hour of minimum wage work to load ~15 web pages
52. Throttle your speed!
53. App-like Progressive / Responsive / Connection Independent / App Like / Fresh / Safe / Discoverable / Re-engageable / Installable / Linkable
54. Data Fresh Progressive / Responsive / Connection Independent / App Like / Fresh / Safe / Discoverable / Re-engageable / Installable / Linkable
55. Safe Progressive / Responsive / Connection Independent / App Like / Fresh / Safe / Discoverable / Re-engageable / Installable / Linkable
56. Discoverable Progressive / Responsive / Connection Independent / App Like / Fresh / Safe / Discoverable / Re-engageable / Installable / Linkable
57. Re-engageable Progressive / Responsive / Connection Independent / App Like / Fresh / Safe / Discoverable / Re-engageable / Installable / Linkable
58. Installable Progressive / Responsive / Connection Independent / App Like / Fresh / Safe / Discoverable / Re-engageable / Installable / Linkable
59. https://ride.lyft.com
64. 1 step to active user
65. Linkable Progressive / Responsive / Connection Independent / App Like / Fresh / Safe / Discoverable / Re-engageable / Installable / Linkable
69. https://app.ft.com
71. https://app.ft.com
72. https://app.ft.com
73. https://www.pwastats.com/
83. This Talk 1. State of the union, history to today 2. What is a progressive web app 3. How to create & upgrade your own PWA
84. /manifest.json
85. { "name": "Example App", "short_name": "Example", "start_url": "/", "display": "standalone", "background_color": "#f1f1f1", "description": "An example app", "icons": [], "related_applications": [{ "platform": "web" }, { "platform": "play|itunes", "url": "{play-store-url}" }] }
86. { "name": "Example App", "short_name": "Example", "start_url": "/", "display": "standalone", "background_color": "#f1f1f1", "description": "An example app", "icons": [], "related_applications": [{ "platform": "web" }, { "platform": "play|itunes", "url": "{play-store-url}" }] }
88. Service Workers
89. Server Worker Tasks 1. Acts as a proxy to the network 2. Handles background events like push notifications
90. Server Worker Tasks 1. Acts as a proxy to the network 2. Handles background events like push notifications
91. /sw.js
92. /cookie.js
93. if ('serviceWorker' in navigator) { navigator .serviceWorker .register('service-worker.js'); }
94. if ('serviceWorker' in navigator) { navigator .serviceWorker .register('service-worker.js'); }
95. if ('serviceWorker' in navigator) { navigator .serviceWorker .register('service-worker.js'); }
96. if ('serviceWorker' in navigator) { navigator .serviceWorker .register('/sw.js'); }
101. this.addEventListener( 'install', event => { console.log('just installed!'); }); this.addEventListener( 'activate', event => { console.log('started!'); });
102. this.addEventListener( 'install', event => { console.log('just installed!'); }); this.addEventListener( 'activate', event => { console.log('started!'); });
103. this.addEventListener('fetch', event => { return fetch(event.request).then(response => { return response; }); });
104. this.addEventListener('fetch', event => { return fetch(event.request).then(response => { return response; }); });
105. self.addEventListener('fetch', function(event) { console.log("Caught a fetch!"); event.respondWith( new Response("<h1>NOOOPE</h1>", { headers: {'Content-Type': 'text/html'} }) ) });
106. Server Worker Tasks 1. Acts as a proxy to the network 2. Handles background events like push notifications
107. Push Notifications
108. self.addEventListener('push', function(event) { const title = 'Push Codelab'; const options = { body: 'Yay it works.', icon: 'images/icon.png', badge: 'images/badge.png' }; event.waitUntil(self.registration.showNotification(title, options)); });
112. https://airhorner.com/ https://github.com/GoogleChrome/airhorn
114. Resources • https://developers.google.com/web/progre ssive-web-apps/ • https://www.pwastats.com/ • https://app.ft.com • https://ride.lyft.com • http://info.cern.ch/ • http://line-mode.cern.ch/ • https://github.com/GoogleChrome/airhorn • https://airhorner.com/
115. Will be posted in the comments of the meetup as well Thanks!