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
110
Let's build a video streaming app using Web technologies
arnellebalane
0
130
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
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
170
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
880
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
390
Create a website using Spatial Web
akkeylab
0
310
RailsGirls IZUMO スポンサーLT
16bitidol
0
130
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
150
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
840
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
Benchmark
sysong
0
280
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.7k
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Designing for Performance
lara
609
69k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
Bash Introduction
62gerente
614
210k
Being A Developer After 40
akosma
90
590k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Designing for humans not robots
tammielis
253
25k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Producing Creativity
orderedlist
PRO
346
40k
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