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

The Future Of The Web: Does It Have One?

The Future Of The Web: Does It Have One?

Alex Russell

July 25, 2015
Tweet

Other Decks in Programming

Transcript

  1. 86% 14% TIME SPENT ON SITES TIME SPENT ON APPS

    “Apps continued to cement their lead, and commanded 86% of the average US mobile consumer’s time” Flurry 2014/04/01
  2. Boring Browser Stuff: 1. The great GPU divide 2. Input

    metaphor retrofit 3. Chip architecture switch
  3. 86% 14% TIME SPENT ON SITES TIME SPENT ON APPS

    14% 40% GAMING & ENT. 28% SOCIAL 20% OTHER 66% SITES 6% APPS 28% SITES & APPS PRIMARY CHANNEL FOR COMMERCIAL TASKS USER TIME SPENT ON MOBILE DEVICES
  4. App Developers Report 20% Drop In Conversions Per Action Source:

    blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html
  5. ... <meta name="description" content="Chrome Dev Summit is your opportunity to....">

    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> <title>Chrome Dev Summit 2014</title> <meta itemprop="name" content="Chrome Dev Summit"> <meta itemprop="image" content="/devsummit/images/chrome-dev-summit-masthead-1.jpg"> <meta name="mobile-web-app-capable" content="yes"> <link rel="icon" sizes="192x192" href="/devsummit/images/chrome-touch-icon-192x192.png"> <meta id="theme-color" name="theme-color" content="#362A6C"> <!-- Add to homescreen for Safari on iOS --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="Chrome Dev Summit"> <!-- Tile icon for Win8 (144x144 + tile color) --> <meta name="msapplication-TileImage" content="/devsummit/images/ms-touch-icon-144x144-precomposed.png"> <meta name="msapplication-TileColor" content="#362A6C"> ... Currently, On EVERY PAGE These are VERY VALUABLE bytes
  6. <meta name="theme-color" content="#303F9F"> <link rel="manifest" href="manifest.json"> HTML { "short_name": "PolyAir",

    "name": "Polymer Airlines", "start_url": "/", "display": "standalone", "icons": [{ "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png", "density": "4.0" }], "orientation": "portrait", "gcm_sender_id": "129757602160" } JSON Manifest With Manifests Metadata delegated to one file Extensible & crawlable
  7. example.com // sw.js onfetch = function(e) { if(e.request.url == "app.html")

    { e.respondWith( caches.match(e.request) ); } if(e.request.url == "content.json") { // go to the network for updates, // meanwhile, use cached content fetch(...).then(function(r) { r.asJSON().then(function(json) { e.client.postMessage(json); }); }); } }; GET /app.html HTTP/1.1 HOST example.com ... GET /content.json HTTP/1.1 HOST example.com ... GET /content.json HTTP/1.1 HOST example.com ... HTTP/1.1 200 OK Date: Thu, 19 Feb 2015... ...