Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

B590f0fb3aba34aee093cfa1406eac0b?s=47 Paul Kinlan
September 21, 2015

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

B590f0fb3aba34aee093cfa1406eac0b?s=128

Paul Kinlan

September 21, 2015
Tweet

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

  65. None
  66. <meta name="theme-color" content="#3f4348"> Installability

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

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