Web APIs for 2018
Tim Roes
JavaScript Engineer @ Elastic
@tim_roes / tim.roes@elastic.co / www.timroes.de
Tim Roes
WebShare API
navigator.share({
title: 'e.g. page title',
text: 'Some text to share',
url: 'https://www.timroes.de'
})
.then(() => {
// User selected some share method
})
.catch(() => {
// User canceled the share menu
});
Web Share
nothing
WebShare Target API
{
"name": "Twitter",
"short_name": "Twitter",
"icons": [...],
"share_target": {
"url_template": "share?title={title}&text={text}&url={url}"
}
}
Web Share Target
nothing
nothing
nothing
Web Bluetooth
GATT
Service 'heart_beat'
0x000fff0-...-0123
Characteristic 'heart_rate_measurement'
Characteristic 'body_sensor_location'
Descriptor
Descriptor
Characteristic '0xfff00-...-1234'
Characteristic '0x12340-...-1231'
Descriptor
Descriptor
http://bit.ly/2lfpqwB
Demo
https://git.io/v9OvC
www.castillo.io/blog/muse-web-bluetooth
Web Bluetooth
WebUSB API
USB Hardware
WebUSB Descriptor
Landing Page URL
Allowed Origins
Capabilities
Interface
Endpoint 1
Endpoint 2
Demo
https://git.io/v9Ovg
WebUSB
nothing
nothing
Payment Request
zł
zł
zł
const methodData = [
{
supportedMethods: 'basic-card',
data: {
supportedNetworks: ['visa', 'mastercard'],
supportedTypes: ['debit', 'credit', 'prepaid']
}
}
];
const details = {
displayItems: [
{
label: 'Fabulous unicorn',
amount: { currency: 'EUR', value: '13.00' }
},
{
label: 'Replacement horn',
amount: { currency: 'EUR', value: '0.37' }
}
],
total: {
label: 'Total',
amount: { currency: 'EUR', value: '13.37' }
}
};
new PaymentRequest(methodData, details).show()
.then((response) => {
sendToBuyApi(repsonse.details).then((error) => {
if (error) {
response.complete('error');
} else {
response.complete('success');
}
});
});
Demo
https://git.io/v9Ova
More complete example:�https://emerald-eon.appspot.com/
PaymentRequest
WebNFC API
navigator.nfc.watch((message) => {
for (let record of message.records) {
console.log(`type: ${record.recordType}
mediaType: ${record.mediaType}
data: ${record.data}`);
}
});
navigator.nfc.push({
records: [
{ recordType: 'url', data: 'https://www.timroes.de' }
]
});
No Demo :'-(
WebNFC
public support (?)
nothing
Web VR
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -4" width="4" height="4" color="#7BC8A4" shadow></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
A-Frame (aframe.io)
Resize Observer
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
const { target, contentRect } = entry;
// ...
}
});
observer.observe(document.getElementById('watch-me'));
observer.observe(document.getElementById('another-watch'));
observer.unobserve(document.getElementById('watch-me'));
ResizeObserver API
nothing
jpchase/OriginTrials
<meta http-equiv="origin-trial" content="Agefdr6eHq..."
data-feature="Web USB" data-expires="2017-07-25" >
Currently Available Origin Trials
Web VR (API changes) Chrome 62+ Until February 27, 2018
Generic Sensors Chrome 63+ Until February 27, 2018
Media Capabilities Chrome 64+ Until January 15, 2018
Web APIs for 2018
Tim Roes
@tim_roes / tim.roes@elastic.co
www.elastic.co / www.timroes.de
We are looking for people - everywhere! http://grnh.se/wa50mr1