New Web Platform APIs

New Web Platform APIs

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

32c638e7a3a466d182705fb4370cbb2e?s=128

Arnelle Balane

November 18, 2017
Tweet

Transcript

  1. None
  2. None
  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' } };
  7. None
  8. None
  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); };
  12. None
  13. None
  14. None
  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. • •

  17. None
  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);
  21. None
  22. navigator.credentials.get({ password: true, federated: { providers: ['https://accounts.google.com'] } })

  23. None
  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. • •

  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  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. None
  41. None
  42. const observer = new ResizeObserver(entries => { // Run when

    observed elements' size changes });
  43. 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);
  44. const elementOne = document.querySelector('#element-one'); const observer = new ResizeObserver(entries =>

    { // Run when observed elements' size changes }); // Stop observing an element observer.unobserve(elementOne);
  45. const elementOne = document.querySelector('#element-one'); const observer = new ResizeObserver(entries =>

    { // Run when observed elements' size changes }); // Stop observing all elements observer.disconnect();
  46. None
  47. ⚐ Experimental Web Platform Features • • • • ResizeObserver

  48. None
  49. ლ ಠ益ಠლ

  50. ლ ಠ益ಠლ ヾ ⌐▪ ▪ ノ♪

  51. 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' } ] });
  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' } ] }); navigator.mediaSession.metadata = metadata;
  53. const mediaSession = navigator.mediaSession; mediaSession.setActionHandler('play', () => { ... });

    mediaSession.setActionHandler('pause', () => { ... }); mediaSession.setActionHandler('seekbackward', () => { ... }); mediaSession.setActionHandler('seekforward', () => { ... }); mediaSession.setActionHandler('previoustrack', () => { ... }); mediaSession.setActionHandler('nexttrack', () => { ... });
  54. ⚐ Experimental Web Platform Features

  55. None
  56. • • • • • • •

  57. const sensor = new LinearAccelerationSensor({ frequency: 50 // Hz, or

    readings per second });
  58. const sensor = new LinearAccelerationSensor({ frequency: 50 // Hz, or

    readings per second }); sensor.onreading = (e) => { // e.target.x // e.target.y // e.target.z };
  59. 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);
  60. const sensor = new LinearAccelerationSensor({ ... }); sensor.onreading = (e)

    => { ... }; sensor.onerror = (e) => { ... }; // Start reporting sensor readings sensor.start();
  61. const sensor = new LinearAccelerationSensor({ ... }); sensor.onreading = (e)

    => { ... }; sensor.onerror = (e) => { ... }; // Stop reporting sensor readings sensor.stop();
  62. ⚐ Experimental Web Platform Features ⚐ Generic Sensor ⚐ Generic

    Sensor Extra Classes
  63. None
  64. const detector = new FaceDetector();

  65. const detector = new FaceDetector(); detector.detect(imageSource);

  66. const detector = new FaceDetector(); detector.detect(imageSource).then(faces => { // [

    { // boundingBox: { // top: 100, // left: 100, // width: 100, // height: 100, // ... // }, // landmarks: [ ... ] // } ] });
  67. const detector = new TextDetector(); detector.detect(imageSource).then(texts => { // [

    { // boundingBox: { ... }, // rawValue: 'hello world' // } ] });
  68. 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 }, // ] // } ] });
  69. None
  70. ⚐ Experimental Web Platform Features

  71. None
  72. navigator.bluetooth.requestDevice({ filters: [ { services: ['battery_service'] } ] })

  73. navigator.bluetooth.requestDevice({ filters: [ { services: ['battery_service'] } ] }) .then(device

    => device.gatt.connect())
  74. navigator.bluetooth.requestDevice({ filters: [ { services: ['battery_service'] } ] }) .then(device

    => device.gatt.connect()) .then(server => server.getPrimaryService('battery_service'))
  75. navigator.bluetooth.requestDevice({ filters: [ { services: ['battery_service'] } ] }) .then(device

    => device.gatt.connect()) .then(server => server.getPrimaryService('battery_service')) .then(service => service.getCharacteristic('battery_level'))
  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')) .then(characteristic => characteristic.readValue()) .then(value => console.log(value));
  77. ⚐ Experimental Web Platform Features

  78. • • • ▾

  79. None
  80. ☞゚∀゚ ☞

  81. None
  82. None