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.4k
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
47
Color Palettes Of The Most Colorful Birds
arnellebalane
0
74
Let's build a video streaming app using Web technologies
arnellebalane
0
86
Let's build a video calling app with Web technologies and Firebase!
arnellebalane
0
99
Ridiculous Scientific Names
arnellebalane
0
120
Fishes With Terrestrial-Animal Names
arnellebalane
0
120
Making the Web more capable with Project Fugu
arnellebalane
0
78
Frontend Web Development in 2021+
arnellebalane
0
130
Extending CSS using Houdini
arnellebalane
0
68
Other Decks in Programming
See All in Programming
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
Site Reliability Engineering for GMO
pyama86
8
1k
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
150
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
140
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
740
2 週間で Twitter Bot を作ってみた
contour_gara
0
390
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.3k
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
250
Goのエラースタックトレースの歴史と今後
sonatard
9
1.5k
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
Featured
See All Featured
Being A Developer After 40
akosma
57
580k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Happy Clients
brianwarren
92
6.4k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Scaling GitHub
holman
457
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Design by the Numbers
sachag
274
18k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Statistics for Hackers
jakevdp
789
220k
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