What's New in Chrome and the Web

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
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
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. }
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
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
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