Be instant and engaging on the mobile web - Google Mobile for India

Transcript

1. Be Instant and Engaging with the Mobile Web
2. paulkinlan@google.com
3. “Mobile is massive” - Me, 2012
4. “We can’t apply the same desktop rules to the web.” - Me, 2012
5. Links are clickable
6. You don’t want to read our content right now WAIT 3 MINUTES AND INSTALL OUR APP BAD!
7. Inline Native App install Good!
8. I came to India. I learnt a lot!
9. 6 million new mobile users per month
10. “I need my app to be installed. The Web can’t do that” - Every Tech Business in India*, August 2015
11. “I need notifications for engagement. The Web can’t do that” - Every Tech Business in India*, August 2015
12. “Network is terrible in India. I need to be fast. The Web can’t do that” - Every Tech Business in India*, August 2015
13. “Deep access to hardware is why I need an app. The Web can’t do that” - Every Tech Business in India*, August 2015
14. 1. Installability 2. Engagement 3. Performance 4. Capabilities
15. The Web is dead Engaged user Go native
16. The Web can’t do that
17. The Web can do that
18. Engaged user on the web Engaged user on native Upgrade to
19. “Make an engaged user on the web and keep them there.” - Me, just now
20. “Paul you’re talking rubbish. .... Prove it!” - Everyone in the room, just now
21. Let’s build a product
22. Native or Web. The goal is the same People use your service
23. https://airhorner.com
24. You get traffic from many sources TV Ads Newspaper Ads Social + Search
25. Use Use Mobile Native Mobile Web
26. Mobile Native Mobile Web Load store Click install Accept Permission Download Go to homescreen Use
27. Mobile Native Mobile Web Load store Click install Accept Permission Download Go to homescreen Use Use Instant access
28. In a consumer mobile app, every step you make a user perform before they get value out of your app will cost you 20% of users. http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html
29. Mobile Native Mobile Web Load store Click install Accept Permission Download Go to homescreen Use Use 800 640 512 410 328 262 1000 Users Inferred from blog.gaborcselle.com Hypothetical numbers Inferred from blog.gaborcselle.com
30. Mobile Native Mobile Web Load store Click install Accept Permission Download Go to homescreen Use Use 800 640 512 410 328 262 800 1000 Users Hypothetical numbers Inferred from blog.gaborcselle.com
31. “But native has more engaged users?” - Everyone in the room, just now
32. “262 engaged users is better than 800 unengaged users” - Everyone in the room, just now
33. Use Use 262 800 Mobile Native Mobile Web Why Web? Reach
34. Use Use 262 800 Mobile Native Mobile Web Why app? Reach Performance Engagement Capabilities Installability
35. Trade Reach for Engagement...
36. But... Can we get both?
37. Ideal solution The Web? Reach + Engagement Performance Capabilities Installability
38. “The web has amazing reach and now with deep engagement” - Me, just now
39. How?
40. 1. Focus on Performance 2. Installability 3. Engagement 4. Service Worker
41. “The most important web technology since the link” - Me, just now
42. Service workers are generic, event-driven, time-limited script contexts that run at an origin. What the spec says https://slightlyoff.github.io/ServiceWorker/spec/service_worker/ Service Worker
43. Service worker is a background script that sits between the browser and the networkOS What I say Service Worker
44. Installed Activated Idle Error Terminated Active Pages now have an app-like lifecycle Service Worker
45. Does all its work in the background
46. Installed Activated Idle Error Terminated Active It tries to use no resource Service Worker
47. Installed Activated Idle Error Terminated Active Can work when the browser is closed Service Worker
48. Installed Activated Idle Error Terminated Active sw.js Register Service Worker Service Worker
49. Registering a Service Worker self.addEventListener('install', function(e) {}); self.addEventListener('activate', function(e) {}); self.addEventListener('fetch', function(e) {}); navigator.serviceWorker.register('sw.js') .then(function(reg) { // Service Worker Registered }); Service Worker sw.js Web Page
50. Installed Activated Idle Error Terminated Active You can “install” content for later use Service Worker
51. Installed Activated Idle Error Terminate d Active onfetch onmessage onnotificationclick more Service Worker Lots of new engagement API’ s
52. Installability
53. 1. Get on the homescreen 2. Load instantly
54. Users • Expect apps to be on the homescreen • Expect apps to be in the app switcher Installability
55. How to get on the homescreen • Uses a service worker • Use HTTPS • Have a manifest declared Installability
56. <link rel="manifest" href="manifest.json"> HTML { "short_name": "Airhorner", "name": "Airhorner", "start_url": "/", "display": "standalone", "background_color": "#2196F3", "theme_color": "#2196F3", "icons": [{ "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png" }], "orientation": "portrait" } JSON Manifest Installability
57. Installed Activated Idle Error Terminated Active You can “install” content for later use Installability
58. self.addEventListener('install', function(e) { e.waitUntil( caches.open('airhorner').then(function(cache) { return cache.addAll([ '/', '/index.html', '/styles/main.css', '/scripts/main.min.js', '/sounds/airhorn.mp3' ]); }) ); }); Installability
59. Installed Activated Idle Error Terminated Active onfetch onmessage onnotificationclick more You own the network Installability
60. You are offline. To continue searching please check your wifi and mobile data are turned on. Indicative Example SW Local If stored locally or get from internet Web Server Installability
61. self.addEventListener('fetch', function(event) { console.log(event.request.url); event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); }); Installability
62. Ideal solution Reach + Engagement Performance Capabilities Installability ✔ ✔
63. Engagement
64. 1. Deeper ties into the OS 2. Notifications
66. <meta name="theme-color" content="#3f4348"> Installability
68. Installed Activated Idle Error Terminated Active onfetch onmessage onnotificationclick more You can handle push messages Engagement
69. SW Your server GCM server Client Server Engagement
70. self.addEventListener('push', function(event) { var title = 'New message from Paul'; var body = 'What\'s happening today?'; var icon = '/images/paul.png'; var tag = 'simple-push-demo-notification-tag'; var data = { url: 'https://paul.kinlan.me' }; event.waitUntil( self.registration.showNotification(title, { body: body, icon: icon, tag: tag, data: data }) ); }); Engagement
71. Engagement
72. SW Your server GCM server Client Server Local Engagement
73. self.addEventListener('push', function(event) { var title = 'Yay a message.'; var body = 'We have received a push message.'; var icon = '/images/icon-192x192.png'; var tag = 'simple-push-demo-notification-tag'; var data = { url: 'https://paul.kinlan.me' }; Cache.add( url ); event.waitUntil( self.registration.showNotification(title, { body: body, icon: icon, tag: tag, data: data }) ); }); Engagement
74. Installed Activated Idle Error Terminated Active onfetch onmessage onnotificationclick more You can handle notifications Engagement
75. SW Opens a web page User clicks Engagement
76. self.addEventListener('notificationclick', function(event) { var data = event.notification.data; clients.openWindow(data.url); }); Engagement
77. Ideal solution Reach + Engagement Performance Capabilities Installability ✔ ✔ ✔
78. Performance
79. It’s not an Infrastructure problem
80. If it is... App’s won’t save you!
81. Page Load Time
82. Time to first render
83. First Render < 1s
85. There are simple things we can do to speed up our sites
86. Critical Render Path
87. Find and remove Render Blocking Assets
88. Prioritize Visible content
89. Visible content Content that is likely to be visible in the top area
90. What would first render look like • No Web Font’s • No Images inline • No plugins • Just the CSS for the page
91. CSS before JS
92. Inline page required CSS then Async load the rest
93. prioritize_critical_css original First render @ 4.1 First render @ 1.3 s
94. Compress Everything
95. Reduce Requests DNS Lookup Initial Conn SSL Negotiation Socket set-up Time to first byte (HTTP Request) Data delivery . . .
96. Pre-connect
97. Remove Redirects no more www.site.com -> m.site.com DNS Lookup Initial Conn SSL Negotiation Socket set-up Time to first byte (HTTP Request) Data delivery . . .
98. Stop using 3rd party plugins window.addEventListener("load", function() { var iframes = document.getElementsByTagName("iframe"); for(var i = 0; i < iframes.length; i++) { var ifr = iframes[i]; if(ifr.hasAttribute("data-src")) { var src = ifr.getAttribute("data-src"); ifr.setAttribute("src", src); } } });
99. Plan for http/2
100. Ideal solution Reach + Engagement Performance Capabilities Installability ✔ ✔ ✔ ✔
101. Capabilities
102. Most apps just want Notifications
103. Camera exp.bartekdrozdz.com/app/webfilter/ navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; var video = document.querySelector('video'); if (navigator.getUserMedia) { navigator.getUserMedia({ video: true }, function(stream) { video.src = window.URL.createObjectURL(stream); } , errorCallback); } Capabilities
104. Microphone voice-memos.appspot.com/ navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; var video = document.querySelector('video'); if (navigator.getUserMedia) { navigator.getUserMedia({ audio: true }, function(stream) { audio.src = window.URL.createObjectURL(stream); } , errorCallback); } Capabilities
105. Battery Status var batterySuccess = function(battery) { updateState(battery); // Monitor further updates battery.addEventListener("levelchange", function() { /* battery.level changed */ }); battery.addEventListener("chargingchange", function() { /* battery.charging changed */ }); battery.addEventListener("dischargingtimechange", function() { }); battery.addEventListener("chargingtimechange", function() { }); }; navigator.getBattery().then(batterySuccess); Capabilities
106. Permissions navigator.permissions.query({name:'geolocation'}) .then(function(permStatus) { // geo permission is permStatus.status permStatus.onchange = function() { // geo permission changed to this.status); }; }); Capabilities
107. Bluetooth navigator.bluetooth.requestDevice( { filters: [{ services: ['battery_service'] }] }) .then(device => { // Human-readable name of the device. console.log(device.name); // Indicates whether or not the device is paired with the system console.log(device.paired); // Filtered UUIDs of GATT services the website origin has access console.log(device.uuids); // Attempts to connect to remote GATT Server. return device.connectGATT(); }) Capabilities
108. Net Info function changeHandler(e) { // Handle change to connection here. connEl.innerText = navigator.connection.type; speed = navigator.connection.downlinkMax; } navigator.connection.addEventListener( 'typechange', changeHandler); Capabilities
109. Installed Activated Idle Error Terminated Active onfetch onmessage onnotificationclick more There is a lot more coming...
110. Background Sync self.addEventListener('sync', function(event) { event.waitUntil(sendEverythingInTheOutbox()); });
111. Periodic Background Sync self.addEventListener('periodicsync', function(e) { e.waitUntil(checkforNewsArticle()); }); navigator.serviceWorker.ready.then(function(reg) { reg.periodicSync.register({ minPeriod: 12 * 60 * 60 * 1000,// 12 hours powerState: 'avoid-draining', // default: 'auto' networkState: 'avoid-cellular' // default: 'online' }).then(function(periodicSyncReg) { }) }); Service Worker Web Page
112. Ideal solution Reach + Engagement Performance Capabilities Installability ✔ ✔ ✔ ✔ ✔
113. Ideal solution Reach + Engagement Performance Capabilities Installability ✔ ✔ ✔ ✔ ✔ Payments :’(
114. The Web is dead Engaged native user Move to
115. Make an engaged user on the web Engaged native user Upgrade to
116. “Build engaging experiences. Your site is the first touch point to do that” - Me, forever
117. developers.google.com/web/fundamentals
118. developers.google.com/web/updates
119. chromiumdev-slack.herokuapp.com
120. “Thank you” - Me, always paulkinlan@google.com @paul_kinlan