Slide 1
Slide 1 text
What’s New in Chrome
and the Web
2019
I/O Extended Cebu
Arnelle Balane
Software Developer, Newlogic @arnellebalane
Slide 2
Slide 2 text
Load images only when they
are about to scroll into view.
Native
Lazy Loading
Slide 3
Slide 3 text
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.
Slide 4
Slide 4 text
The browser decides whether to lazy load or not.
In Chrome, this doesn’t lazy load… yet.
Slide 5
Slide 5 text
Explicitly tells the browser to lazy load the image.
Slide 6
Slide 6 text
Explicitly tells the browser to load the image right away.
Slide 7
Slide 7 text
Slide 8
Slide 8 text
if ('loading' in HTMLImageElement.prototype) {
const images =
document.querySelectorAll('img[data-src]');
images.forEach(image => {
image.src = image.dataset.src;
});
}
Slide 9
Slide 9 text
if ('loading' in HTMLImageElement.prototype) {
const images =
document.querySelectorAll('img[data-src]');
images.forEach(image => {
image.src = image.dataset.src;
});
}
Slide 10
Slide 10 text
if ('loading' in HTMLImageElement.prototype) {
const images =
document.querySelectorAll('img[data-src]');
images.forEach(image => {
image.src = image.dataset.src;
});
}
Slide 11
Slide 11 text
if ('loading' in HTMLImageElement.prototype) {
const images =
document.querySelectorAll('img[data-src]');
images.forEach(image => {
image.src = image.dataset.src;
});
}
Slide 12
Slide 12 text
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
}
Slide 13
Slide 13 text
Works with responsive images
( element, srcset attribute)
Doesn’t support background images.
Native Lazy Loading
Slide 14
Slide 14 text
Behind a flag in Chrome 75
chrome://flags
#enable-lazy-image-loading
#enable-lazy-frame-loading
Native Lazy Loading
Slide 15
Slide 15 text
Resources
https://github.com/scott-little/lazyload
https://addyosmani.com/blog/lazy-loading
https://www.chromestatus.com/feature/5645767347798016
Native Lazy Loading
Slide 16
Slide 16 text
Seamless navigation with
page transitions across your
sites.
Portals
Slide 17
Slide 17 text
Single page apps can offer nice transitions between
page navigations.
Multi-page apps end up with blank screens when
navigating between pages.
Slide 18
Slide 18 text
Enables a page to embed another page inside it, and
perform a seamless transition between these pages.
Portals
Slide 19
Slide 19 text
The element
Slide 20
Slide 20 text
The element
Slide 21
Slide 21 text
// site-two.com
if (window.portalHost) {
// Customize UI for
// portal display
}
Detect if inside a portal
Slide 22
Slide 22 text
// site-one.com
myPortal.addEventListener('click', () => {
// Animate the portal, etc.
portal.activate();
});
Perform navigation
Slide 23
Slide 23 text
// site-two.com
window.addEventListener('portalactivate', () => {
// Reset page UI to full site, etc.
});
Perform navigation
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Can use postMessage() to communicate between
host and embedded page.
Possible to get a reference of the host page as a
element.
Portals
Slide 26
Slide 26 text
if ('HTMLPortalElement' in window) {
// Yay, is supported!
}
Feature Detection
Slide 27
Slide 27 text
Behind a flag in Chrome 75
chrome://flags
#enable-portals
Portals
Slide 28
Slide 28 text
Resources
https://web.dev/hands-on-portals
https://github.com/WICG/portals
https://wicg.github.io/portals/
Portals
Slide 29
Slide 29 text
JavaScript standard library
for the Web.
Built-in Modules
Slide 30
Slide 30 text
Browsers have shipped and
nomodule attribute.
We provide the definitions for the modules, and they
need to be downloaded to be used.
Slide 31
Slide 31 text
Like regular JavaScript modules, but already ship
with the browser and so don’t need to be
downloaded.
Need to be used inside .
Built-in Modules
Slide 32
Slide 32 text
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
Slide 33
Slide 33 text
import { storage } from 'std:kv-storage';
KV Storage
Slide 34
Slide 34 text
import { storage } from 'std:kv-storage';
await storage.set('user', {name: 'arnelle'});
await storage.get('user');
await storage.delete('user');
KV Storage
Slide 35
Slide 35 text
Stored in an IndexedDB
database.
KV Storage
Slide 36
Slide 36 text
import { StorageArea } from 'std:kv-storage';
Custom Storage
Slide 37
Slide 37 text
import { StorageArea } from 'std:kv-storage';
const customStorage = new StorageArea('custom');
// customStorage.set(), etc.
Custom Storage
Slide 38
Slide 38 text
What about the browsers that don’t
support built-in modules yet?
Slide 39
Slide 39 text
Import Maps
Provides a mechanism to tell the browser how to
resolve import statements.
Slide 40
Slide 40 text
// We'll get back to this later!
Import Maps
Slide 41
Slide 41 text
// We'll get back to this later!
import { storage } from '/path/to/polyfill.js';
Import Maps
Slide 42
Slide 42 text
{
"imports": {
"/path/to/polyfill.js": [
"std:kv-storage",
"/path/to/polyfill.js"
]
}
}
Slide 43
Slide 43 text
{
"imports": {
"/path/to/polyfill.js": [
"std:kv-storage",
"/path/to/polyfill.js"
]
}
}
Slide 44
Slide 44 text
{
"imports": {
"/path/to/polyfill.js": [
"std:kv-storage",
"/path/to/polyfill.js"
]
}
}
Slide 45
Slide 45 text
{
"imports": {
"/path/to/polyfill.js": [
"std:kv-storage",
"/path/to/polyfill.js"
]
}
}
Slide 46
Slide 46 text
Built-in Modules, KV Storage,
and Import Maps
Behind a flag in Chrome 74
chrome://flags
#enable-experimental-web-platform-features
Slide 47
Slide 47 text
Origin Trial is active until September 4, 2019
https://developers.chrome.com/origintrials
/#/register_trial/3175037737296199681
Built-in Modules, KV Storage,
and Import Maps
Slide 48
Slide 48 text
Resources
https://developers.google.com/web/updates
/2019/03/kv-storage
Built-in Modules, KV Storage,
and Import Maps
Slide 49
Slide 49 text
New
Media Queries
Allows authors to query values
or features of the device that’s
rendering the page.
Slide 50
Slide 50 text
Brings users’ “reduced motion”
preferences to the Web.
Possible values:
no-preference and reduce
prefers-reduced-motion
Slide 51
Slide 51 text
prefers-reduced-motion
Use case:
When user prefers reduced motion, remove
non-essential animations and transitions, parallax
scrolling, etc.
Slide 52
Slide 52 text
@media (prefers-reduced-motion: reduce) {
button {
transition: none;
}
}
prefers-reduced-motion
Slide 53
Slide 53 text
@media (prefers-reduced-motion: no-preference) {
button {
transition: transform 300ms ease;
}
}
prefers-reduced-motion
Slide 54
Slide 54 text
Separate CSS File
Slide 55
Slide 55 text
prefers-color-scheme
Detect if the user prefers to use a
light or dark color theme.
Possible values:
no-preference, light, and dark
Slide 56
Slide 56 text
@media (prefers-color-scheme: light) {
body {
background-color: white;
}
}
Light mode
Slide 57
Slide 57 text
@media (prefers-color-scheme: dark) {
body {
background-color: black;
}
}
Dark mode
Slide 58
Slide 58 text
Respecting user preference is key.
More are coming:
prefers-reduced-transparency, prefers-contrast, and
inverted-colors
New Media Queries
Slide 59
Slide 59 text
prefers-reduced-motion
Enabled by default in Chrome 74
prefers-color-scheme
Enabled by default in Chrome 76
New Media Queries
Slide 60
Slide 60 text
Resources
https://developers.google.com/web/updates
/2019/03/prefers-reduced-motion
https://web.dev/prefers-color-scheme
New Media Queries
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
The Web is now 30 years old!
Slide 63
Slide 63 text
Complex, dynamic,
interactive Web
applications
✨
Simple, static
Web pages
Slide 64
Slide 64 text
Web apps that look, feel,
and behave like native apps.
Slide 65
Slide 65 text
Web apps that look, feel, and
behave like native apps.
Are they as capable?
Slide 66
Slide 66 text
Web apps still lag behind native
apps in terms of capabilities.
Slide 67
Slide 67 text
Project Fugu
Slide 68
Slide 68 text
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
Slide 69
Slide 69 text
Share to and receive shares
through the system share
sheet.
Web Share and
Web Share Target
Slide 70
Slide 70 text
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);
}
Slide 71
Slide 71 text
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);
}
Slide 72
Slide 72 text
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);
}
Slide 73
Slide 73 text
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);
}
Slide 74
Slide 74 text
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.
}
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
// manifest.webmanifest
{
"share_target": {
"action": "/share/",
"method": "GET",
"enctype": "application/x-www-form-urlencoded",
"params": {
"title": "title",
"text": "text",
"url": "url"
}
}
}
Slide 77
Slide 77 text
// manifest.webmanifest
{
"share_target": {
"action": "/share/",
"method": "GET",
"enctype": "application/x-www-form-urlencoded",
"params": {
"title": "title",
"text": "text",
"url": "url"
}
}
}
Slide 78
Slide 78 text
const shareOptions = {
files: [file]
};
if (navigator.canShare(shareOptions)) {
}
Sharing files
Slide 79
Slide 79 text
const shareOptions = {
files: [file]
};
if (navigator.canShare(shareOptions)) {
}
Sharing files
Slide 80
Slide 80 text
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);
}
Slide 81
Slide 81 text
Title, text, and URL
Enabled by default in Chrome 61
With files support
Enabled by default in Chrome 75
Web Share API
Slide 82
Slide 82 text
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
Slide 83
Slide 83 text
Title, text, and URL
Enabled by default in Chrome 71
With files support
Enabled by default in Chrome 76
Web Share Target API
Slide 84
Slide 84 text
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
Slide 85
Slide 85 text
Programmatic access to the
system clipboard.
Async
Clipboard API
Slide 86
Slide 86 text
if ('clipboard' in navigator) {
await navigator.clipboard.writeText('Hello World');
const text = await navigator.clipboard.readText();
}
Text support
Slide 87
Slide 87 text
await navigator.clipboard.write([
new ClipboardItem({'image/png': blob})
]);
Image support
Slide 88
Slide 88 text
canvas.toBlob(async blob => {
await navigator.clipboard.write([
new ClipboardItem({'image/png': blob})
]);
});
Image support
Slide 89
Slide 89 text
const items = await navigator.clipboard.read();
items.forEach(item => {
item.types.forEach(async type => {
const theItem = await item.getType(type));
});
});
Image support
Slide 90
Slide 90 text
Text-only
Enabled by default in Chrome 66
With image support
Enabled by default in Chrome 76
Async Clipboard API
Slide 91
Slide 91 text
Resources
https://w3c.github.io/clipboard-apis/
https://developers.google.com/web/updates
/2018/03/clipboardapi
Async Clipboard API
Slide 92
Slide 92 text
Set subtle app alerts in places
like the home screen, dock,
etc.
Badging API
Slide 93
Slide 93 text
window.Badge.set(12);
window.Badge.clear();
Badging API
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
Behind a flag in Chrome 73
chrome://flags
#enable-experimental-web-platform-features
Badging API
Slide 97
Slide 97 text
Badging API
Origin Trial is active until October 15, 2019
https://developers.chrome.com/origintrials
/#/view_trial/3175037737296199681
Slide 98
Slide 98 text
Resources
https://github.com/WICG/badging/blob/master/explainer.md
https://developers.google.com/web/updates
/2018/12/badging-api
Badging API
Slide 99
Slide 99 text
Prevent the screen from
turning off or the device from
going to sleep.
Wake Lock API
Slide 100
Slide 100 text
if ('getWakeLock' in navigator) {
const wakeLock =
await navigator.getWakeLock('screen');
}
Get a wake lock
Slide 101
Slide 101 text
if ('getWakeLock' in navigator) {
const wakeLock =
await navigator.getWakeLock('screen');
}
Get a wake lock
Slide 102
Slide 102 text
if ('getWakeLock' in navigator) {
const wakeLock =
await navigator.getWakeLock('system');
}
Get a wake lock
Slide 103
Slide 103 text
let wakeLockRequest = wakeLock.createRequest();
Activate a wake lock
Slide 104
Slide 104 text
wakeLockRequest.cancel();
wakeLockRequest = null;
Deactivate a wake lock
Slide 105
Slide 105 text
Behind a flag in Chrome 71
chrome://flags
#enable-experimental-web-platform-features
Wake Lock API
Slide 106
Slide 106 text
Resources
https://w3c.github.io/wake-lock/
https://developers.google.com/web/updates
/2018/12/wakelock
Wake Lock API
Slide 107
Slide 107 text
Detect faces, text, and
barcodes / QR codes from
images.
Shape
Detection API
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
Behind a flag in Chrome 57
chrome://flags
#enable-experimental-web-platform-features
Shape Detection API
Slide 110
Slide 110 text
Resources
https://wicg.github.io/shape-detection-api/
https://github.com/WICG/shape-detection-api/
Shape Detection API
Slide 111
Slide 111 text
Communicate with nearby
Bluetooth Low Energy (BLE)
devices.
Web
Bluetooth API
Slide 112
Slide 112 text
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
Slide 113
Slide 113 text
Communicate with
microcontrollers and other
serial devices.
Web Serial API
Slide 114
Slide 114 text
Create experiences that
involve files from the local file
system.
Native
File System API
Slide 115
Slide 115 text
Simplify use of locally installed
fonts that are only available
on the desktop.
Font Access API
Slide 116
Slide 116 text
Provide Web apps with
contact info from the contacts
list.
Contact
Picker API
Slide 117
Slide 117 text
Be notified when SMS
messages (following a format
convention) are delivered to
the device.
SMS Receiver API
Slide 118
Slide 118 text
Show notifications based on
triggers, e.g. time-based,
location-based, etc.
Notification
Triggers
Slide 119
Slide 119 text
Project Fugu
Slide 120
Slide 120 text
Try them out!
Participate in Origin Trials
Share your thoughts, provide feedback
What can we do?
Slide 121
Slide 121 text
Thank you!
2019
I/O Extended Cebu
Arnelle Balane
Software Developer, Newlogic @arnellebalane