'

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

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

Our line of work


Слайд 2

Face recognition


Слайд 3

Experience


Слайд 4

Trends


Слайд 5

My role at Google


Слайд 6

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


Слайд 7

My role at Google


Слайд 8

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


Слайд 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


Слайд 10

The web as of today


Слайд 11

The web as of today


Слайд 12

The web as of today


Слайд 13

One billion active users The web as of today


Слайд 14

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


Слайд 15

The web vs. native


Слайд 16

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


Слайд 17

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


Слайд 18

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


Слайд 19

? The web vs. native


Слайд 20

Messaging, Social > Gaming The web vs. native


Слайд 21

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


Слайд 22

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


Слайд 23

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


Слайд 24

The web vs. native


Слайд 25

The web vs. native


Слайд 26

Tools & measures from Google


Слайд 27

App install interstitials being non-mobile friendly


Слайд 28

App install interstitials being non-mobile friendly


Слайд 29

Mobile-Friendly Test


Слайд 30

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


Слайд 31

Communications & the web


Слайд 32

Communications & the web


Слайд 33

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


Слайд 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


Слайд 35

Chrome DevTools


Слайд 36

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


Слайд 37

Web Fundamentals


Слайд 38

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


Слайд 39

Chrome Custom Tabs


Слайд 40

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


Слайд 41

SLICE


Слайд 42

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


Слайд 43

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


Слайд 44

Secure SLICE


Слайд 45

Linkable SLICE


Слайд 46

Indexable SLICE


Слайд 47

Composable SLICE


Слайд 48

Ephemeral SLICE


Слайд 49

Why do developers need a native app?


Слайд 50

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


Слайд 51

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


Слайд 52

New web features Initiatives to address this


Слайд 53

Offline access => Service Workers Service Workers


Слайд 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


Слайд 55

HTTPS is Needed Service Workers


Слайд 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


Слайд 57

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


Слайд 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


Слайд 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


Слайд 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


Слайд 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


Слайд 62

Updating a Service Worker


Слайд 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


Слайд 64

Periodic background processing => BackgroundSync


Слайд 65

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


Слайд 66

Notifications => Push notifications


Слайд 67

Push notifications


Слайд 68

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



Слайд 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 



Слайд 70

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



Слайд 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 
 



Слайд 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


Слайд 73

Add to Homescreen


Слайд 74

CacheApp Install Banners management & whitelists


Слайд 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


Слайд 76

All this leads to progressive apps


Слайд 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


Слайд 78

Monetization


Слайд 79

Future of the web


Слайд 80

WAWKI Web as We Know It Future of the web


Слайд 81

Why the web? Future of the web


Слайд 82

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


Слайд 83

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


Слайд 84

Go simple Future of the web


Слайд 85

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


Слайд 86

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


Слайд 87

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


Слайд 88

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


Слайд 89

Future of the web


Слайд 90

Robert Nyman robertnyman.com nyman@google.com Google @robertnyman


Слайд 91


×

HTML:





Ссылка: