Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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/...
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?
Monetizati...
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 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
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 Edge

Google Chrome

Mozilla Firefox

Opera 18

Android:

Google Chrom...
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 ne...
Performance

Sensors

OS-specific features
Offline access
Periodic background processing
Notifications
Why do developers need ...
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 progra...
HTTPS is Needed
Service Workers
Register and Installing a Service Worker
if ('serviceWorker' in navigator) {

navigator.serviceWorker.register('/sw.js').t...
chrome://inspect/#service-workers
Service Workers
// The files we want to cache

var urlsToCache = [

'/',

'/styles/main.css',

'/script/main.js'

];



// Set the callbac...
Inside our install callback:
1. Open a cache
2. Cache our files
3. Confirm whether all the required
assets are cached or not...
Install callback
var CACHE_NAME = 'my-site-cache-v1';

var urlsToCache = [

'/',

'/styles/main.css',

'/script/main.js'

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

event.respondWith(

caches.match(event.request)

.then(function(response...
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 fire...
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)) ...
// Check the current Notification permission. 

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

// user changes the p...
// Check if push messaging is supported 

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

console.warn('Push messaging isn't supported...
// We need the service worker registration to check for a subscription 

navigator.serviceWorker.ready.then(function(servi...
{ 

"name": "Push Demo", 

"short_name": "Push Demo", 

"icons": [{ 

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

"sizes": "192x19...
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 re...
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 vit...
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 b...
Future of the web
Go simple
We've gone from HTML, CSS and JavaScript
to incredibly complex solutions, build scripts &
work...
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 Nyman
robertnyman.com

nyman@google.com

Google
@robertnyman
Prochain SlideShare
Chargement dans…5
×

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

23 667 vues

Publié le

Keynote from the FOWA conference in London Oct 6-7 2015

Publié dans : Internet, Technologie
  • Sex in your area is here: www.bit.ly/sexinarea
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Unlock Her Legs - How to Turn a Girl On In 10 Minutes or Less... ➤➤ http://scamcb.com/unlockher/pdf
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Dating for everyone is here: www.bit.ly/2AJerkH
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Simple Mindset Hack Gives You A Limitless "Millionaire Brain" ◆◆◆ http://ishbv.com/manifestd1/pdf
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • My special guest's 3-Step "No Product Funnel" can be duplicated to start earning a significant income online. ♣♣♣ https://bit.ly/2kS5a5J
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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

  1. The Web - What it Has, What it Lacks 
 and Where it Must Go @robertnyman
  2. Our line of work
  3. Face recognition
  4. Experience
  5. Trends
  6. My role at Google
  7. My role at Google https://developers.google.com/android/ https://developers.google.com/ios/ https://developers.google.com/web/
  8. My role at Google
  9. My role at Google - https://medium.com/latest-from-google
  10. 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
  11. The web as of today
  12. The web as of today
  13. The web as of today
  14. The web as of today One billion active users
  15. The web as of today Morgan Stanley: the web is winning
  16. The web vs. native
  17. The web vs. native comScore: 87% of time on mobile spent in apps Native is winning
  18. The web vs. native 10% of time on mobile spent in the browser
  19. The web vs. native 10% of time on mobile spent in the browser
  20. The web vs. native ?
  21. The web vs. native Messaging, Social > Gaming
  22. The web vs. native Facebook One billion daily users, where 844 million daily users are on mobile
  23. The web vs. native …and these also have more than one billion users:
  24. The web vs. native Visitor traffic to top companies/services
  25. The web vs. native
  26. The web vs. native
  27. Tools & measures from Google
  28. App install interstitials being non-mobile friendly
  29. App install interstitials being non-mobile friendly
  30. Mobile-Friendly Test
  31. Mobile-Friendly Test https://www.google.com/webmasters/tools/mobile-friendly/
  32. Communications & the web
  33. Communications & the web
  34. Communications & the web https://hangouts.google.com/
  35. Communications & the web WebRTC Desktop: Microsoft Edge Google Chrome Mozilla Firefox Opera 18 Android: Google Chrome Mozilla Firefox Opera Mobile Chrome OS Firefox OS
  36. Chrome DevTools
  37. Chrome DevTools https://developers.google.com/web/tools/chrome-devtools/
  38. Web Fundamentals
  39. Web Fundamentals https://developers.google.com/web/fundamentals/
  40. Chrome Custom Tabs
  41. Chrome Custom Tabs https://developer.chrome.com/multidevice/android/customtabs
  42. SLICE
  43. Google influencers Paul Kinlan Jake Archibald Alex Russell Paul Lewis Paul Irish + many more
  44. The web, moving forward Build instantly engaging sites and apps without the need for a mandatory app download
  45. SLICE Secure
  46. SLICE Linkable
  47. SLICE Indexable
  48. SLICE Composable
  49. SLICE Ephemeral
  50. Why do developers need a native app?
  51. Performance Sensors OS-specific features Offline access Periodic background processing Notifications Why do developers need a native app? From Brian Kennan
  52. Performance Sensors OS-specific features Offline access Periodic background processing Notifications Why do developers need a native app? From Brian Kennan
  53. Initiatives to address this New web features
  54. Offline access => Service Workers Service Workers
  55. 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
  56. HTTPS is Needed Service Workers
  57. 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);
 });
 }
  58. chrome://inspect/#service-workers Service Workers
  59. // 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
  60. 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
  61. 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);
 })
 );
 });
  62. 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
  63. Updating a Service Worker
  64. 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
  65. Periodic background processing => BackgroundSync
  66. Web Background Synchronization https://slightlyoff.github.io/BackgroundSync/spec/
  67. Notifications => Push notifications
  68. Push notifications
  69. // Are Notifications supported in the service worker? 
 if (!('showNotification' in ServiceWorkerRegistration.prototype)) { 
 console.warn('Notifications aren't supported.'); 
 return; 
 } Push notifications
  70. // 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
  71. // Check if push messaging is supported 
 if (!('PushManager' in window)) { 
 console.warn('Push messaging isn't supported.'); 
 return; 
 } Push notifications
  72. // 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
  73. { 
 "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
  74. Add to Homescreen
  75. Cache management & whitelistsApp Install Banners
  76. 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.
  77. All this leads to progressive apps
  78. 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
  79. Monetization
  80. Future of the web
  81. Future of the web WAWKI - Web as We Know It
  82. Future of the web Why the web?
  83. Future of the web Native platforms needs to be matched and surpassed
  84. Future of the web Getting people back to using URLs, sharing things online and making it accessible across all platforms
  85. Future of the web Go simple
  86. Future of the web Go simple Right now the onboarding process for a (front- end) web developer is much harder than it was before
  87. Future of the web Go simple We've gone from HTML, CSS and JavaScript to incredibly complex solutions, build scripts & workflows
  88. Future of the web Spread the word about what the web can do
  89. Future of the web Longevity of the web Where stuff being built will still work 10 years down the line
  90. Future of the web
  91. Robert Nyman robertnyman.com nyman@google.com Google @robertnyman

×