The web - What it has, what it lacks and where it must go

The Web - What it Has, What it Lacks and Where it Must Go @robertnyman

Our line of work

Face recognition

Experience

Trends

My role at Google

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

The web as of today

One billion active users

The web as of today

Morgan Stanley: the web is winning

The web vs. native

The web vs. native

comScore: 87% of time on mobile spent in appsNative 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

Tools & measures from

Google

App install interstitials being

non-mobile friendly

App install interstitials being non-mobile friendly

Mobile-Friendly Test

Mobile-Friendly Test

https://www.google.com/webmasters/tools/mobile-friendly/

Communications & the web

Communications & the web

Communications & the web

https://hangouts.google.com/

Communications & the web

WebRTC

Desktop:Microsoft EdgeGoogle ChromeMozilla FirefoxOpera 18

Android:Google ChromeMozilla FirefoxOpera Mobile

Chrome OSFirefox OS

Chrome DevTools

Chrome DevTools

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

Web Fundamentals

Web Fundamentals

https://developers.google.com/web/fundamentals/

Chrome Custom Tabs

Chrome Custom Tabs

https://developer.chrome.com/multidevice/android/customtabs

SLICE

Google influencers

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

The web, moving forward

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

SLICE

Secure

SLICE

Linkable

SLICE

Indexable

SLICE

Composable

SLICE

Ephemeral

Why do developers need a native app?

Performance

Sensors

OS-specific features

Offline access

Periodic background processing

Notifications

Why do developers need a native app?

From Brian Kennan

Performance

Sensors

OS-specific features

Offline access

Periodic background processing

Notifications

Why do developers need a native app?

From Brian Kennan

Initiatives to address this

New web features

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

Register and Installing a Service Worker

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

chrome://inspect/#service-workers

Service Workers

// The files we want to cachevar urlsToCache = [ '/', '/styles/main.css', '/script/main.js']; // Set the callback for the install stepself.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

Install callback

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

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

Web Background Synchronization

https://slightlyoff.github.io/BackgroundSync/spec/

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

Cache management & whitelistsApp Install Banners

App Install Banners prerequisites

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.

All this leads to progressive

apps

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

Monetization

Future of the web

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

Robert [email protected]

@robertnyman