Future of Mobile Web - Coldfront conf

The future of the web on mobile

Links are clickable

You don’t want to read our content right now

WAIT 3 MINUTES AND INSTALL OUR

APP

In 5 years you won’t know you’re

using a browser

I went to India.

This is the only photo I took.

6 million new mobile users per month

Screw the web

Engaged user

Go native

1. Performance2. Engagement3. Offline access4. Capabilities

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

Designed 1822 ish

"Analytical Machine Babbage London" by Bruno Barral (ByB). Licensed under CC BY-SA 2.5 via Wikimedia Commons

goo.gl/Ry8Odk

NEVER BUILT

60’s - Mid 80’s

Invented Peak Demise

1977 1980s ?


1976 1980s ?


1982 2005?


1988 1998 2009

Far less capable

Massively better delivery model

Friction was removed

SLICEpaul.kinlan.me/slice-the-web/

Secure

Linkable

Indexable

Composable

EphemeralSite takes up no resources once

you leave

Lives and dies with the tab

SLUICE

Updateable?

https://commons.wikimedia.org/wiki/File:MagomeSluice.jpg

Is this relevant on mobile?

Diskettes

CD

Web

App Stores

Mobilithic era Mobile eraChat + Others

Pre internet

DVD

Diskettes

CD

Web

App Stores

Mobilithic era Mobile eraChat + Others

Pre internet

DVD

June 29, 2007

1.3 billion users 2 new billion users

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

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

Many entry points

e-mail Messenger Social Notification

WebView Beacons Search ?

Is the web under threat?

Web

iOS Android Desktop

Meta platform

Host platform

Web

iOS Android Desktop

FB WeChat

Messengers

LineMeta platform

Host platform

Kakao

Web

iOS Android Desktop

FB WeChat

Messengers

LineMeta platform

Host platform

Kakao

Web

Android Desktop

FB WeChat

Apple News

iOS

LineMeta platform

Host platform

Kakao

Instant Articles

Content platform

Official Accounts

Kakao Page

Web

Android Desktop

Performance

FB WeChat

Apple News

Line

iOS

Meta platform

Host platform

Kakao

Instant Articles

Content platform

Official Accounts

Kakao Page

Web

Android Desktop

FB WeChat

Apple News

LineMeta platform

iOSHost platform

Kakao

Content platform

Performance

Web? Instant Articles

Official Accounts

Kakao Page

Web

iOS Android Desktop

FB WeChat

Messengers

LineMeta platform

Host platform

Kakao

Web

iOS Android Desktop

FB WeChatLineMeta platform

Host platform

Kakao

App platform FB WeChatLine Kakao

Web

iOS Android Desktop


Host platform

Kakao

App platform

FB WeChatLine KakaoCapabilities

Web

iOS Android Desktop


Host platform

Kakao

App platform

FB WeChatLine KakaoWeb?Capabilities

Each app wants to be

“the next browser”

We all want it to launch in the browser

● Simple● Secure

● Apps lose the user

● Not branded

Good The Bad

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

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

Each platform intends to be

“the next web”

React

TODO: Trojan horse.

It’s pretty bleak for the web

3 “simple” steps to win with the web

3. Act Installed,Be Ephemeral

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

Web 2013 Web 2014 Web (2015) Native


Single click install and launch

YES YES YES NO

Geo YES YES YES YES




Camera NO NO YES YES

Push NO NO YES YES

Auth NO NO NO YES


1. Be in all the expected places

2. Always be available regardless of connectivity

3. No install required.

google.github.io/physical-web/

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

http://www.html5rocks.com/en/tutorials/service-worker/introduction/

<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

<meta

name="theme-color"

content="#3f4348">

Service Worker

“The most important web technology since the link” - Me, just now

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/

Service worker is a background script that sits between the browser and the networkOS

What I say

Installed

Activated

Idle

Error

Terminated

Active

Pages now have an app-like lifecycle

Installed

Activated

Idle

Error

Terminated

Active

sw.js

Register Service Worker

Installed

Activated

Idle

Error

Terminated

Active

You can “install” content for later use

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

Installed

Activated

Idle

Error

Terminated

Active

You can work when the browser is closed

Installed

Activated

Idle

Error

Terminated

Activeonfetch

onmessage

onnotificationclick

more

Installed

Activated

Idle

Error

Terminated

Activeonfetch

onmessage

onnotificationclick

moreYou own the network

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

WebServer

self.addEventListener('fetch', function(event) { console.log(event.request.url); event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) );});

Installed

Activated

Idle

Error

Terminated

Activeonfetch

onmessage

onnotificationclick

moreYou can handle push messages

SW

Your server

GCM server

ClientServer

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

SW

Your server

GCM server

ClientServer

Local

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

Installed

Activated

Idle

Error

Terminated

Activeonfetch

onmessage

onnotificationclick

moreYou can handle notifications

SW

Opens a web page

User clicks

self.addEventListener('notificationclick', function(event) {

var data = event.notification.data;

clients.openWindow(data.url);

});

SW

Open a web page

SW

Execute JS

User clicks

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

}

});

Installed

Activated

Idle

Error

Terminated

Activeonfetch

onmessage

onnotificationclick

moreYou can handle notifications

Background Sync

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

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

Beacons?

self.addEventListener('beaconfound', function(event) {

...

});

Future: geofence?

self.addEventListener('entergeofence', function(event) {

...

});

Does all it’s work in the background

2. Build for a richer platform

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

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

Battery Statusgooglechrome.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);

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

Net Infojsbin.com/moturi/2

function changeHandler(e) { // Handle change to connection here. connEl.innerText = navigator.connection.type;}

navigator.connection.addEventListener( 'typechange', changeHandler);

Web 2013 Web 2014 Web (2015)

Native


Single click install and launch YES YES YES NO

Geo YES YES YES YES



Camera KINDA YES YES YES

Push NO NO YES YES


Auth NO NO NO YES


How does the Web match the cadence of

Native and Play Services?

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

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?


Killer feature

1. Be Instant

1000ms to first paint(progressive rendering)

Follow the Critical Render Path

The series of events that must take place to render the initial view of a webpage.

Aggressively Offline content


Give value immediately

Optimize this

Prepare for the

Headless Web

✓ Performance✓ Engagement✓ Offline access✓ Capabilities

Screw the web

Engaged native user

Move to

Make an engaged

user on the web

Engaged native user

Upgrade to

Make an engaged

user on the web

Keep them there

developers.google.com/web/fundamentals

developers.google.com/web/updates

chromestatus.com

chromiumdev-slack.herokuapp.com

[email protected]: chromiumdev-slack.herokuapp.com

Technology

Future of Mobile Web - Coldfront conf