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


The Presentation inside:

Slide 0

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


Slide 1

Our line of work


Slide 2

Face recognition


Slide 3

Experience


Slide 4

Trends


Slide 5

My role at Google


Slide 6

https://developers.google.com/android/ https://developers.google.com/ios/ https://developers.google.com/web/ My role at Google


Slide 7

My role at Google


Slide 8

My role at Google - https://medium.com/latest-from-google


Slide 9

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


Slide 10

The web as of today


Slide 11

The web as of today


Slide 12

The web as of today


Slide 13

One billion active users The web as of today


Slide 14

Morgan Stanley: the web is winning The web as of today


Slide 15

The web vs. native


Slide 16

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


Slide 17

10% of time on mobile spent in the browser The web vs. native


Slide 18

10% of time on mobile spent in the browser The web vs. native


Slide 19

? The web vs. native


Slide 20

Messaging, Social > Gaming The web vs. native


Slide 21

Facebook One billion daily users, where 844 million daily users are on mobile The web vs. native


Slide 22

…and these also have more than one billion users: The web vs. native


Slide 23

Visitor traffic to top companies/services The web vs. native


Slide 24

The web vs. native


Slide 25

The web vs. native


Slide 26

Tools & measures from Google


Slide 27

App install interstitials being non-mobile friendly


Slide 28

App install interstitials being non-mobile friendly


Slide 29

Mobile-Friendly Test


Slide 30

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


Slide 31

Communications & the web


Slide 32

Communications & the web


Slide 33

https://hangouts.google.com/ Communications & the web


Slide 34

Desktop: Microsoft Edge Google Chrome Mozilla Firefox Opera 18 Android: Google Chrome Mozilla Firefox Opera Mobile Chrome OS Firefox OS WebRTC Communications & the web


Slide 35

Chrome DevTools


Slide 36

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


Slide 37

Web Fundamentals


Slide 38

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


Slide 39

Chrome Custom Tabs


Slide 40

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


Slide 41

SLICE


Slide 42

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


Slide 43

Build instantly engaging sites and apps without the need for a mandatory app download The web, moving forward


Slide 44

Secure SLICE


Slide 45

Linkable SLICE


Slide 46

Indexable SLICE


Slide 47

Composable SLICE


Slide 48

Ephemeral SLICE


Slide 49

Why do developers need a native app?


Slide 50

Performance Offline access Periodic background processing Notifications Sensors OS-specific features From Brian Kennan Why do developers need a native app?


Slide 51

Performance Offline access Periodic background processing Notifications Sensors OS-specific features From Brian Kennan Why do developers need a native app?


Slide 52

New web features Initiatives to address this


Slide 53

Offline access => Service Workers Service Workers


Slide 54

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


Slide 55

HTTPS is Needed Service Workers


Slide 56

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


Slide 57

chrome://inspect/#service-workers Service Workers


Slide 58

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


Slide 59

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


Slide 60

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


Slide 61

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


Slide 62

Updating a Service Worker


Slide 63

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


Slide 64

Periodic background processing => BackgroundSync


Slide 65

https://slightlyoff.github.io/BackgroundSync/spec/ Web Background Synchronization


Slide 66

Notifications => Push notifications


Slide 67

Push notifications


Slide 68

// Are Notifications supported in the service worker? 
 if (!('showNotification' in ServiceWorkerRegistration.prototype)) { console.warn('Notifications aren\'t supported.'); 
 return; 
 } Push notifications 



Slide 69

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



Slide 70

// Check if push messaging is supported 
 if (!('PushManager' in window)) { 
 console.warn('Push messaging isn\'t supported.'); return; 
 } Push notifications 



Slide 71

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



Slide 72

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


Slide 73

Add to Homescreen


Slide 74

CacheApp Install Banners management & whitelists


Slide 75

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


Slide 76

All this leads to progressive apps


Slide 77

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


Slide 78

Monetization


Slide 79

Future of the web


Slide 80

WAWKI Web as We Know It Future of the web


Slide 81

Why the web? Future of the web


Slide 82

Native platforms needs to be matched and surpassed Future of the web


Slide 83

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


Slide 84

Go simple Future of the web


Slide 85

Go simple Right now the onboarding process for a (frontend) web developer is much harder than it was before Future of the web


Slide 86

Go simple We've gone from HTML, CSS and JavaScript to incredibly complex solutions, build scripts & workflows Future of the web


Slide 87

Spread the word about what the web can do Future of the web


Slide 88

Longevity of the web Where stuff being built will still work 10 years down the line Future of the web


Slide 89

Future of the web


Slide 90

Robert Nyman robertnyman.com [email protected] Google @robertnyman


Slide 91


×

HTML:





Ссылка: