Web+ What the web needs next

The Big Question

Can the Web compete with Native without losing its soul?

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.

SlapDache

The appcache API is another big mistake. It’s the best example of not understanding the problem before designing a solution, and I’m still trying to fix that mess.

What's wrong with AppCache?

AppCache is declarative -- you give the browser a manifest and magic happens. This has well-documented limitations.

Service Workers CheatSheet

• registered Service Workers are invoked even when offline, so enable apps that are "offline by default"
• normal resource loading is the fallback behavior
• it forces you to have URLs! Some modern apps platforms have foresaken this core principle of the web and suffer for it. The web should never make the same mistake.

nnavigator.serviceWorker.register
  ("/*", "/assets/v1/wrkr.js").then(
    function(serviceWorker) {
		  console.log("success!");
		  // call window.location.reload()
		},
	  function(why) {
	    console.error("failed!:", why);
    }
);

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.

this.addEventListener('fetch',
 	function(event) {
  if (event.request.context == 'image'
  	&& new Date().getDay() == 4) {
    event.respondWith(
      fetch('/kitten.jpg')
    ) // thx @jaffathecake
  } // more: http://youtu.be/4uQMl7mFB6g
});

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

Web Components

Web Components enable Web application authors to define widgets with a level of visual richness and interactivity not possible with CSS alone, and ease of composition and reuse not possible with script libraries today.

More capabilities

• They have access to device-specific functions such as geolocation and accelerometers.
• They can be used offline

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

There's an app API for that

• File API
• Orientation
• Sensors (humidity, ambient light)
• WebRTC
• Drag'n'Drop

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.

Monetizsation

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

…but for Web Payments see web-payments.org

Web Payments

We're creating a set of universal payment technologies to make sending and receiving money over the Web as easy as sending an email.

The Web is going to play a key role in achieving a resilient financial infrastructure and creating a more equitable future for all of us.

Current work

• Identity
• Payment initiation
• Digitial receipts

Thanks Manu Sporny, Digital Bazaar

Engagement

Push Notifications for the engagement part of the story.

Engagement

Push Notifications for the engagement part of the story.

Superior interaction

• It can also make their performance faster by allowing them to store information locally
• They allow the user to use device-specific hand gestures. Android and iOS are gradually developing different conventions for interaction, and a native app responds the way its user expects.

Opera Coast download, developer info (iPad, iPhone)

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

<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

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

Usability

• People prefer the familiar; Users trust known resources
• Mobile users bookmark differently. Bookmarks in mobile browsers are used sparingly, instead mobile users "bookmark" by downloading the native app.

User Experience Stack Exchange

Scott Jenson

• integrate in the list of apps directly available to the user. This means that it should show up on that OS's home screen and be launched just like any other native app.
• integrate into the the OS task-switcher.

W3C: Enabling new types of web user experiences

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

• <link rel="manifest" href="install.json">
• the web application's name, links to icons
• the preferred URL to open on launch
• default orientation, fullscreen indicator

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

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

Africa

Internet use on mobile phones in Africa predicted to increase 20-fold.

Researchers say increase will take place in next five years and will be double the rate of growth in rest of world.

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

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

Holy Grail App #2

because we serve up real HTML instead of waiting for the client to download JavaScript before rendering. Plus, it is fully crawlable by search engines. … It feels 5x faster.

What the web needs

• Browser vendors to work together for interop
• Standards that preserve core strengths of Web
• An end to silos
• Web developers to preserve core strengths of Web

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.

Thanks

• John Allsopp
• Jake Archibald
• Andreas Bovens
• Marcos Caceres
• Shwetank Dixit
• Stuart Langridge
• Brian Leroux
• Jo Rabin
• Alex Russell
• Manu Sporny
• Rich Tibbett

Image acknowledgments

• Me by HTML sign in Tokyo by Doug Schepers (@shepazu)
• Apps vs Web graphs by Flurry, used by permission
• Appcache party
• Mind the Gap - Reinhard Dietrich
• Project loon launch - Doug Coldwell
• PhoneGap diagram: Adobe; Brian LeRoux pic courtesy of Brian