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
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
OSS開発者という働き方
andpad
5
1.6k
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
230
コンテキストエンジニアリング Cursor編
kinopeee
1
750
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
320
RDoc meets YARD
okuramasafumi
4
160
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
19
4.6k
個人軟體時代
ethanhuang13
0
300
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
140
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
410
速いWebフレームワークを作る
yusukebe
5
1.6k
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
We Have a Design System, Now What?
morganepeng
53
7.8k
A Tale of Four Properties
chriscoyier
160
23k
A better future with KSS
kneath
239
17k
Bash Introduction
62gerente
615
210k
Gamification - CAS2011
davidbonilla
81
5.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6.1k
Optimizing for Happiness
mojombo
379
70k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
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