Getting started with Progressive Web Apps

Getting started with Progressive Web Apps

Transcript

1. Getting started with Progressive Web Apps
2. Photo goes here Vitor Alencar Desenvolvedor com foco em tecnologias novas e escaláveis, graduando em sistemas de informação,Co fundador do DEV I/O FOR , Google developer groups organizer e Organizado do Front-in Fortaleza @vitormalencar GURU-CE
3. flickr.com/photos/monado/4405843023
4. This amazing software
9. vs. Source: comScore Mobile Metrix, U.S., Age 18+, June 2015 13% 87% Mobile web Apps
10. 80% OF TIME SPENT IS IN USERS’ TOP 3 APPS Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
11. Capability Reach
12. ZERO NUMBER OF APPS AVERAGE USER INSTALLS PER MONTH Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
13. Capability Reach
14. Capability Reach
15. are a new level of caring about the quality of your user experience Progressive Web Apps
16. Reliable User experiences need to be...
20. Lie-Fi
21. Reliability means never showing the offline dinosaur
22. Reliable Fast User experiences need to be...
26. of users abandon sites that take longer than 3 seconds to load 53%
27. Reliable Fast Engaging User experiences need to be...
28. Full screen, theming, orientation, etc. Push notifications Immersive Notifications Engaging Auto-adding to Home Screen Home Screen
29. ` Web Push Notifications
30. ` No surprises!
31. https://wapo.com/pw a https://wapo.com/pw a
38. ` 80ms article page load time in the Progressive Web App Poynter article
39. Reliable Fast Engaging Progressive Web Apps are…
44. How do I get started?
45. Stay Secure
46. ` HTTPS: Secure connection between site and users
47. Trust Is this site who they claim to be? Data integrity Has anyone tampered with this page? User privacy Can anyone see my browsing behavior? Keeping Users Safe
48. Chrome DevTools Security Panel
49. Search Ranking Guidance bit.ly/https-migration
50. Use a Service Worker
52. WHAT ??
54. Web server
55. Service worker Client side proxy (written in JavaScript) Cache Web server
56. Service Worker Life Cycle • Adds app-like lifecycle to a page • Wakes up only when the OS says • Only responds to system events Activated Error Idle Active Terminated Install Register
57. Service Worker Life Cycle • Adds app-like lifecycle to a page • Wakes up only when the OS says • Only responds to system events Activated Error Idle Active Terminated Install Register
58. Service Worker Life Cycle • Adds app-like lifecycle to a page • Wakes up only when the OS says • Only responds to system events Activated Error Idle Active Terminated Install Register
59. Service Worker Life Cycle • Adds app-like lifecycle to a page • Wakes up only when the OS says • Only responds to system events Activated Error Idle Active Terminated Install Register
60. is for the SECOND load. Service Worker
61. Life Cycle of a Service Worker Installing the Service Worker 1st Page Load install idle
62. Life Cycle of a Service Worker Installing the Service Worker 2nd Page Load activated check for update
63. Life Cycle of a Service Worker Installing the Service Worker Close Page idle terminated activated
64. Life Cycle of a Service Worker Updating a Service Worker Load Page with Service Worker activated check for update
65. Life Cycle of a Service Worker Updating a Service Worker Load Page with Service Worker activated check for update install idle
66. Life Cycle of a Service Worker Updating a Service Worker Load Page with Service Worker activated check for update install idle
67. Caching strategies You are in control of the network
68. Cache, Falling Back to Network
69. Network, Falling Back to Cache
70. Cache then Network
71. Generic Fallback
72. Cache and Network Race
73. Caching strategies galore!
74. Engage Your Users
75. Add to Home Screen
76. Add To Home Screen Was Broken
77. Add To Home Screen Was Broken Required user interaction Buried deep in menus
78. Add To Home Screen Was Broken Required user interaction Buried deep in menus Where would it start? Dependent on bookmark
79. Add To Home Screen Was Broken Required user interaction Buried deep in menus Where would it start? Dependent on bookmark Would it work offline? Users didn't expect offline
80. <link rel="manifest" href="/manifest.json"> { "name": "The Washington Post", "short_name": "Wash Post", "icons": [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#000000", "theme_color": "#000000" }
81. manifest.json { "name": "The Washington Post", "short_name": "Wash Post", "icons": [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#000000", "theme_color": "#000000" }
82. manifest.json { "name": "The Washington Post", "short_name": "Wash Post", "icons": [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#000000", "theme_color": "#000000" }
83. manifest.json { "name": "The Washington Post", "short_name": "Wash Post", "icons": [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#000000", "theme_color": "#000000" }
84. manifest.json { "name": "The Washington Post", "short_name": "Wash Post", "icons": [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#000000", "theme_color": "#000000" }
85. ` Good, but what about prompt to install?
86. A Promise to the User Consistent Experience Works Offline The User is Engaged
87. ` Web Push Notifications
88. ` Web Push Notifications The browser doesn’t need to be open!
89. `
90. ` 38% open rate 9x more conversions on previously abandoned carts
91. Anatomy of a notification I feel I need it and it matters right now. when: it's timely
92. Anatomy of a notification I feel I need it and it matters right now. when: it's timely
93. Anatomy of a notification when: it's timely what: it's precise It has specific info that’s good to know or act upon.
94. Anatomy of a notification when: it's timely what: it's precise what & who: it's relevant It’s from people or sources that matter to me, which makes it personal.
95. Built on Service Workers /* ServiceWorker.js */ onfetch = function(e) { if(e.request.url == "app.html") { e.respondWith( caches.match(e.request) ); } if(e.request.url == "content.json") { // go to the network for updates, // meanwhile, use cached content fetch(...).then(function(r) { r.asJSON().then(function(json) { e.client.postMessage(json); }); }); } }; GET /content.json HTTP/1.1 HOST example.com GET /content.json HTTP/1.1 HOST example.com GET /app.html HTTP/1.1 HOST example.com
96. Built on Service Workers /* ServiceWorker.js */ onpush = function(event) { var data = event.data.json(); var t = data.title; var opt = { body: data.body, icon: data.icon, tag: data.tag }; self.registration .showNotification(t, opt); }; End Point example.co m
97. Check out the Push code lab
98. Stay Secure
99. Use a Service Worker
100. Engage Your Users
101. `
102. ` 2x more page views 74% increase in time spent
103. ` 2x more page views 74% increase in time spent 82% more conversions on iOS
104. are progressive. Progressive Web Apps
105. are a new level of caring about the quality of your user experience Progressive Web Apps
106. to Establish a Baseline goo.gl/S07woZ Use Lighthouse
107. ` 98% 1430.2ms First meaningful paint 94% 2069.4ms Time To Interactive 96% 1591 Perceptual Speed Index vitormalencar.com
108. Show me the metrics
109. Show me the metrics
110. ` 100% 630.9ms First meaningful paint 99% 1210.8ms Time To Interactive 99% 1005 Perceptual Speed Index vitormalencar.com
111. Show me the metrics
112. …but not a destination! Lighthouse: Fantastic Tool
114. http://bit.ly/1ksSnNS
115. http://bit.ly/2mbUaPN
116. http://bit.ly/2mpN0U2
119. Ready-to-rock Preact starter project http://bit.ly/2lKsK2g
120. https://pwa-directory.appspot.com/
122. +vitormalencar @vitormalencar <thank-you>