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
220
Fishes With Terrestrial-Animal Names
arnellebalane
0
150
Making the Web more capable with Project Fugu
arnellebalane
0
110
Frontend Web Development in 2021+
arnellebalane
0
160
Extending CSS using Houdini
arnellebalane
0
110
Other Decks in Programming
See All in Programming
AIともっと楽するE2Eテスト
myohei
9
3.1k
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
800
iOS開発スターターキットの作り方
akidon0000
0
190
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
120
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
190
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
980
20250708_JAWS_opscdk
takuyay0ne
2
150
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
560
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
330
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
150
リッチエディターを安全に開発・運用するために
unachang113
1
250
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
250
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Embracing the Ebb and Flow
colly
86
4.8k
Music & Morning Musume
bryan
46
6.7k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
A designer walks into a library…
pauljervisheath
207
24k
Documentation Writing (for coders)
carmenintech
72
4.9k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Faster Mobile Websites
deanohume
308
31k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Designing Experiences People Love
moore
142
24k
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: 'arnellebalane@gmail.com' // } });
•
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