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

Transcript

1. The future of the web
   on mobile
   

   View Slide

2. View Slide

3. Links are clickable
   

   View Slide

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

   View Slide

5. In 5 years you won’
   t know you’re
   using a browser
   

   View Slide

6. I went to India.
   This is the only
   photo I took.
   

   View Slide

7. View Slide

8. 6 million new
   mobile users per
   month
   

   View Slide

9. Screw
   the
   web
   Engaged
   user
   Go native
   

   View Slide

10. 1. Performance
    2. Engagement
    3. Offline access
    4. Capabilities
    

    View Slide

11. Dev’s and Biz think
    they can’t do this
    on the web
    

    View Slide

12. Designed
    1822 ish
    

    View Slide

13. "Analytical Machine Babbage
    London" by Bruno Barral (ByB).
    Licensed under CC BY-SA 2.5 via
    Wikimedia Commons
    goo.gl/Ry8Odk
    NEVER
    BUILT
    

    View Slide

14. 60’s - Mid 80’s
    

    View Slide

15. Invented Peak Demise
    1977 1980s ?
    

    View Slide

16. Invented Peak Demise
    1976 1980s ?
    

    View Slide

17. Invented Peak Demise
    1982 2005?
    

    View Slide

18. Invented Peak Demise
    1988 1998 2009
    

    View Slide

19. View Slide

20. Far less
    capable
    Massively
    better
    delivery
    model
    

    View Slide

21. Friction was
    removed
    

    View Slide

22. SLICE
    paul.kinlan.me/slice-the-web/
    

    View Slide

23. Secure
    

    View Slide

24. Linkable
    

    View Slide

25. Indexable
    

    View Slide

26. Composable
    

    View Slide

27. Ephemeral
    Site takes up no resources once
    you leave
    Lives and dies with the tab
    

    View Slide

28. SLUICE
    Updateable?
    https://commons.wikimedia.org/wiki/File:MagomeSluice.jpg
    

    View Slide

29. Is this relevant on
    mobile?
    

    View Slide

30. Diskettes
    CD
    Web
    App Stores
    Mobilithic era Mobile era
    Chat + Others
    Pre internet
    DVD
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

34. Many entry points
    

    View Slide

35. e-mail Messenger Social Notification
    WebView Beacons Search ?
    

    View Slide

36. Is the web under
    threat?
    

    View Slide

37. Web
    iOS Android Desktop
    Meta platform
    Host platform
    

    View Slide

38. Web
    iOS Android Desktop
    FB WeChat
    Messengers
    Line
    Meta platform
    Host platform
    Kakao
    

    View Slide

39. Web
    iOS Android Desktop
    FB WeChat
    Messengers
    Line
    Meta platform
    Host platform
    Kakao
    

    View Slide

40. Web
    Android Desktop
    FB WeChat
    Apple
    News
    iOS
    Line
    Meta platform
    Host platform
    Kakao
    Instant
    Articles
    Content
    platform
    Official
    Accounts
    Kakao
    Page
    

    View Slide

41. Web
    Android Desktop
    Performance
    FB WeChat
    Apple
    News
    Line
    iOS
    Meta platform
    Host platform
    Kakao
    Instant
    Articles
    Content
    platform
    Official
    Accounts
    Kakao
    Page
    

    View Slide

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
    

    View Slide

43. Web
    iOS Android Desktop
    FB WeChat
    Messengers
    Line
    Meta platform
    Host platform
    Kakao
    

    View Slide

44. Web
    iOS Android Desktop
    FB WeChat
    Line
    Meta platform
    Host platform
    Kakao
    App platform FB WeChat
    Line Kakao
    

    View Slide

45. Web
    iOS Android Desktop
    FB WeChat
    Line
    Meta platform
    Host platform
    Kakao
    App platform
    FB WeChat
    Line Kakao
    Capabilities
    

    View Slide

46. Web
    iOS Android Desktop
    FB WeChat
    Line
    Meta platform
    Host platform
    Kakao
    App platform
    FB WeChat
    Line Kakao
    Web?
    Capabilities
    

    View Slide

47. Each app wants
    to be
    “the next browser”
    

    View Slide

48. We all want it to launch
    in the browser
    ● Simple
    ● Secure
    ● Apps lose the
    user
    ● Not branded
    Good The Bad
    

    View Slide

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
    

    View Slide

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
    

    View Slide

51. View Slide

52. Each platform
    intends to be
    “the next web”
    

    View Slide

53. React
    TODO: Trojan horse.
    

    View Slide

54. It’s pretty bleak for
    the web
    

    View Slide

55. 3 “simple” steps to win
    with the web
    

    View Slide

56. 3. Act Installed,
    Be Ephemeral
    

    View Slide

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
    

    View Slide

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
    

    View Slide

59. 1. Be in all the expected places
    2. Always be available regardless of
    connectivity
    3. No install required.
    

    View Slide

60. google.github.io/physical-web/
    

    View Slide

61. View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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/
    

    View Slide

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

    View Slide

68. Installed
    Activated
    Idle
    Error
    Terminated
    Active
    Pages now have
    an app-like
    lifecycle
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

72. Installed
    Activated
    Idle
    Error
    Terminated
    Active
    You can work
    when the
    browser is
    closed
    

    View Slide

73. Installed
    Activated
    Idle
    Error
    Terminate
    d
    Active
    onfetch
    onmessage
    onnotificationclick
    more
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

78. SW
    Your
    server
    GCM
    server
    Client
    Server
    

    View Slide

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

    View Slide

80. View Slide

81. SW
    Your
    server
    GCM
    server
    Client
    Server
    Local
    

    View Slide

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

    View Slide

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

    View Slide

84. SW
    Opens a web page
    User clicks
    

    View Slide

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

    View Slide

86. SW
    Open a web page
    SW
    Execute JS
    User clicks
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

91. Beacons?
    self.addEventListener('beaconfound', function(event) {
    ...
    });
    

    View Slide

92. Future: geofence?
    self.addEventListener('entergeofence', function(event) {
    ...
    });
    

    View Slide

93. Does all it’s work in
    the background
    

    View Slide

94. 2. Build for a richer
    platform
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
     

     View Slide

101. How does the Web
     match the cadence of
     Native and Play
     Services?
     

     View Slide

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
     

     View Slide

103. Extrapolated from http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html
     

     View Slide

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?
     

     View Slide

105. Extrapolated from http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html
     Killer feature
     

     View Slide

106. 1. Be Instant
     

     View Slide

107. 1000ms to first paint
     (progressive rendering)
     

     View Slide

108. Follow the Critical Render Path
     The series of events that must take place to
     render the initial view of a webpage.
     

     View Slide

109. Aggressively Offline content
     

     View Slide

110. Extrapolated from http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html
     Give value
     immediately
     Optimize this
     

     View Slide

111. Prepare for the
     Headless Web
     

     View Slide

112. View Slide

113. View Slide

114. View Slide

115. ✓ Performance
     ✓ Engagement
     ✓ Offline access
     ✓ Capabilities
     

     View Slide

116. Screw the
     web
     Engaged
     native user
     Move to
     

     View Slide

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

     View Slide

118. Make an
     engaged
     user on the
     web
     Keep them
     there
     

     View Slide

119. developers.google.com/web/fundamentals
     

     View Slide

120. developers.google.com/web/updates
     

     View Slide

121. chromestatus.com
     

     View Slide

122. chromiumdev-slack.herokuapp.com
     

     View Slide

123. paulkinlan@google.com
     Slack: chromiumdev-slack.herokuapp.
     com
     

     View Slide