Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
New Web Platform APIs
Search
Arnelle Balane
November 18, 2017
Programming
1
1.5k
New Web Platform APIs
A look at new (stable + experimental) Web platform APIs that we can already use nowadays.
Arnelle Balane
November 18, 2017
Tweet
Share
More Decks by Arnelle Balane
See All by Arnelle Balane
Introduction to building Chrome Extensions
arnellebalane
0
110
Color Palettes Of The Most Colorful Birds
arnellebalane
0
120
Let's build a video streaming app using Web technologies
arnellebalane
0
140
Let's build a video calling app with Web technologies and Firebase!
arnellebalane
0
140
Ridiculous Scientific Names
arnellebalane
0
230
Fishes With Terrestrial-Animal Names
arnellebalane
0
150
Making the Web more capable with Project Fugu
arnellebalane
0
120
Frontend Web Development in 2021+
arnellebalane
0
170
Extending CSS using Houdini
arnellebalane
0
110
Other Decks in Programming
See All in Programming
楽して成果を出すためのセルフリソース管理
clipnote
0
190
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
300
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
230
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
130
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
390
Testing Trophyは叫ばない
toms74209200
0
900
Updates on MLS on Ruby (and maybe more)
sylph01
1
190
rage against annotate_predecessor
junk0612
0
170
はじめてのMaterial3 Expressive
ym223
2
940
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
550
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
250
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Music & Morning Musume
bryan
46
6.8k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Unsuck your backbone
ammeep
671
58k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Raft: Consensus for Rubyists
vanstee
140
7.1k
For a Future-Friendly Web
brad_frost
180
9.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
RailsConf 2023
tenderlove
30
1.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Become a Pro
speakerdeck
PRO
29
5.5k
Transcript
None
None
postMessage() “message”
// Create a broadcast channel const channel = new BroadcastChannel('channel-name');
// Create a broadcast channel const channel = new BroadcastChannel('channel-name');
// Broadcast data channel.postMessage({ title: 'New Web Platform APIs' });
// Create a broadcast channel const channel = new BroadcastChannel('channel-name');
// Broadcast data channel.postMessage({ title: 'New Web Platform APIs' }); // Receive data (in another context) channel.onmessage = (e) => { // e.data == { title: 'New Web Platform APIs' } };
None
None
navigator.connection;
navigator.connection; // network information: { downlink: 1.15, downlinkMax: Infinity, effectiveType:
'4g', rtt: 300, type: 'ethernet' }
// Listen for network connection changes navigator.connection.onchange = (e) =>
{ console.log('Network type changed to ' + e.target.type); };
None
None
None
navigator.share({ title: 'New Web Platform APIs', text: 'Check out this
Web Share API demo!', url: 'https://arnellebalane.com/web-share-api' }) .then(() => console.log('Share successful.')) .catch((error) => console.error('Share failed.'));
• •
None
const credential = new PasswordCredential({ id: form.email.value, name: form.name.value, password:
form.password.value });
// Google Signin const profile = user.getBasicProfile(); const credential =
new FederatedCredential({ id: profile.getEmail(), name: profile.getName(), iconURL: profile.getImageUrl(), provider: 'https://accounts.google.com' });
// Google Signin const profile = user.getBasicProfile(); const credential =
new FederatedCredential({ id: profile.getEmail(), name: profile.getName(), iconURL: profile.getImageUrl(), provider: 'https://accounts.google.com' }); navigator.credentials.store(credential);
None
navigator.credentials.get({ password: true, federated: { providers: ['https://accounts.google.com'] } })
None
navigator.credentials.get({ password: true, federated: { providers: ['https://accounts.google.com'] } }) .then(credential
=> { });
navigator.credentials.get({ password: true, federated: { providers: ['https://accounts.google.com'] } }) .then(credential
=> { if (credential.type === 'password') { signInWithPassword(credential); } });
navigator.credentials.get({ password: true, federated: { providers: ['https://accounts.google.com'] } }) .then(credential
=> { if (credential.type === 'password') { signInWithPassword(credential); } else if (credential.type === 'federated') { signInWithGoogle(credential); } });
• •
None
None
None
None
None
None
const methodData = { supportedMethods: 'basic-card', data: { supportedNetworks: ['visa',
'mastercard'] } };
const methodData = { ... }; const details = {
displayItems: [ { label: 'GDG DevFest Cebu 2017 Ticket', amount: { currency: 'USD', value: '10.00' } } ], total: { label: 'Total', amount: { currency: 'USD', value: '10.00' } } };
const methodData = { ... }; const details = {
... }; const options = { requestPayerName: true, requestPayerEmail: true };
const methodData = { ... }; const details = {
... }; const options = { ... }; const request = new PaymentRequest( methodData, details, options );
const request = new PaymentRequest(...); request.show();
const request = new PaymentRequest(...); request.show().then(response => { // {
// details: { // cardNumber: '0000 0000 0000 0000', // cardSecurityCode: '000', // ... // }, // methodName: 'mastercard', // payerName: 'Arnelle Balane', // payerEmail: '
[email protected]
' // } });
•
None
None
const observer = new ResizeObserver(entries => { // Run when
observed elements' size changes });
const elementOne = document.querySelector('#element-one'); const observer = new ResizeObserver(entries =>
{ // Run when observed elements' size changes }); // Observe changes in element’s size observer.observe(elementOne);
const elementOne = document.querySelector('#element-one'); const observer = new ResizeObserver(entries =>
{ // Run when observed elements' size changes }); // Stop observing an element observer.unobserve(elementOne);
const elementOne = document.querySelector('#element-one'); const observer = new ResizeObserver(entries =>
{ // Run when observed elements' size changes }); // Stop observing all elements observer.disconnect();
None
⚐ Experimental Web Platform Features • • • • ResizeObserver
None
ლ ಠ益ಠლ
ლ ಠ益ಠლ ヾ ⌐▪ ▪ ノ♪
const metadata = new MediaMetadata({ title: 'Song Title', artist: 'Artist
Name', album: 'The Ultimate Album', artwork: [ { src: 'images/artwork-192.png', sizes: '192x192', type: 'image/png' } ] });
const metadata = new MediaMetadata({ title: 'Song Title', artist: 'Artist
Name', album: 'The Ultimate Album', artwork: [ { src: 'images/artwork-192.png', sizes: '192x192', type: 'image/png' } ] }); navigator.mediaSession.metadata = metadata;
const mediaSession = navigator.mediaSession; mediaSession.setActionHandler('play', () => { ... });
mediaSession.setActionHandler('pause', () => { ... }); mediaSession.setActionHandler('seekbackward', () => { ... }); mediaSession.setActionHandler('seekforward', () => { ... }); mediaSession.setActionHandler('previoustrack', () => { ... }); mediaSession.setActionHandler('nexttrack', () => { ... });
⚐ Experimental Web Platform Features
None
• • • • • • •
const sensor = new LinearAccelerationSensor({ frequency: 50 // Hz, or
readings per second });
const sensor = new LinearAccelerationSensor({ frequency: 50 // Hz, or
readings per second }); sensor.onreading = (e) => { // e.target.x // e.target.y // e.target.z };
const sensor = new LinearAccelerationSensor({ frequency: 50 // Hz, or
readings per second }); sensor.onreading = (e) => { // e.target.x // e.target.y // e.target.z }; sensor.onerror = (e) => handleError(e);
const sensor = new LinearAccelerationSensor({ ... }); sensor.onreading = (e)
=> { ... }; sensor.onerror = (e) => { ... }; // Start reporting sensor readings sensor.start();
const sensor = new LinearAccelerationSensor({ ... }); sensor.onreading = (e)
=> { ... }; sensor.onerror = (e) => { ... }; // Stop reporting sensor readings sensor.stop();
⚐ Experimental Web Platform Features ⚐ Generic Sensor ⚐ Generic
Sensor Extra Classes
None
const detector = new FaceDetector();
const detector = new FaceDetector(); detector.detect(imageSource);
const detector = new FaceDetector(); detector.detect(imageSource).then(faces => { // [
{ // boundingBox: { // top: 100, // left: 100, // width: 100, // height: 100, // ... // }, // landmarks: [ ... ] // } ] });
const detector = new TextDetector(); detector.detect(imageSource).then(texts => { // [
{ // boundingBox: { ... }, // rawValue: 'hello world' // } ] });
const detector = new BarcodeDetector(); detector.detect(imageSource).then(barcodes => { // [
{ // boundingBox: { ... }, // rawValue: 'https://arnellebalane.com/', // cornerPoints: [ // { x: 0, y: 0 }, // { x: 100, y: 0 }, // { x: 100, y: 100 }, // { x: 0, y: 100 }, // ] // } ] });
None
⚐ Experimental Web Platform Features
None
navigator.bluetooth.requestDevice({ filters: [ { services: ['battery_service'] } ] })
navigator.bluetooth.requestDevice({ filters: [ { services: ['battery_service'] } ] }) .then(device
=> device.gatt.connect())
navigator.bluetooth.requestDevice({ filters: [ { services: ['battery_service'] } ] }) .then(device
=> device.gatt.connect()) .then(server => server.getPrimaryService('battery_service'))
navigator.bluetooth.requestDevice({ filters: [ { services: ['battery_service'] } ] }) .then(device
=> device.gatt.connect()) .then(server => server.getPrimaryService('battery_service')) .then(service => service.getCharacteristic('battery_level'))
navigator.bluetooth.requestDevice({ filters: [ { services: ['battery_service'] } ] }) .then(device
=> device.gatt.connect()) .then(server => server.getPrimaryService('battery_service')) .then(service => service.getCharacteristic('battery_level')) .then(characteristic => characteristic.readValue()) .then(value => console.log(value));
⚐ Experimental Web Platform Features
• • • ▾
None
☞゚∀゚ ☞
None
None