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 full-size slide

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

    View full-size slide

  3. page
    visibility

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. // 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 full-size slide

  14. // 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 full-size slide

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

    View full-size slide

  16. DEVICE
    orientation

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. 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 full-size slide

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

    View full-size slide

  21. clipboard
    copy & paste

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. 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 full-size slide

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

    View full-size slide

  28. light
    ambient

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. STATUS
    battery

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. web
    components
    templates
    custom elements
    shadow dom
    html imports

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. under developm
    ent
    BROWSER
    support

    View full-size slide

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

    View full-size slide

  42. BROWSER
    support
    chromestatus.com/features#webvr

    View full-size slide

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

    View full-size slide

  44. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  47. obrigado
    @zenorocha
    muito

    View full-size slide