Web APIs you (probably) didn't know existed

E190023b66e2b8aa73a842b106920c93?s=47 Zeno Rocha
August 19, 2016

Web APIs you (probably) didn't know existed

Video: https://www.youtube.com/watch?v=NCGLPp778JY

You’ve probably heard about the amazing things that HTML5 can do. Maybe you already saved some data using Local Storage, fetched user coordinates using Geolocation, or even drew graphs and other objects using Canvas. But did you know there are many more new JavaScript APIs in the Web Platform? In this talk, we’ll see how to leverage the power of those APIs in order to create better experiences for your users.

E190023b66e2b8aa73a842b106920c93?s=128

Zeno Rocha

August 19, 2016
Tweet

Transcript

  1. web apis you didn’t know existed probably @zenorocha

  2. 2008

  3. 2008

  4. 2009

  5. 2009

  6. 2010

  7. 2010

  8. 2011

  9. 2011

  10. 2012

  11. 2012

  12. 2013

  13. 2013

  14. 2014

  15. 2014

  16. None
  17. canvas svg geolocation local storage web sockets audio video drag

    & drop web rtc
  18. page visibility

  19. Provides an API to ask whether the current page is

    visible or not. page visibility
  20. window.addEventListener('visibilitychange', () => { if (document.hidden) { console.log('Tab is hidden');

    } else { console.log('Tab is focused'); } }); page visibility
  21. None
  22. window.addEventListener('visibilitychange', () => { switch(document.visibilityState) { case 'prerender': console.log('Tab is

    pre-rendering'); break; case 'hidden': console.log('Tab is hidden'); break; case 'visible': console.log('Tab is focused'); break; } });
  23. caniuse.com/#feat=pagevisibility BROWSER support

  24. where to use it?

  25. None
  26. state online

  27. Exposes a network connection availability information to the web. online

    state
  28. console.log(navigator.onLine ? 'online' : 'offline') online state

  29. window.addEventListener('offline', networkStatus); window.addEventListener('online', networkStatus); function networkStatus(e) { console.log(e.type); } online

    state
  30. caniuse.com/#feat=online-status BROWSER support

  31. None
  32. where to use it?

  33. None
  34. VIBRATION

  35. Provides access to a form of tactile feedback. vibration

  36. // Vibrate for 1 second navigator.vibrate(1000); // Vibrate with a

    pattern navigator.vibrate([400, 300, 300, 200, 500]); // Turn off vibration navigator.vibrate(0); VIBRATION vibrate wait vibrate wait vibrate
  37. // Super Mario navigator.vibrate([125,75,125,275,200,275,125,75,125,27 5,200,600,200,600]); // Star Wars navigator.vibrate([500,110,500,110,450,110,200,110,170, 40,450,110,200,110,170,40,500]);

    // Go Go Power Rangers navigator.vibrate([150,150,150,150,75,75,150,150,150,15 0,450]); VIBRATION https://goo.gl/bX4ZQv
  38. caniuse.com/#feat=vibration BROWSER support

  39. where to use it?

  40. None
  41. None
  42. DEVICE orientation

  43. Provides access to device's physical orientation. device orientation

  44. device orientation window.addEventListener('deviceorientation', (e) => { console.log(‘Gamma:’, e.gamma); console.log(‘Beta:’, e.beta);

    console.log(‘Alpha:’, e.alpha); });
  45. device orientation let logo = document.querySelector(‘img'); window.addEventListener('deviceorientation', (e) => {

    let tiltLR = e.gamma; let tiltFB = e.beta; logo.style.transform = `rotate(${tiltLR}deg) rotate3d(1,0,0, ${tiltFB * -1}deg)`; });
  46. None
  47. caniuse.com/#feat=deviceorientation BROWSER support

  48. where to use it?

  49. None
  50. clipboard copy & paste

  51. Standard APIs for interacting with the clipboard (copy/cut/paste). clipboard

  52. None
  53. // 1. User interaction is required let button = document.querySelector('button');

    button.addEventListener('click', () => { select(); copy(); }); clipboard
  54. // 2. Programmatically select an element function select() { let

    input = document.querySelector('input'); input.focus(); input.setSelectionRange(0, input.value.length); } clipboard
  55. // 3. Copy selected element text function copy() { try

    { document.execCommand('copy'); } catch (err) { console.error(err); } } clipboard
  56. document.addEventListener('copy', (e) => { console.log(e.target.value); }); document.addEventListener('cut', (e) => {

    console.log(e.target.value); }); document.addEventListener('paste', (e) => { console.log(e.clipboardData.getData('text/plain')); }); clipboard
  57. None
  58. None
  59. caniuse.com/#feat=clipboard BROWSER support

  60. where to use it?

  61. None
  62. None
  63. light ambient

  64. Exposes sensor data that captures the light intensity. ambient light

  65. window.addEventListener('devicelight', (e) => { console.log(`${e.value} lux`); }); ambient light

  66. None
  67. None
  68. let sensor = new AmbientLightSensor(); sensor.start(); sensor.onchange = (e) =>

    { console.log(e.reading.illuminance); }; sensor.stop(); ambient light sensor
  69. BROWSER caniuse.com/#feat=ambient-light support

  70. where to use it?

  71. None
  72. None
  73. STATUS battery

  74. Allows a web page to access battery information from desktop

    and mobile devices. battery status
  75. navigator.getBattery().then((battery) => { console.log(`${battery.level * 100}%`); battery.addEventListener('levelchange', () => {

    console.log(`${this.level * 100}%`); }); }); battery status
  76. caniuse.com/#feat=battery-status BROWSER support

  77. where to use it?

  78. None
  79. None
  80. web components templates custom elements shadow dom html imports

  81. progressive web apps service workers push notifications offline support app

    manifest background sync
  82. WEB assembly

  83. WebAssembly, or wasm, is a low-level programming language for the

    client-side. web assembly
  84. under developm ent BROWSER support

  85. None
  86. WEBVR

  87. Experimental API that provides access to Virtual Reality devices, such

    as the Oculus Rift or Google Cardboard. web VR
  88. BROWSER support chromestatus.com/features#webvr

  89. None
  90. gamepad

  91. Gives access to a game controller via USB. gamepad

  92. window.addEventListener('gamepadconnected', () => { let gp = navigator.getGamepads()[0]; console.log(‘ID:’, gp.id);

    console.log(‘Axes:’, gp.axes.length); console.log(‘Buttons:’, gp.buttons.length); }); gamepad
  93. window.addEventListener('gamepadconnected', gameLoop); function gameLoop() { let gp = navigator.getGamepads()[0]; if

    (gp.buttons[0].pressed) { console.log('X'); } requestAnimationFrame(gameLoop); } game loop
  94. None
  95. caniuse.com/#feat=gamepad BROWSER support

  96. None
  97. None
  98. thank you @zenorocha so much