The future of the web on mobile? - Coldfront conf

B590f0fb3aba34aee093cfa1406eac0b?s=47 Paul Kinlan
September 03, 2015

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

B590f0fb3aba34aee093cfa1406eac0b?s=128

Paul Kinlan

September 03, 2015
Tweet

Transcript

  1. The future of the web on mobile

  2. None
  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.
  7. None
  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

  19. None
  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
  51. None
  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/

  61. None
  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 }) ); });
  80. None
  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

  112. None
  113. None
  114. None
  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