The Web - What it Has, What it Lacks 


@robertnyman
and Where it Must Go
Our line of work
Face recognition
Experience
Trends
My role at Google
https://developers.google.com/android/
https://developers.google.com/ios/
https://developers.google.com/web/

My role at Google
My role at Google
My role at Google - https://medium.com/latest-from-google
 The web as of today
The web vs. native
Tools & resources from Google
SLICE
Why do developers need a native app?
Monetization
Future of the web
 The web
as of today
The web as of today
The web as of today
 One billion

active users

The web as of today

Morgan Stanley: the web is winning

The web as of today

The web
vs. native
comScore: 87% of time on mobile spent in apps

Native is winning

The web vs. native

10% of time on mobile spent in the browser

The web vs. native

10% of time on mobile spent in the browser

The web vs. native

 ?
The web vs. native
Messaging, Social > Gaming

The web vs. native

Facebook

One billion daily users,

where 844 million daily

users are on mobile

The web vs. native

…and these also have
more than one billion
users:

The web vs. native

Visitor traffic to top companies/services

The web vs. native

The web vs. native
The web vs. native
 Tools &
measures from
Google
 App install
interstitials being
non-mobile
friendly
App install interstitials being non-mobile friendly
Mobile-Friendly
Test
https://www.google.com/webmasters/tools/mobile-friendly/

Mobile-Friendly Test
Communications
& the web
Communications & the web
https://hangouts.google.com/

Communications & the web

 Desktop:

Microsoft Edge

Google Chrome

Mozilla Firefox

Opera 18

Android:

Google Chrome

Mozilla Firefox

Opera Mobile

Chrome OS

Firefox OS

WebRTC

Communications & the web

Chrome
DevTools
https://developers.google.com/web/tools/chrome-devtools/

Chrome DevTools
 Web
Fundamentals
https://developers.google.com/web/fundamentals/

Web Fundamentals
Chrome Custom
Tabs
https://developer.chrome.com/multidevice/android/customtabs

Chrome Custom Tabs

SLICE
Paul Kinlan
Jake Archibald
Alex Russell
Paul Lewis
Paul Irish
+ many more

Google influencers
Build instantly
engaging sites
and apps
without the need
for a mandatory
app download

The web, moving forward

Secure

SLICE
Linkable

SLICE
Indexable

SLICE
Composable

SLICE
Ephemeral

SLICE
Why do developers
need a native app?
Performance

Offline access

Periodic background processing

Notifications

Sensors

OS-specific features
From Brian Kennan

Why do developers need a native app?

Performance

Offline access
Periodic background processing
Notifications
Sensors

OS-specific features
From Brian Kennan

Why do developers need a native app?

New web features

Initiatives to address this

 Offline access
=>
Service Workers

Service Workers
It's a JavaScript Worker, so it can't access the DOM
directly. Instead responds to postMessages

Service worker is a programmable network proxy

It will be terminated when not in use, and restarted

when it's next needed

Makes extensive use of Promises

Service Workers
HTTPS is Needed

Service Workers
if ('serviceWorker' in navigator) {

navigator.serviceWorker.register('/sw.js').then(function(registration) {

// Registration was successful

console.log('ServiceWorker registration successful with scope: ',
registration.scope);

}).catch(function(err) {

// registration failed :(

console.log('ServiceWorker registration failed: ', err);

});

}

Register and Installing a Service Worker

chrome://inspect/#service-workers

Service Workers
// The files we want to cache

var urlsToCache = [

'/',

'/styles/main.css',

'/script/main.js'

];



// Set the callback for the install step

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

// Perform install steps

});

Installing a Service Worker

Inside our install callback:

1. Open a cache
2. Cache our files
3. Confirm whether all the required
assets are cached or not

Installing a Service Worker

var CACHE_NAME = 'my-site-cache-v1';

var urlsToCache = [

'/',

'/styles/main.css',

'/script/main.js'

];



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

// Perform install steps

event.waitUntil(

caches.open(CACHE_NAME)

.then(function(cache) {

console.log('Opened cache');

return cache.addAll(urlsToCache);

})

);

});

Install callback
self.addEventListener('fetch', function(event) {

event.respondWith(

caches.match(event.request)

.then(function(response) {

// Cache hit - return response

if (response) {

return response;

}



return fetch(event.request);

}

)

);

});

Caching and Returning Requests

Updating a Service Worker
1. Update your service worker JavaScript file.
2. Your new service worker will be started and the
install event will be fired.
3. New Service Worker will enter a "waiting" state
4. When open pages are closed, the old Service
Worker will be killed - new service worker will take
control.
5. Once new Service Worker takes control, its
activate event will be fired.

Updating a Service Worker

Periodic background processing
=>
BackgroundSync
https://slightlyoff.github.io/BackgroundSync/spec/

Web Background Synchronization

 Notifications
=>
Push notifications
Push notifications
// Are Notifications supported in the service worker? 

if (!('showNotification' in ServiceWorkerRegistration.prototype)) { 

console.warn('Notifications aren\'t supported.'); 

return; 

}

Push notifications
// Check the current Notification permission. 

// If its denied, it's a permanent block until the 

// user changes the permission 

if (Notification.permission === 'denied') { 

console.warn('The user has blocked notifications.'); 

return; 

}

Push notifications
// Check if push messaging is supported 

if (!('PushManager' in window)) { 

console.warn('Push messaging isn\'t supported.'); 

return; 

}

Push notifications
// We need the service worker registration to check for a subscription 

navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) { 

// Do we already have a push message subscription? 

serviceWorkerRegistration.pushManager.getSubscription() 

.then(function(subscription) { 

// Enable any UI which subscribes / unsubscribes from 

// push messages. 

var pushButton = document.querySelector('.js-push-button'); 

pushButton.disabled = false;



if (!subscription) { 

// We aren't subscribed to push, so set UI 

// to allow the user to enable push 

return; 

}



// Keep your server in sync with the latest subscriptionId

sendSubscriptionToServer(subscription);



// Set your UI to show they have subscribed for 

// push messages 

pushButton.textContent = 'Disable Push Messages'; 

isPushEnabled = true; 

}) 

.catch(function(err) { 

console.warn('Error during getSubscription()', err); 

}); 

});
Push notifications
{ 

"name": "Push Demo", 

"short_name": "Push Demo", 

"icons": [{ 

"src": "images/icon-192x192.png", 

"sizes": "192x192",

"type": "image/png" 

}], 

"start_url": "/index.html?homescreen=1", 

"display": "standalone"

}

<link rel="manifest" href="manifest.json">

Push notifications
 Add to
Homescreen
CacheApp
management
Install Banners
& whitelists
You have a web app manifest file

You have a service worker registered on

your site. We recommend a simple custom
offline page service worker

Your site is served over HTTPS (you need a

service worker after all)

The user has visited your site twice over

two separate days during the course of two
weeks.

App Install Banners prerequisites

All this leads to
progressive
apps
These apps aren’t packaged and deployed
through stores, they’re just websites that took all
the right vitamins.

They keep the web’s ask-when-you-need-it

permission model and add in new capabilities
like being top-level in your task switcher, on your
home screen, and in your notification tray

- Alex Russell

Progressive Apps
Monetization
Future of the web
 WAWKI
-
Web as We Know It

Future of the web

Why the web?

Future of the web

Native platforms needs to be
matched and surpassed

Future of the web

Getting people back to using URLs,
sharing things online and making it
accessible across all platforms

Future of the web

Go simple

Future of the web

 Go simple

Right now the onboarding process for a (front-

end) web developer is much harder than it
was before

Future of the web

 Go simple

We've gone from HTML, CSS and JavaScript

to incredibly complex solutions, build scripts &
workflows

Future of the web

Spread the word about
what the web can do

Future of the web

 Longevity of the web

Where stuff being built will still

work 10 years down the line

Future of the web

Future of the web
Robert Nyman
robertnyman.com

nyman@google.com

Google

@robertnyman