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

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. 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.
  3. <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.
  4. <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.
  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 load the image right away.
  6. 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 }
  7. Single page apps can offer nice transitions between page navigations.

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

    perform a seamless transition between these pages. Portals
  9. // site-two.com if (window.portalHost) { // Customize UI for //

    portal display } Detect if inside a portal
  10. Can use postMessage() to communicate between host and embedded page.

    Possible to get a reference of the host page as a <portal> element. Portals
  11. 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.
  12. 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
  13. 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
  14. import { storage } from 'std:kv-storage'; await storage.set('user', {name: 'arnelle'});

    await storage.get('user'); await storage.delete('user'); KV Storage
  15. import { StorageArea } from 'std:kv-storage'; const customStorage = new

    StorageArea('custom'); // customStorage.set(), etc. Custom Storage
  16. <script type="importmap"> // We'll get back to this later! </script>

    <script type="module"> import { storage } from '/path/to/polyfill.js'; </script> Import Maps
  17. Built-in Modules, KV Storage, and Import Maps Behind a flag

    in Chrome 74 chrome://flags #enable-experimental-web-platform-features
  18. New Media Queries Allows authors to query values or features

    of the device that’s rendering the page.
  19. prefers-color-scheme Detect if the user prefers to use a light

    or dark color theme. Possible values: no-preference, light, and dark
  20. 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
  21. 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); }
  22. 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); }
  23. 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); }
  24. 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); }
  25. 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. }
  26. // manifest.webmanifest { "share_target": { "action": "/share/", "method": "GET", "enctype":

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

    "application/x-www-form-urlencoded", "params": { "title": "title", "text": "text", "url": "url" } } }
  28. 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); }
  29. Title, text, and URL Enabled by default in Chrome 61

    With files support Enabled by default in Chrome 75 Web Share API
  30. Title, text, and URL Enabled by default in Chrome 71

    With files support Enabled by default in Chrome 76 Web Share Target API
  31. const items = await navigator.clipboard.read(); items.forEach(item => { item.types.forEach(async type

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

    Enabled by default in Chrome 76 Async Clipboard API
  33. Badging API Origin Trial is active until October 15, 2019

    https://developers.chrome.com/origintrials /#/view_trial/3175037737296199681
  34. Be notified when SMS messages (following a format convention) are

    delivered to the device. SMS Receiver API