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

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