Web+ What the web needs next

Bruce Lawson

Web+
what the web needs next

Bruce Lawson

bruce in front of 'HTML' sign

The Big Question

Can the Web Win the War Against Native Without Losing its Soul?
badge saying 'I love the web'
great big disclaimer
breakfast: a cup of tea, a boiled egg and the newspaper
'Download our app' advertisment for Birmingham Mail newspaper
tweet from Marc Reeves 'Users tend to read around five times as many stories via the app vs desktop site'

July 2011-12: US Mobile Web users up 82% from 52,435,000 to 95,176,000

Numbers from Nielsen State of the Media: the social media report 2012.

July 2011-12: US Mobile App users up 85% from 55,001,000 to 101,802,000

July 2011-12: Time spent using Mobile Web up 22% .

(PC use up 4%, although number of unique users down 4% from 213,253,000 to 204,721,000.

July 2011-12: Time spent using Mobile Apps up 120% .

It's an App World.
The Web Just Lives in It

Today, the U.S. consumer spends an average of 2 hours and 38 minutes per day on smartphones and tablets. 80% of that time (2 hours and 7 minutes) is spent inside apps and 20% (31 minutes) is spent on the mobile web.
blog.flurry.com April, 2013
breakdown of time spent: 80% apps, 20% browser (Safari 12%, Android 4%, Opera Mini 2%)
2013: 80% to 20% split between apps and web; 2014: 86% to 14%
mind the gap
series of tweets between me and Marc Reeves answering my question 'why do users read 5 times as much on an app with 'Can only speculate that portability and opportunity of the moment encourages engagement during what would otherwise be 'dead' time'
Page not found error message page

Appcache

man alone at party, surrounded by kissing couples
http://www.lollercoasterlab.com/2011/05/forever-alone-this-party-is-crp.html

What's wrong with AppCache?

AppCache is declarative -- you give the browser a manifest and magic happens. This has well-documented limitations.
Alex Russell (sinister mastermind at Google)
screenshot of Jake Archibald's A List Apart article 'appcache is a douchebag'
Service Workers

Service Workers CheatSheet

cutaway diagram of Apollo lunar module
cartoon walrus in front of lunar module
cartoon leg with lampshade on top, next to walrus and lunar module
navigator.registerServiceWorker
  ("/*", "/assets/v1/ctrl.js").then(
    function(serviceWorker) {
		  console.log("success!");
		  // call window.location.reload()
		},
	  function(why) {
	    console.error("failed!:", why);
    }
);
browser shows nothing when not connected to web
browser shows site when connected to web worker, even though not connected to web

Service Workers + IndexedDB = Power

When combined with access to IndexedDB and a new form of Cache, the ability to respond with arbitrary content is incredibly powerful.
Service Workers Explained

IDB heebie jeebies

The goal of IndexedDB was to allow multiple different query processors to be built in JS. We expected few people to use it directly.
Adrian Bateman (Microsoft)
W3C Technical Architecture Group

High-level or low-level?

when we try to produce high-level APIs, they tend to suck for various reasons, and therefore that we should produce lower-level primitives atop which people can build nicer things
Robin Berjon (W3C, HTML Editor)

Extensible Web Manifesto

Browser vendors should provide new low-level capabilities that expose the possibilities of the underlying platform as closely as possible. They should also seed the discussion of high-level APIs through JavaScript implementations of new features
extensiblewebmanifesto.org
Detail from 'American Gothic' painting by Grant Wood showing pitchfork
picture of letters 'DRM' drawn by 6 year old boy, with scary faces, flames and spidesrs
thick chain with padlock. Two of the chain links are held together with a thin strip of plastic.
burning torch
great big disclaimer
picture of a unicorn drawn by 6 year old boy, surrounded by blue sky with fluffy clouds and double rainbow
tweet by Alon Zakai ‏(@kripken), 4 Oct: 'Much debate about EME DRM. But little mentions that Google&Microsoft are the browsers pushing it. Convincing them - the only way to stop it'

BBC

nation shall speak peace unto nation.

BBC Charter

old engraving of satanic figure threatening two children with tongue outstretched

BBC

The BBC supports the publication of the first draft of the Encrypted Media Extensions Proposal.
BBC (W3C mailing list)
by limiting the window of availability, the BBC is able to make content available for no additional fee to UK licence fee payers
many television programmes themselves contain music tracks which must be licensed from other rights holders. Many are based on existing books, or contain stills or other pieces of existing footage

BBC

since the launch of iPlayer the amount of platforms with incompatible distribution infrastructure, video formats and security technologies has rapidly increased. This level of growth in the complexity of delivery is unsustainable

Forced to go native

If the W3C is unable to agree a suitable solution for protected media delivery…high-quality video content that the broadcast industry produces will be made available only to closed devices and application stores where such security can be implemented.

…and be unlinkable

In short, it will be lost to the World Wide Web entirely, and such systems have shown so far to be difficult to link to and reference for the rest of the web … We do not believe this scenario would be positive the open web, or for anyone, either video producers or customers.
Geolocation

There's an app API for that

phonegap diagram and picture of Brian LeRoux

App store discoverability

Device APIs not so much anymore, now that many/most of what is needed is now there or soon to be. (Especially so with WebRTC.)

App Stores for discovery is big.

Brian "Bobbles Bon-Bon" LeRoux, PhoneGap

Monetizsation

I don't buy the monetization story, because if I did, that means I endorse $1 business models based on manufactured scarcity. ;P
Bobbles Bon-Bon

…but for Web Payments see web-payments.org

Engagement

Push Notifications for the engagement part of the story.
"Bobbles Bon-Bon"
mind the gap

More capabilities

User Experience Stack Exchange: Any Research on User Experience Perceptions of Native Apps vs Web or Hybrid Apps?

Usability

Superior interaction

Opera Coast download, developer info (iPad, iPhone)

Performance

Closing the gap

Some of the barriers that I've heard mentioned frequently include performance, in particular when it comes to user interfaces (e.g. scrolling), as it can affect the user experience dramatically
W3C: Closing the gap with native apps

<img lazyload…>

the User Agent MUST delay downloading the resource until after all other elements without the lazyload attribute that will be fetching a resource have started downloading
W3C Resource Priorities Spec

Not just <img>

img, SVG feImage, audio, video, script, link, embed, iframe, object

IE11 gives more optimized TCP connection if there is a choice between available connections to resources that don't have the "lazyload" attribute

<img postpone> ?

The postpone attribute indicates that the User Agent MUST not start downloading the resource associated with the element until either the bounding box of the element is inside the User Agent's interpretation of the Document's viewport, or the element has been styled such that its display property is no longer set to none.

{position: sticky}

.sticky { position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: sticky;
  top: 15px;}

Demo, with <table>.

more browsers are implementing hardware accelerated scrolling to improve performance. The problem with this is that on JS scroll handlers are in play, browsers may fall back into a slower (software) mode . Now we're no longer running on the GPU. Instead, we're back on the CPU
HTML5rocks.com

Interaction

Scott Jenson

screeshot of weight.aerotwist.com in Chrome for Android
weight.aerotwist.com with Chrome for Android's menu exposed
... scroll down the menu and see 'Add to homescreen' option
Android home screen with weight.aerotwist.com icon on it
Choosing icon starts weight.aerotwist.com with no browser chrome

Bookmarking = installing

<meta name="mobile-web-app-capable" content="yes"> (see Chrome docs)

<meta name="apple-mobile-web-app-capable" content="yes"> (Apple docs)

Web Manifest

w3c.github.io/manifest/ - Mozilla's Marvellous Mr Marcos' magical manifest

Installability

W3C: Enabling new types of web user experiences

W3C Widgets

a packaging format and metadata for … full-fledged client-side applications that are authored using technologies such as HTML and then packaged for distribution. Examples range from simple clocks … to complex applications that pull data from multiple sources
W3C Widgets spec

Why did Widgets fail?

Apple Patent Exclusion

Apple has disclosed a patent and excluded claims from the W3C Royalty-Free License commitment of the W3C Patent Policy, for the Widgets 1.0: Updates specification
public-webapps@w3.org 5 Mar 2009: Apple Patent Exclusion on Widgets 1.0: Updates
old woodcut of woman throwing baby out with bathwater
photo of scary Stephen King clown staring out from a postbox slot

Notification Hell

stack of non-modal dialogues asking for camera, microphone, geolocation permissions

Privileged API problem

the problem lies in the fact that a web page could be surreptitiously phoning my private and sensitive content from my device back to some 3rd party server.

Exposing privileged APIs to web content - @richtibbett

Not a problem for packages

Internet access is, by default, revoked from a package since it no longer belongs to any particular domain origin. If a packaged web application needs to access any Internet servers it needs to explicitly request the specific URLs it requires access to in the outside world.

document.readyState

  1. loading
  2. interactive
  3. complete

WHATWG current document readiness

"installing" a page

  1. loading
  2. interactive
  3. complete
  4. installed

Rich Tibbet: Exposing privileged APIs to web content

On install

Other proposals are available

Installable Webapps: Extend the Sandbox - Boris Smus

ballon from one of Google's Project Loon
internet.org logo
image of the world, with a circle encompassing India, Pakistan, China etc and text 'more people live inside this circle than outside of it

The Smartphone myth

smartphone segment grew in sales by 75% last year, it still represented just 8.1% of overall mobile phone sales in India

Times of India, April 2013

list of obscure phones
Diagram showing how Opera Mini compresses Facebook from 3.5MB to 680K

What's so funny about Peace, Love and Progressive Enhancement?

screenshot of prerender.io

Holy Grail App

we've launched our first Holy Grail app into production! … It looks exactly the same as the app it replaced, however initial pageload feels drastically quicker because we serve up real HTML instead of waiting for the client to download JavaScript before rendering.
AirBnB

Holy Grail App #2

Plus, it is fully crawlable by search engines. … It feels 5x faster.
AirBnB
screenshot of prerender.io

Stop emulating failure

advert: photo of phone with QR code and text 'scan to download timetables in PDF format

What the web needs

An increase in Internet maturity similar to the one experienced in mature countries over the past 5 years creates an increase in real GDP per capita of $500 on average during this period.

It took the Industrial Revolution of the 19th century fifty years to produce the same result.

McKinsey Global Institute
complex diagram of who's suing who in mobile
video of an old TV being switched off

Thanks

Image acknowledgments