The future of the web on mobile? - Coldfront conf

The future of the web on mobile isn't an assured thing. Many new platforms that are easier to publish on and are faster to use are appearing with just as many users as the web.

How do we make sure we are relevant in the future:

1. Be Instant
2. Offer Richer Experiences
3. Act Installed, Be Ephemeral

Transcript

1. The future of the web on mobile
3. Links are clickable
4. You don’t want to read our content right now WAIT 3 MINUTES AND INSTALL OUR APP
5. In 5 years you won’ t know you’re using a browser
6. I went to India. This is the only photo I took.
8. 6 million new mobile users per month
9. Screw the web Engaged user Go native
10. 1. Performance 2. Engagement 3. Offline access 4. Capabilities
11. Dev’s and Biz think they can’t do this on the web
12. Designed 1822 ish
13. "Analytical Machine Babbage London" by Bruno Barral (ByB). Licensed under CC BY-SA 2.5 via Wikimedia Commons goo.gl/Ry8Odk NEVER BUILT
14. 60’s - Mid 80’s
15. Invented Peak Demise 1977 1980s ?
16. Invented Peak Demise 1976 1980s ?
17. Invented Peak Demise 1982 2005?
18. Invented Peak Demise 1988 1998 2009
20. Far less capable Massively better delivery model
21. Friction was removed
22. SLICE paul.kinlan.me/slice-the-web/
23. Secure
24. Linkable
25. Indexable
26. Composable
27. Ephemeral Site takes up no resources once you leave Lives and dies with the tab
28. SLUICE Updateable? https://commons.wikimedia.org/wiki/File:MagomeSluice.jpg
29. Is this relevant on mobile?
30. Diskettes CD Web App Stores Mobilithic era Mobile era Chat + Others Pre internet DVD
31. Diskettes CD Web App Stores Mobilithic era Mobile era Chat + Others Pre internet DVD June 29, 2007 1.3 billion users 2 new billion users
32. Google Confidential and Proprietary 86% spent in apps 14% spent in the browser Smartphone users spend most of their time in apps Source: Flurry 2014
33. Google Confidential and Proprietary 86% spent in apps 14% spent in the browser Smartphone users spend most of their time in apps Source: Flurry 2014 ?% spent on web in apps
34. Many entry points
35. e-mail Messenger Social Notification WebView Beacons Search ?
36. Is the web under threat?
37. Web iOS Android Desktop Meta platform Host platform
38. Web iOS Android Desktop FB WeChat Messengers Line Meta platform Host platform Kakao
39. Web iOS Android Desktop FB WeChat Messengers Line Meta platform Host platform Kakao
40. Web Android Desktop FB WeChat Apple News iOS Line Meta platform Host platform Kakao Instant Articles Content platform Official Accounts Kakao Page
41. Web Android Desktop Performance FB WeChat Apple News Line iOS Meta platform Host platform Kakao Instant Articles Content platform Official Accounts Kakao Page
42. Web Android Desktop FB WeChat Apple News Line Meta platform iOS Host platform Kakao Content platform Performance Web? Instant Articles Official Accounts Kakao Page
43. Web iOS Android Desktop FB WeChat Messengers Line Meta platform Host platform Kakao
44. Web iOS Android Desktop FB WeChat Line Meta platform Host platform Kakao App platform FB WeChat Line Kakao
45. Web iOS Android Desktop FB WeChat Line Meta platform Host platform Kakao App platform FB WeChat Line Kakao Capabilities
46. Web iOS Android Desktop FB WeChat Line Meta platform Host platform Kakao App platform FB WeChat Line Kakao Web? Capabilities
47. Each app wants to be “the next browser”
48. We all want it to launch in the browser • Simple • Secure • Apps lose the user • Not branded Good The Bad
49. Apps want you in brand • Keep user in app • No context switch • Value added services • Hard to build • Isolated Cookie stores • Every URL can be tracked • Features not implemented AKA. WebViews Good The Bad
50. Embeddable Browser • Keep user in app and brand • Performance optimizations • No context switch • Shared login across browser and app • All browser features are available • No URL tracking AKA. Chrome Custom Tabs SFSafariViewController
52. Each platform intends to be “the next web”
53. React TODO: Trojan horse.
54. It’s pretty bleak for the web
55. 3 “simple” steps to win with the web
56. 3. Act Installed, Be Ephemeral
57. Web 2013 Web 2014 Web (2015) Native Deep Linking YES YES YES KINDA Single click install and launch YES YES YES NO Geo YES YES YES YES Gyro YES YES YES YES Offline KINDA KINDA YES YES Contacts NO NO NO YES Camera NO NO YES YES Push NO NO YES YES Auth NO NO NO YES Payments NO NO NO YES
58. Web 2013 Web 2014 Web (2015) Native Deep Linking YES YES YES KINDA Single click install and launch YES YES YES NO Geo YES YES YES YES Gyro YES YES YES YES Offline KINDA KINDA YES YES Contacts NO NO NO YES Camera NO NO YES YES Push NO NO YES YES Auth NO NO NO YES Payments NO NO NO YES
59. 1. Be in all the expected places 2. Always be available regardless of connectivity 3. No install required.
60. google.github.io/physical-web/
62. Get on the homescreen • The app uses a service worker • The site is using HTTPS • The app has a manifest declared • The manifest has a short_name, 144 pixel icon
63. <link rel="manifest" href="manifest.json"> HTML { "short_name": "Airhorner", "name": "Airhorner", "start_url": "/", "display": "standalone", "icons": [{ "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png", "density": "4.0" }], "orientation": "portrait" } JSON Manifest
64. <meta name="theme-color" content="#3f4348">
65. Service Worker “The most important web technology since the link” - Me, just now
66. 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/
67. Service worker is a background script that sits between the browser and the networkOS What I say
68. Installed Activated Idle Error Terminated Active Pages now have an app-like lifecycle
69. Installed Activated Idle Error Terminated Active sw.js Register Service Worker
70. Installed Activated Idle Error Terminated Active You can “install” content for later use
71. 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' ]); }) ); });
72. Installed Activated Idle Error Terminated Active You can work when the browser is closed
73. Installed Activated Idle Error Terminate d Active onfetch onmessage onnotificationclick more
74. Installed Activated Idle Error Terminated Active onfetch onmessage onnotificationclick more You own the network
75. 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
76. self.addEventListener('fetch', function(event) { console.log(event.request.url); event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); });
77. Installed Activated Idle Error Terminated Active onfetch onmessage onnotificationclick more You can handle push messages
78. SW Your server GCM server Client Server
79. 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' }; event.waitUntil( self.registration.showNotification(title, { body: body, icon: icon, tag: tag, data: data }) ); });
81. SW Your server GCM server Client Server Local
82. 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 }) ); });
83. Installed Activated Idle Error Terminated Active onfetch onmessage onnotificationclick more You can handle notifications
84. SW Opens a web page User clicks
85. self.addEventListener('notificationclick', function(event) { var data = event.notification.data; clients.openWindow(data.url); });
86. SW Open a web page SW Execute JS User clicks
87. self.addEventListener('notificationclick', function(event) { var data = event.notification.data; var action = event.notification.action; if(action == “like”) { // Do something. fetch() } else { clients.openWindow(data.url); } });
88. Installed Activated Idle Error Terminated Active onfetch onmessage onnotificationclick more You can handle notifications
89. Background Sync self.addEventListener('sync', function(event) { event.waitUntil(sendEverythingInTheOutbox()); });
90. 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
91. Beacons? self.addEventListener('beaconfound', function(event) { ... });
92. Future: geofence? self.addEventListener('entergeofence', function(event) { ... });
93. Does all it’s work in the background
94. 2. Build for a richer platform
95. 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); }
96. 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); }
97. Battery Status googlechrome.github.io/samples/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);
98. Permissions navigator.permissions.query({name:'geolocation'}) .then(function(permStatus) { // geo permission is permStatus.status permStatus.onchange = function() { // geo permission changed to this.status); }; }); jsbin.com/kafeju/latest
99. Net Info jsbin.com/moturi/2 function changeHandler(e) { // Handle change to connection here. connEl.innerText = navigator.connection.type; } navigator.connection.addEventListener( 'typechange', changeHandler);
100. Web 2013 Web 2014 Web (2015) Native Deep Linking YES YES YES KINDA Single click install and launch YES YES YES NO Geo YES YES YES YES Gyro YES YES YES YES Offline KINDA KINDA YES YES Camera KINDA YES YES YES Push NO NO YES YES Contacts NO NO NO YES Auth NO NO NO YES Payments NO NO NO YES
101. How does the Web match the cadence of Native and Play Services?
102. 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
103. Extrapolated from http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html
104. Extrapolated from http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html What happens to the web when native solves this?
105. Extrapolated from http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html Killer feature
106. 1. Be Instant
107. 1000ms to first paint (progressive rendering)
108. Follow the Critical Render Path The series of events that must take place to render the initial view of a webpage.
109. Aggressively Offline content
110. Extrapolated from http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html Give value immediately Optimize this
111. Prepare for the Headless Web
115. ✓ Performance ✓ Engagement ✓ Offline access ✓ Capabilities
116. Screw the web Engaged native user Move to
117. Make an engaged user on the web Engaged native user Upgrade to
118. Make an engaged user on the web Keep them there
119. developers.google.com/web/fundamentals
120. developers.google.com/web/updates
121. chromestatus.com
122. chromiumdev-slack.herokuapp.com
123. paulkinlan@google.com Slack: chromiumdev-slack.herokuapp. com