New Web Platform APIs

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

41. None
42. None

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();
47. None

48. ⚐ Experimental Web Platform Features • • • • ResizeObserver

49. None

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

56. None

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
64. None

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 }, // ] // } ] });
70. None

71. ⚐ Experimental Web Platform Features

72. None

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. • • • ▾

80. None

81. ☞ﾟ∀ﾟ ☞

82. None
83. None