Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What's New in Chrome and the Web

What's New in Chrome and the Web

32c638e7a3a466d182705fb4370cbb2e?s=128

Arnelle Balane

July 20, 2019
Tweet

More Decks by Arnelle Balane

Other Decks in Programming

Transcript

  1. What’s New in Chrome and the Web 2019 I/O Extended

    Cebu Arnelle Balane Software Developer, Newlogic @arnellebalane
  2. Load images only when they are about to scroll into

    view. Native Lazy Loading
  3. The "loading" attribute Allows browsers do defer loading offscreen images

    and iframes until the user scrolls near them. Supports three possible values: auto, lazy, and eager.
  4. <img src="image.webp" /> <img src="image.webp" loading="auto" /> <img src="image.webp" loading="lazy"

    /> <img src="image.webp" loading="eager" /> The browser decides whether to lazy load or not. In Chrome, this doesn’t lazy load… yet.
  5. <img src="image.webp" /> <img src="image.webp" loading="auto" /> <img src="image.webp" loading="lazy"

    /> <img src="image.webp" loading="eager" /> Explicitly tells the browser to lazy load the image.
  6. <img src="image.webp" /> <img src="image.webp" loading="auto" /> <img src="image.webp" loading="lazy"

    /> <img src="image.webp" loading="eager" /> Explicitly tells the browser to load the image right away.
  7. <img data-src="image.webp" loading="lazy" /> Progressive Enhancement

  8. if ('loading' in HTMLImageElement.prototype) { const images = document.querySelectorAll('img[data-src]'); images.forEach(image

    => { image.src = image.dataset.src; }); }
  9. if ('loading' in HTMLImageElement.prototype) { const images = document.querySelectorAll('img[data-src]'); images.forEach(image

    => { image.src = image.dataset.src; }); }
  10. if ('loading' in HTMLImageElement.prototype) { const images = document.querySelectorAll('img[data-src]'); images.forEach(image

    => { image.src = image.dataset.src; }); }
  11. if ('loading' in HTMLImageElement.prototype) { const images = document.querySelectorAll('img[data-src]'); images.forEach(image

    => { image.src = image.dataset.src; }); }
  12. if ('loading' in HTMLImageElement.prototype) { const images = document.querySelectorAll('img[data-src]'); images.forEach(image

    => { image.src = image.dataset.src; }); } else { // Fallback to using a lazy loading library, // e.g. lazysizes }
  13. Works with responsive images (<picture> element, srcset attribute) Doesn’t support

    background images. Native Lazy Loading
  14. Behind a flag in Chrome 75 chrome://flags #enable-lazy-image-loading #enable-lazy-frame-loading Native

    Lazy Loading
  15. Resources https://github.com/scott-little/lazyload https://addyosmani.com/blog/lazy-loading https://www.chromestatus.com/feature/5645767347798016 Native Lazy Loading

  16. Seamless navigation with page transitions across your sites. Portals

  17. Single page apps can offer nice transitions between page navigations.

    Multi-page apps end up with blank screens when navigating between pages.
  18. Enables a page to embed another page inside it, and

    perform a seamless transition between these pages. Portals
  19. <!-- site-one.com --> <portal id="myPortal" src="https://site-two.com/"> </portal> The <portal> element

  20. <!-- site-one.com --> <portal id="myPortal" src="https://site-two.com/"> </portal> The <portal> element

  21. // site-two.com if (window.portalHost) { // Customize UI for //

    portal display } Detect if inside a portal
  22. // site-one.com myPortal.addEventListener('click', () => { // Animate the portal,

    etc. portal.activate(); }); Perform navigation
  23. // site-two.com window.addEventListener('portalactivate', () => { // Reset page UI

    to full site, etc. }); Perform navigation
  24. None
  25. Can use postMessage() to communicate between host and embedded page.

    Possible to get a reference of the host page as a <portal> element. Portals
  26. if ('HTMLPortalElement' in window) { // Yay, <portal> is supported!

    } Feature Detection
  27. Behind a flag in Chrome 75 chrome://flags #enable-portals Portals

  28. Resources https://web.dev/hands-on-portals https://github.com/WICG/portals https://wicg.github.io/portals/ Portals

  29. JavaScript standard library for the Web. Built-in Modules

  30. Browsers have shipped <script type="module"> and nomodule attribute. We provide

    the definitions for the modules, and they need to be downloaded to be used.
  31. Like regular JavaScript modules, but already ship with the browser

    and so don’t need to be downloaded. Need to be used inside <script type="module">. Built-in Modules
  32. Asynchronous key-value store, having JavaScript Map-like API: set(), get(), delete().

    Keys and values don’t have to be strings, unlike LocalStorage. KV Storage
  33. import { storage } from 'std:kv-storage'; KV Storage

  34. import { storage } from 'std:kv-storage'; await storage.set('user', {name: 'arnelle'});

    await storage.get('user'); await storage.delete('user'); KV Storage
  35. Stored in an IndexedDB database. KV Storage

  36. import { StorageArea } from 'std:kv-storage'; Custom Storage

  37. import { StorageArea } from 'std:kv-storage'; const customStorage = new

    StorageArea('custom'); // customStorage.set(), etc. Custom Storage
  38. What about the browsers that don’t support built-in modules yet?

  39. Import Maps Provides a mechanism to tell the browser how

    to resolve import statements.
  40. <script type="importmap"> // We'll get back to this later! </script>

    Import Maps
  41. <script type="importmap"> // We'll get back to this later! </script>

    <script type="module"> import { storage } from '/path/to/polyfill.js'; </script> Import Maps
  42. <script type="importmap"> { "imports": { "/path/to/polyfill.js": [ "std:kv-storage", "/path/to/polyfill.js" ]

    } } </script>
  43. <script type="importmap"> { "imports": { "/path/to/polyfill.js": [ "std:kv-storage", "/path/to/polyfill.js" ]

    } } </script>
  44. <script type="importmap"> { "imports": { "/path/to/polyfill.js": [ "std:kv-storage", "/path/to/polyfill.js" ]

    } } </script>
  45. <script type="importmap"> { "imports": { "/path/to/polyfill.js": [ "std:kv-storage", "/path/to/polyfill.js" ]

    } } </script>
  46. Built-in Modules, KV Storage, and Import Maps Behind a flag

    in Chrome 74 chrome://flags #enable-experimental-web-platform-features
  47. Origin Trial is active until September 4, 2019 https://developers.chrome.com/origintrials /#/register_trial/3175037737296199681

    Built-in Modules, KV Storage, and Import Maps
  48. Resources https://developers.google.com/web/updates /2019/03/kv-storage Built-in Modules, KV Storage, and Import Maps

  49. New Media Queries Allows authors to query values or features

    of the device that’s rendering the page.
  50. Brings users’ “reduced motion” preferences to the Web. Possible values:

    no-preference and reduce prefers-reduced-motion
  51. prefers-reduced-motion Use case: When user prefers reduced motion, remove non-essential

    animations and transitions, parallax scrolling, etc.
  52. @media (prefers-reduced-motion: reduce) { button { transition: none; } }

    prefers-reduced-motion
  53. @media (prefers-reduced-motion: no-preference) { button { transition: transform 300ms ease;

    } } prefers-reduced-motion
  54. <link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)" > Separate CSS File

  55. prefers-color-scheme Detect if the user prefers to use a light

    or dark color theme. Possible values: no-preference, light, and dark
  56. @media (prefers-color-scheme: light) { body { background-color: white; } }

    Light mode
  57. @media (prefers-color-scheme: dark) { body { background-color: black; } }

    Dark mode
  58. Respecting user preference is key. More are coming: prefers-reduced-transparency, prefers-contrast,

    and inverted-colors New Media Queries
  59. prefers-reduced-motion Enabled by default in Chrome 74 prefers-color-scheme Enabled by

    default in Chrome 76 New Media Queries
  60. Resources https://developers.google.com/web/updates /2019/03/prefers-reduced-motion https://web.dev/prefers-color-scheme New Media Queries

  61. None
  62. The Web is now 30 years old!

  63. Complex, dynamic, interactive Web applications ✨ Simple, static Web pages

  64. Web apps that look, feel, and behave like native apps.

  65. Web apps that look, feel, and behave like native apps.

    Are they as capable?
  66. Web apps still lag behind native apps in terms of

    capabilities.
  67. Project Fugu

  68. Closing the capability gap between native and Web, while preserving

    everything that’s great with the Web. New standardized APIs that will unlock powerful capabilities for the Web. Project Fugu
  69. Share to and receive shares through the system share sheet.

    Web Share and Web Share Target
  70. if ('share' in navigator) { const shareOptions = { title:

    'What is New in Chrome and the Web', text: 'Cool stuff cool stuff cool stuff!', url: 'https://iox.gdgcebu.org/' }; await navigator.share(shareOptions); }
  71. if ('share' in navigator) { const shareOptions = { title:

    'What is New in Chrome and the Web', text: 'Cool stuff cool stuff cool stuff!', url: 'https://iox.gdgcebu.org/' }; await navigator.share(shareOptions); }
  72. if ('share' in navigator) { const shareOptions = { title:

    'What is New in Chrome and the Web', text: 'Cool stuff cool stuff cool stuff!', url: 'https://iox.gdgcebu.org/' }; await navigator.share(shareOptions); }
  73. if ('share' in navigator) { const shareOptions = { title:

    'What is New in Chrome and the Web', text: 'Cool stuff cool stuff cool stuff!', url: 'https://iox.gdgcebu.org/' }; await navigator.share(shareOptions); }
  74. if ('share' in navigator) { const shareOptions = { title:

    'What is New in Chrome and the Web', text: 'Cool stuff cool stuff cool stuff!', url: 'https://iox.gdgcebu.org/' }; await navigator.share(shareOptions); } else { // Fallback to traditional share implementations. }
  75. None
  76. // manifest.webmanifest { "share_target": { "action": "/share/", "method": "GET", "enctype":

    "application/x-www-form-urlencoded", "params": { "title": "title", "text": "text", "url": "url" } } }
  77. // manifest.webmanifest { "share_target": { "action": "/share/", "method": "GET", "enctype":

    "application/x-www-form-urlencoded", "params": { "title": "title", "text": "text", "url": "url" } } }
  78. const shareOptions = { files: [file] }; if (navigator.canShare(shareOptions)) {

    } Sharing files
  79. const shareOptions = { files: [file] }; if (navigator.canShare(shareOptions)) {

    } Sharing files
  80. const shareOptions = { files: [file] }; if (navigator.canShare(shareOptions)) {

    shareOptions.title = 'What is New in Chrome?'; shareOptions.text = 'Cool stuff cool stuff!'; shareOptions.url = 'https://iox.gdgcebu.org/'; await navigator.share(shareOptions); }
  81. Title, text, and URL Enabled by default in Chrome 61

    With files support Enabled by default in Chrome 75 Web Share API
  82. Resources https://wicg.github.io/web-share/level-2/ https://developers.google.com/web/updates /2016/09/navigator-share https://github.com/WICG/web-share/blob/master /docs/explainer.md Web Share API

  83. Title, text, and URL Enabled by default in Chrome 71

    With files support Enabled by default in Chrome 76 Web Share Target API
  84. Resources https://wicg.github.io/web-share-target/ https://github.com/WICG/web-share-target /blob/master/docs/explainer.md https://developers.google.com/web/updates /2018/12/web-share-target Web Share Target API

  85. Programmatic access to the system clipboard. Async Clipboard API

  86. if ('clipboard' in navigator) { await navigator.clipboard.writeText('Hello World'); const text

    = await navigator.clipboard.readText(); } Text support
  87. await navigator.clipboard.write([ new ClipboardItem({'image/png': blob}) ]); Image support

  88. canvas.toBlob(async blob => { await navigator.clipboard.write([ new ClipboardItem({'image/png': blob}) ]);

    }); Image support
  89. const items = await navigator.clipboard.read(); items.forEach(item => { item.types.forEach(async type

    => { const theItem = await item.getType(type)); }); }); Image support
  90. Text-only Enabled by default in Chrome 66 With image support

    Enabled by default in Chrome 76 Async Clipboard API
  91. Resources https://w3c.github.io/clipboard-apis/ https://developers.google.com/web/updates /2018/03/clipboardapi Async Clipboard API

  92. Set subtle app alerts in places like the home screen,

    dock, etc. Badging API
  93. window.Badge.set(12); window.Badge.clear(); Badging API

  94. None
  95. None
  96. Behind a flag in Chrome 73 chrome://flags #enable-experimental-web-platform-features Badging API

  97. Badging API Origin Trial is active until October 15, 2019

    https://developers.chrome.com/origintrials /#/view_trial/3175037737296199681
  98. Resources https://github.com/WICG/badging/blob/master/explainer.md https://developers.google.com/web/updates /2018/12/badging-api Badging API

  99. Prevent the screen from turning off or the device from

    going to sleep. Wake Lock API
  100. if ('getWakeLock' in navigator) { const wakeLock = await navigator.getWakeLock('screen');

    } Get a wake lock
  101. if ('getWakeLock' in navigator) { const wakeLock = await navigator.getWakeLock('screen');

    } Get a wake lock
  102. if ('getWakeLock' in navigator) { const wakeLock = await navigator.getWakeLock('system');

    } Get a wake lock
  103. let wakeLockRequest = wakeLock.createRequest(); Activate a wake lock

  104. wakeLockRequest.cancel(); wakeLockRequest = null; Deactivate a wake lock

  105. Behind a flag in Chrome 71 chrome://flags #enable-experimental-web-platform-features Wake Lock

    API
  106. Resources https://w3c.github.io/wake-lock/ https://developers.google.com/web/updates /2018/12/wakelock Wake Lock API

  107. Detect faces, text, and barcodes / QR codes from images.

    Shape Detection API
  108. None
  109. Behind a flag in Chrome 57 chrome://flags #enable-experimental-web-platform-features Shape Detection

    API
  110. Resources https://wicg.github.io/shape-detection-api/ https://github.com/WICG/shape-detection-api/ Shape Detection API

  111. Communicate with nearby Bluetooth Low Energy (BLE) devices. Web Bluetooth

    API
  112. Enabled by default in Chrome 56 Resources https://webbluetoothcg.github.io/web-bluetooth/ https://developers.google.com/web/updates /2015/07/interact-with-ble-devices-on-the-web

    Web Bluetooth API
  113. Communicate with microcontrollers and other serial devices. Web Serial API

  114. Create experiences that involve files from the local file system.

    Native File System API
  115. Simplify use of locally installed fonts that are only available

    on the desktop. Font Access API
  116. Provide Web apps with contact info from the contacts list.

    Contact Picker API
  117. Be notified when SMS messages (following a format convention) are

    delivered to the device. SMS Receiver API
  118. Show notifications based on triggers, e.g. time-based, location-based, etc. Notification

    Triggers
  119. Project Fugu

  120. Try them out! Participate in Origin Trials Share your thoughts,

    provide feedback What can we do?
  121. Thank you! 2019 I/O Extended Cebu Arnelle Balane Software Developer,

    Newlogic @arnellebalane