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

Transcript

1. Be Instant and
   Engaging with the
   Mobile Web
   

   View Slide

2. paulkinlan@google.com
   

   View Slide

3. “Mobile is
   massive”
   - Me, 2012
   

   View Slide

4. “We can’t apply
   the same
   desktop rules
   to the web.”
   - Me, 2012
   

   View Slide

5. Links are clickable
   

   View Slide

6. You don’t want to
   read our content
   right now
   WAIT 3
   MINUTES AND
   INSTALL OUR
   APP
   BAD!
   

   View Slide

7. Inline
   Native App
   install
   Good!
   

   View Slide

8. I came to India.
   I learnt a lot!
   

   View Slide

9. 6 million new mobile
   users per month
   

   View Slide

10. “I need my app to be
    installed.
    The Web can’t do that”
    - Every Tech Business in India*, August 2015
    

    View Slide

11. “I need notifications for
    engagement.
    The Web can’t do that”
    - Every Tech Business in India*, August 2015
    

    View Slide

12. “Network is terrible in
    India. I need to be fast.
    The Web can’t do that”
    - Every Tech Business in India*, August 2015
    

    View Slide

13. “Deep access to hardware
    is why I need an app.
    The Web can’t do that”
    - Every Tech Business in India*, August 2015
    

    View Slide

14. 1. Installability
    2. Engagement
    3. Performance
    4. Capabilities
    

    View Slide

15. The Web
    is dead
    Engaged
    user
    Go native
    

    View Slide

16. The Web can’t do
    that
    

    View Slide

17. The Web can do
    that
    

    View Slide

18. Engaged
    user on
    the web
    Engaged
    user on
    native
    Upgrade to
    

    View Slide

19. “Make an
    engaged user on
    the web and keep
    them there.”
    - Me, just now
    

    View Slide

20. “Paul you’re
    talking rubbish.
    .... Prove it!”
    - Everyone in the room, just now
    

    View Slide

21. Let’s build a
    product
    

    View Slide

22. Native or Web. The goal is
    the same
    People use your service
    

    View Slide

23. https://airhorner.com
    

    View Slide

24. You get traffic from many sources
    TV Ads Newspaper Ads Social + Search
    

    View Slide

25. Use Use
    Mobile Native Mobile Web
    

    View Slide

26. Mobile Native Mobile Web
    Load store
    Click install
    Accept Permission
    Download
    Go to homescreen
    Use
    

    View Slide

27. Mobile Native Mobile Web
    Load store
    Click install
    Accept Permission
    Download
    Go to homescreen
    Use Use
    Instant access
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

31. “But native has more
    engaged users?” -
    Everyone in the room, just now
    

    View Slide

32. “262 engaged users
    is better than 800
    unengaged users”
    - Everyone in the room, just now
    

    View Slide

33. Use Use
    262 800
    Mobile Native Mobile Web
    Why
    Web?
    Reach
    

    View Slide

34. Use Use
    262 800
    Mobile Native Mobile Web
    Why
    app?
    Reach
    Performance
    Engagement
    Capabilities
    Installability
    

    View Slide

35. Trade Reach for
    Engagement...
    

    View Slide

36. But...
    Can we get both?
    

    View Slide

37. Ideal
    solution
    The
    Web?
    Reach +
    Engagement
    Performance
    Capabilities
    Installability
    

    View Slide

38. “The web has
    amazing reach and
    now with deep
    engagement”
    - Me, just now
    

    View Slide

39. How?
    

    View Slide

40. 1. Focus on Performance
    2. Installability
    3. Engagement
    4. Service Worker
    

    View Slide

41. “The most important web
    technology since the link”
    - Me, just now
    

    View Slide

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
    

    View Slide

43. Service worker is a background
    script that sits between the
    browser and the networkOS
    What I say
    Service Worker
    

    View Slide

44. Installed
    Activated
    Idle
    Error
    Terminated
    Active
    Pages now have
    an app-like
    lifecycle
    Service Worker
    

    View Slide

45. Does all its work in
    the background
    

    View Slide

46. Installed
    Activated
    Idle
    Error
    Terminated
    Active
    It tries to use
    no resource
    Service Worker
    

    View Slide

47. Installed
    Activated
    Idle
    Error
    Terminated
    Active
    Can work when
    the browser is
    closed
    Service Worker
    

    View Slide

48. Installed
    Activated
    Idle
    Error
    Terminated
    Active
    sw.js
    Register Service
    Worker
    Service Worker
    

    View Slide

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
    

    View Slide

50. Installed
    Activated
    Idle
    Error
    Terminated
    Active
    You can “install”
    content for later
    use
    Service Worker
    

    View Slide

51. Installed
    Activated
    Idle
    Error
    Terminate
    d
    Active
    onfetch
    onmessage
    onnotificationclick
    more
    Service Worker
    Lots of new
    engagement API’
    s
    

    View Slide

52. Installability
    

    View Slide

53. 1. Get on the homescreen
    2. Load instantly
    

    View Slide

54. Users
    ● Expect apps to be on
    the homescreen
    ● Expect apps to be in
    the app switcher
    Installability
    

    View Slide

55. How to get on the
    homescreen
    ● Uses a service worker
    ● Use HTTPS
    ● Have a manifest declared
    Installability
    

    View Slide

56. 
    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
    

    View Slide

57. Installed
    Activated
    Idle
    Error
    Terminated
    Active
    You can “install”
    content for later
    use
    Installability
    

    View Slide

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
    

    View Slide

59. Installed
    Activated
    Idle
    Error
    Terminated
    Active
    onfetch
    onmessage
    onnotificationclick
    more
    You own the
    network
    Installability
    

    View Slide

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
    

    View Slide

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
    

    View Slide

62. Ideal
    solution
    Reach +
    Engagement
    Performance
    Capabilities
    Installability
    ✔
    ✔
    

    View Slide

63. Engagement
    

    View Slide

64. 1. Deeper ties into the OS
    2. Notifications
    

    View Slide

65. View Slide

66. name="theme-color"
    content="#3f4348">
    Installability
    

    View Slide

67. View Slide

68. Installed
    Activated
    Idle
    Error
    Terminated
    Active
    onfetch
    onmessage
    onnotificationclick
    more
    You can handle
    push messages
    Engagement
    

    View Slide

69. SW
    Your
    server
    GCM
    server
    Client
    Server
    Engagement
    

    View Slide

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
    

    View Slide

71. Engagement
    

    View Slide

72. SW
    Your
    server
    GCM
    server
    Client
    Server
    Local
    Engagement
    

    View Slide

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
    

    View Slide

74. Installed
    Activated
    Idle
    Error
    Terminated
    Active
    onfetch
    onmessage
    onnotificationclick
    more
    You can handle
    notifications
    Engagement
    

    View Slide

75. SW
    Opens a web page
    User clicks
    Engagement
    

    View Slide

76. self.addEventListener('notificationclick', function(event) {
    var data = event.notification.data;
    clients.openWindow(data.url);
    });
    Engagement
    

    View Slide

77. Ideal
    solution
    Reach +
    Engagement
    Performance
    Capabilities
    Installability
    ✔
    ✔
    ✔
    

    View Slide

78. Performance
    

    View Slide

79. It’s not an
    Infrastructure
    problem
    

    View Slide

80. If it is...
    App’s won’t save
    you!
    

    View Slide

81. Page Load Time
    

    View Slide

82. Time to first render
    

    View Slide

83. First Render
    < 1s
    

    View Slide

84. View Slide

85. There are simple
    things we can do
    to speed up our
    sites
    

    View Slide

86. Critical Render Path
    

    View Slide

87. Find and remove Render
    Blocking Assets
    

    View Slide

88. Prioritize Visible
    content
    

    View Slide

89. Visible content
    Content that is likely to
    be visible in the top
    area
    

    View Slide

90. What would first render look like
    ● No Web Font’s
    ● No Images inline
    ● No plugins
    ● Just the CSS for the
    page
    

    View Slide

91. CSS before JS
    

    View Slide

92. Inline page required CSS
    then
    Async load the rest
    

    View Slide

93. prioritize_critical_css
    original
    First render @ 4.1
    First render @ 1.3
    s
    

    View Slide

94. Compress Everything
    

    View Slide

95. Reduce Requests
    DNS Lookup Initial Conn SSL Negotiation
    Socket set-up Time to first byte
    (HTTP Request)
    Data delivery
    . . .
    

    View Slide

96. Pre-connect
    

    View Slide

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

    View Slide

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);
    }
    }
    });
    

    View Slide

99. Plan for http/2
    

    View Slide

100. Ideal
     solution
     Reach +
     Engagement
     Performance
     Capabilities
     Installability
     ✔
     ✔
     ✔
     ✔
     

     View Slide

101. Capabilities
     

     View Slide

102. Most apps just
     want
     Notifications
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

109. Installed
     Activated
     Idle
     Error
     Terminated
     Active
     onfetch
     onmessage
     onnotificationclick
     more
     There is a lot more
     coming...
     

     View Slide

110. Background Sync
     self.addEventListener('sync', function(event) {
     event.waitUntil(sendEverythingInTheOutbox());
     });
     

     View Slide

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
     

     View Slide

112. Ideal
     solution
     Reach +
     Engagement
     Performance
     Capabilities
     Installability
     ✔
     ✔
     ✔
     ✔
     ✔
     

     View Slide

113. Ideal
     solution
     Reach +
     Engagement
     Performance
     Capabilities
     Installability
     ✔
     ✔
     ✔
     ✔
     ✔
     Payments :’(
     

     View Slide

114. The
     Web is
     dead
     Engaged
     native user
     Move to
     

     View Slide

115. Make an
     engaged
     user on the
     web
     Engaged
     native user
     Upgrade to
     

     View Slide

116. “Build engaging
     experiences.
     Your site is the
     first touch point
     to do that”
     - Me, forever
     

     View Slide

117. developers.google.com/web/fundamentals
     

     View Slide

118. developers.google.com/web/updates
     

     View Slide

119. chromiumdev-slack.herokuapp.com
     

     View Slide

120. “Thank you”
     - Me, always
     paulkinlan@google.com
     @paul_kinlan
     

     View Slide