New Web Platform APIs

A look at new (stable + experimental) Web platform APIs that we can already use nowadays.

Transcript

3. postMessage() “message”
4. // Create a broadcast channel const channel = new BroadcastChannel('channel-name');
5. // Create a broadcast channel const channel = new BroadcastChannel('channel-name'); // Broadcast data channel.postMessage({ title: 'New Web Platform APIs' });
6. // 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' } };
9. navigator.connection;
10. navigator.connection; // network information: { downlink: 1.15, downlinkMax: Infinity, effectiveType: '4g', rtt: 300, type: 'ethernet' }
11. // Listen for network connection changes navigator.connection.onchange = (e) => { console.log('Network type changed to ' + e.target.type); };
15. 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.'));
16. • •
18. const credential = new PasswordCredential({ id: form.email.value, name: form.name.value, password: form.password.value });
19. // Google Signin const profile = user.getBasicProfile(); const credential = new FederatedCredential({ id: profile.getEmail(), name: profile.getName(), iconURL: profile.getImageUrl(), provider: 'https://accounts.google.com' });
20. // 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);
22. navigator.credentials.get({ password: true, federated: { providers: ['https://accounts.google.com'] } })
24. navigator.credentials.get({ password: true, federated: { providers: ['https://accounts.google.com'] } }) .then(credential => { });
25. navigator.credentials.get({ password: true, federated: { providers: ['https://accounts.google.com'] } }) .then(credential => { if (credential.type === 'password') { signInWithPassword(credential); } });
26. 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); } });
27. • •
34. const methodData = { supportedMethods: 'basic-card', data: { supportedNetworks: ['visa', 'mastercard'] } };
35. 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' } } };
36. const methodData = { ... }; const details = { ... }; const options = { requestPayerName: true, requestPayerEmail: true };
37. const methodData = { ... }; const details = { ... }; const options = { ... }; const request = new PaymentRequest( methodData, details, options );
38. const request = new PaymentRequest(...); request.show();
39. 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' // } });
40. •
43. const observer = new ResizeObserver(entries => { // Run when observed elements' size changes });
44. 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);
45. const elementOne = document.querySelector('#element-one'); const observer = new ResizeObserver(entries => { // Run when observed elements' size changes }); // Stop observing an element observer.unobserve(elementOne);
46. const elementOne = document.querySelector('#element-one'); const observer = new ResizeObserver(entries => { // Run when observed elements' size changes }); // Stop observing all elements observer.disconnect();
48. ⚐ Experimental Web Platform Features • • • • ResizeObserver
50. ლ ಠ益ಠლ
51. ლ ಠ益ಠლ ヾ ⌐▪ ▪ ノ♪
52. 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' } ] });
53. 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;
54. const mediaSession = navigator.mediaSession; mediaSession.setActionHandler('play', () => { ... }); mediaSession.setActionHandler('pause', () => { ... }); mediaSession.setActionHandler('seekbackward', () => { ... }); mediaSession.setActionHandler('seekforward', () => { ... }); mediaSession.setActionHandler('previoustrack', () => { ... }); mediaSession.setActionHandler('nexttrack', () => { ... });
55. ⚐ Experimental Web Platform Features
57. • • • • • • •
58. const sensor = new LinearAccelerationSensor({ frequency: 50 // Hz, or readings per second });
59. const sensor = new LinearAccelerationSensor({ frequency: 50 // Hz, or readings per second }); sensor.onreading = (e) => { // e.target.x // e.target.y // e.target.z };
60. 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);
61. const sensor = new LinearAccelerationSensor({ ... }); sensor.onreading = (e) => { ... }; sensor.onerror = (e) => { ... }; // Start reporting sensor readings sensor.start();
62. const sensor = new LinearAccelerationSensor({ ... }); sensor.onreading = (e) => { ... }; sensor.onerror = (e) => { ... }; // Stop reporting sensor readings sensor.stop();
63. ⚐ Experimental Web Platform Features ⚐ Generic Sensor ⚐ Generic Sensor Extra Classes
65. const detector = new FaceDetector();
66. const detector = new FaceDetector(); detector.detect(imageSource);
67. const detector = new FaceDetector(); detector.detect(imageSource).then(faces => { // [ { // boundingBox: { // top: 100, // left: 100, // width: 100, // height: 100, // ... // }, // landmarks: [ ... ] // } ] });
68. const detector = new TextDetector(); detector.detect(imageSource).then(texts => { // [ { // boundingBox: { ... }, // rawValue: 'hello world' // } ] });
69. 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 }, // ] // } ] });
71. ⚐ Experimental Web Platform Features
73. navigator.bluetooth.requestDevice({ filters: [ { services: ['battery_service'] } ] })
74. navigator.bluetooth.requestDevice({ filters: [ { services: ['battery_service'] } ] }) .then(device => device.gatt.connect())
75. navigator.bluetooth.requestDevice({ filters: [ { services: ['battery_service'] } ] }) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('battery_service'))
76. navigator.bluetooth.requestDevice({ filters: [ { services: ['battery_service'] } ] }) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('battery_service')) .then(service => service.getCharacteristic('battery_level'))
77. 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));
78. ⚐ Experimental Web Platform Features
79. • • • ▾
81. ☞ﾟ∀ﾟ ☞