Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web APIs que você (provavelmente) não sabia que existiam

Zeno Rocha
August 06, 2016

Web APIs que você (provavelmente) não sabia que existiam

Zeno Rocha

August 06, 2016
Tweet

More Decks by Zeno Rocha

Other Decks in Technology

Transcript

  1. não sabia
    que existiam
    web apis
    que você
    provavelmente
    @zenorocha

    View Slide

  2. 2008

    View Slide

  3. 2008

    View Slide

  4. 2009

    View Slide

  5. 2009

    View Slide

  6. 2010

    View Slide

  7. 2010

    View Slide

  8. 2011

    View Slide

  9. 2011

    View Slide

  10. 2012

    View Slide

  11. 2012

    View Slide

  12. 2013

    View Slide

  13. 2013

    View Slide

  14. 2014

    View Slide

  15. 2014

    View Slide

  16. View Slide

  17. canvas
    svg
    geolocation
    local
    storage
    web
    sockets
    audio
    video
    drag &
    drop
    web rtc

    View Slide

  18. page
    visibility

    View Slide

  19. Provê uma API que checa
    se a aba atual está visível
    ou não no navegador.
    page visibility

    View Slide

  20. window.addEventListener('visibilitychange', () => {
    if (document.hidden) {
    console.log('Tab is hidden');
    }
    else {
    console.log('Tab is focused');
    }
    });
    page visibility

    View Slide

  21. View Slide

  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;
    }
    });

    View Slide

  23. caniuse.com/#feat=pagevisibility
    BROWSER
    support

    View Slide

  24. onde
    usar?

    View Slide

  25. View Slide

  26. View Slide

  27. state
    online

    View Slide

  28. Expõe o estado atual de
    disponibilidade da rede.
    online state

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  32. View Slide

  33. onde
    usar?

    View Slide

  34. View Slide

  35. VIBRATION

    View Slide

  36. Provê acesso ao hardware
    de vibração de dispositivos
    móveis.
    vibration

    View Slide

  37. // 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

    View Slide

  38. // 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

    View Slide

  39. caniuse.com/#feat=vibration
    BROWSER
    support

    View Slide

  40. onde
    usar?

    View Slide

  41. View Slide

  42. View Slide

  43. DEVICE
    orientation

    View Slide

  44. Expõe as coordenadas de
    orientação física de um
    dispositivo.
    device orientation

    View Slide

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

    View Slide

  46. 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)`;
    });

    View Slide

  47. View Slide

  48. caniuse.com/#feat=deviceorientation
    BROWSER
    support

    View Slide

  49. onde
    usar?

    View Slide

  50. View Slide

  51. clipboard
    copy & paste

    View Slide

  52. Possibilita interação com o
    clipboard do usuário
    através de operações de
    copiar, cortar e colar.
    clipboard

    View Slide

  53. View Slide

  54. // 1. User interaction is required
    let button = document.querySelector('button');
    button.addEventListener('click', () => {
    select();
    copy();
    });
    clipboard

    View Slide

  55. // 2. Programmatically select an element
    function select() {
    let input = document.querySelector('input');
    input.focus();
    input.setSelectionRange(0, input.value.length);
    }
    clipboard

    View Slide

  56. // 3. Copy selected element text
    function copy() {
    try {
    document.execCommand('copy');
    }
    catch (err) {
    console.error(err);
    }
    }
    clipboard

    View Slide

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

    View Slide

  58. View Slide

  59. View Slide

  60. caniuse.com/#feat=clipboard
    BROWSER
    support

    View Slide

  61. onde
    usar?

    View Slide

  62. View Slide

  63. View Slide

  64. light
    ambient

    View Slide

  65. Expõe dados do sensor
    que capta a intensidade
    de luz de um ambiente.
    ambient light

    View Slide

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

    View Slide

  67. View Slide

  68. View Slide

  69. let sensor = new AmbientLightSensor();
    sensor.start();
    sensor.onchange = (e) => {
    console.log(e.reading.illuminance);
    };
    sensor.stop();
    ambient light sensor

    View Slide

  70. BROWSER
    caniuse.com/#feat=ambient-light
    support

    View Slide

  71. onde
    usar?

    View Slide

  72. View Slide

  73. View Slide

  74. STATUS
    battery

    View Slide

  75. Permite que uma página
    web acesse informações
    sobre a bateria de um
    dispositivo.
    battery status

    View Slide

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

    View Slide

  77. caniuse.com/#feat=battery-status
    BROWSER
    support

    View Slide

  78. onde
    usar?

    View Slide

  79. View Slide

  80. View Slide

  81. web
    components
    templates
    custom elements
    shadow dom
    html imports

    View Slide

  82. progressive
    web apps
    service workers
    push notifications
    offline support
    app manifest
    background sync

    View Slide

  83. WEB
    assembly

    View Slide

  84. WebAssembly, ou wasm, é
    um novo formato binário
    para desenvolvimento de
    aplicações de baixo nível.
    web assembly

    View Slide

  85. under developm
    ent
    BROWSER
    support

    View Slide

  86. View Slide

  87. WEBVR

    View Slide

  88. Uma API experimental que
    trás o mundo de Realidade
    Virtual para web usando
    Oculus Rift ou Google
    Cardboard por exemplo.
    web VR

    View Slide

  89. BROWSER
    support
    chromestatus.com/features#webvr

    View Slide

  90. View Slide

  91. gamepad

    View Slide

  92. Permite que páginas web
    se conectem com controles
    de video game via USB.
    gamepad

    View Slide

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

    View Slide

  94. window.addEventListener('gamepadconnected', gameLoop);
    function gameLoop() {
    let gp = navigator.getGamepads()[0];
    if (gp.buttons[0].pressed) {
    console.log('X');
    }
    requestAnimationFrame(gameLoop);
    }
    game loop

    View Slide

  95. View Slide

  96. caniuse.com/#feat=gamepad
    BROWSER
    support

    View Slide

  97. View Slide

  98. View Slide

  99. 2011

    View Slide

  100. 2012

    View Slide

  101. 2013

    View Slide

  102. 2014

    View Slide

  103. View Slide

  104. obrigado
    @zenorocha
    muito

    View Slide