Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

19,035 views

Published on

A talk about the web at a GDS (Google Developer Summit) in Istanbul, Turkey

Published in: Technology

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

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

×