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

The future of the web on mobile? - Coldfront conf

Paul Kinlan
September 03, 2015

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

Paul Kinlan

September 03, 2015
Tweet

More Decks by Paul Kinlan

Other Decks in Programming

Transcript

  1. "Analytical Machine Babbage London" by Bruno Barral (ByB). Licensed under

    CC BY-SA 2.5 via Wikimedia Commons goo.gl/Ry8Odk NEVER BUILT
  2. 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
  3. 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
  4. 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
  5. Web Android Desktop FB WeChat Apple News iOS Line Meta

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

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

    iOS Host platform Kakao Content platform Performance Web? Instant Articles Official Accounts Kakao Page
  8. Web iOS Android Desktop FB WeChat Line Meta platform Host

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

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

    platform Kakao App platform FB WeChat Line Kakao Web? Capabilities
  11. We all want it to launch in the browser •

    Simple • Secure • Apps lose the user • Not branded Good The Bad
  12. 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
  13. 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
  14. 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
  15. 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
  16. 1. Be in all the expected places 2. Always be

    available regardless of connectivity 3. No install required.
  17. 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
  18. <link rel="manifest" href="manifest.json"> 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
  19. 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/
  20. 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
  21. 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 }) ); });
  22. 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 }) ); });
  23. 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); } });
  24. 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
  25. 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); }
  26. 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); }
  27. 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);
  28. Net Info jsbin.com/moturi/2 function changeHandler(e) { // Handle change to

    connection here. connEl.innerText = navigator.connection.type; } navigator.connection.addEventListener( 'typechange', changeHandler);
  29. 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
  30. 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
  31. Follow the Critical Render Path The series of events that

    must take place to render the initial view of a webpage.