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

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

Paul Kinlan
September 21, 2015

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

Paul Kinlan

September 21, 2015
Tweet

More Decks by Paul Kinlan

Other Decks in Programming

Transcript

  1. Be Instant and
    Engaging with the
    Mobile Web

    View Slide

  2. 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
    [email protected]
    @paul_kinlan

    View Slide