Web APIs to improve User Experience

Leonardo Faria

Leonardo

  • 🇧🇷
  • Developer @ Thinkific
  • www.leonardofaria.net
  • @leozera

Code & Coffeeption

Background

  • 1900's Browsers War
  • 1999: Web 2.0: Web as Platform

Gmail (2004)

Flex (2004)

Thoughts on Flash (2010)

Geolocation

Fetches latitude and longitude

When to use?
Show information based on location

Geolocation


  var info = document.getElementById('info');

  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;

    info.innerHTML = 'Latitude: ' + lat + ' - longitude: ' + lon;
  });
          

Geolocation

Live demo

Geolocation

Chrome 10 Safari 5 Firefox 3.5 IE 9

caniuse.com/#feat=geolocation

Page Visibility

Provides an API to ask whether the current page is visible or not

When to use?
Enhance UX in slideshows or videos

Page Visibility


  window.addEventListener('visibilitychange', function() {
    if (document.hidden) {
      document.title = 'Tab is hidden';
    } else {
      document.title = 'Tab is focused';
    }
  });
          

Page Visibility

Live demo

Page Visibility

Chrome 16 Safari 6.1 Firefox 10 IE 10

caniuse.com/#pagevisibility

Camera

Allows applications to manage the camera of the device

When to use?
Take photographs or record videos

Camera


  var video = document.getElementById('video');
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var button = document.getElementById('snap');

  navigator.mediaDevices.getUserMedia({video: true}).then(function(stream){
    video.src = window.URL.createObjectURL(stream);
    video.play();
  });

  button.addEventListener('click', function() {
    context.drawImage(video, 0, 0, 640, 480);
  });
          

Camera

Live demo

Camera

Chrome 17 -- Firefox 17 Edge 12

caniuse.com/#stream

Online State

Exposes a network connection availability information

When to use?
Provide feedback to user

Online State


  var info = document.getElementById('info');
  var status = navigator.onLine ? 'online' : 'offline';
  info.innerHTML = status;

  window.addEventListener('offline', networkStatus);
  window.addEventListener('online', networkStatus);

  function networkStatus(e) {
    info.innerHTML = e.type;
  }
          

Online State

Live demo

Online State

Chrome 16 Safari 5 Firefox 41 IE 9

caniuse.com/#online-status

Vibration

Provides access to a form of tactile feedback

When to use?
Alert wrong data in forms

Vibration


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

  // Vibrate with a pattern (vibrate, wait...)
  navigator.vibrate([400, 300, 300, 200, 500]);
          

Vibration

Live demo

Vibration

Chrome 30 -- Firefox 11 --

caniuse.com/#vibration

Battery Status

Provides battery information from desktop and mobile devices

When to use?
Alert user to charge their devices
Increase product prices 👹

Battery Status


  var info = document.getElementById('info');
  info.innerHTML = status;

  navigator.getBattery().then(function(battery) {
    info.innerHTML = battery.level * 100;

    battery.addEventListener('levelchange', function() {
     info.innerHTML = battery.level * 100;
   });
  });
          

Battery Status

Live demo

Battery Status

Chrome 38 -- Firefox 43 --

caniuse.com/#battery-status

Questions?

Thank you

😃