This document provides a summary of the state of web APIs in 2017. It begins with a brief history of web browsers and the "Browser Wars" of the 1990s. It then discusses the rise of mobile web usage, particularly in Asia and Africa, and the need for web APIs to support mobile web applications. The document proceeds to summarize several important modern web APIs, including APIs for device access, animations, games, sensors, battery status, ambient light, networking information, orientation, audio, MIDI, VR, service workers, push notifications, Bluetooth, and speech synthesis and recognition.

1. STATE OF WEB
APIS 2017
Carsten Sandtner // @casarock // #IPC2017 // Berlin 05/31/2017

2. CARSTEN
SANDTNER
@CASAROCK

3. MEDIAMAN

4. THE WEB

5. BROWSER WARS

6. BROWSER WARS
USER AGENTS
Mosaic/0.9 !// grandmother of all!
Mozilla/2.02 [fr] (WinNT; I) !// Netscapes first!
Mozilla/4.0 (compatible; MSIE 4.0; Windows 98) !// IE4!
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like
Gecko)
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like
Gecko) Chrome/58.0.3029.110 Safari/537.36

7. BROWSER DETECTION
https://flic.kr/p/49DTbL

8. BROWSER WARS
BROWSER DETECTION
function lib_bwcheck() {
this.ver = navigator.appVersion
this.agent = navigator.userAgent
this.dom = document.getElementById ? 1 : 0
this.opera5 = this.agent.indexOf("Opera 5") > -1
this.ie5 = (this.ver.indexOf("MSIE 5") > -1 !&& this.dom !&& !this.opera5) ? 1 : 0;
this.ie6 = (this.ver.indexOf("MSIE 6") > -1 !&& this.dom !&& !this.opera5) ? 1 : 0;
this.ie4 = (document.all !&& !this.dom !&& !this.opera5) ? 1 : 0;
this.ie = this.ie4 !|| this.ie5 !|| this.ie6
this.mac = this.agent.indexOf("Mac") > -1
this.ns6 = (this.dom !&& parseInt(this.ver) !>= 5) ? 1 : 0;
this.ns4 = (document.layers !&& !this.dom) ? 1 : 0;
this.bw = (this.ie6 !|| this.ie5 !|| this.ie4 !|| this.ns4 !|| this.ns6 !|| this.opera5)
return this
}

9. STANDARDS!https://flic.kr/p/6K9jC4

10. OPEN MATTERS!
https://flic.kr/p/gbx9w

12. FIREFOX OS IS A
DISCONTINUED OPEN-
SOURCE OPERATING
SYSTEM – MADE FOR
SMARTPHONES, TABLET
COMPUTERS AND
SMART TVS

13. MOBILE WEB

14. WEB VS. NATIVE

15. https://flic.kr/p/fgpFpP

16. ASIAhttps://flic.kr/p/7HbZiF

17. FEB. 2017:
~65%
WEBPAGE VIEWS
GENERATED VIA
MOBILE.
Asia

18. AFRICAhttps://flic.kr/p/raHxmo

19. FEB. 2017:
~60%
WEBPAGE VIEWS
GENERATED VIA
MOBILE.
Africa

20. DON’T LOCK THEM OUT!
https://flic.kr/p/4ASX2S

21. NEW APIS FOR
MOBILE WEB

22. THERE IS MORE THAN
MOBILE WEB!

23. WEB APPS ARE
MAINSTREAM

24. PWA

25. API

26. WEBAPI IS A TERM USED TO REFER TO A SUITE OF
DEVICE COMPATIBILITY AND ACCESS APIS THAT
ALLOW WEB APPS AND CONTENT TO ACCESS
DEVICE HARDWARE […], AS WELL AS ACCESS TO
DATA STORED ON THE DEVICE
MDN
HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEBAPI

27. ANIMATIONS

28. WEB ANIMATION
API

29. PURE CSS
CSS3 ANIMATION
#alice {
animation: aliceTumbling infinite 3s linear;
}
@keyframes aliceTumbling {
0% {
color: #000;
transform: rotate(0) translate3D(-50%, -50%, 0);
}
30% {
color: #431236;
}
100% {
color: #000;
transform: rotate(360deg) translate3D(-50%, -50%, 0);
}
}

30. WEB ANIMATION API
ANIMATION USING WEB ANIMATION API
var aliceTumbling = [
{ transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
{ color: '#431236', offset: 0.333},
{ transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
];
var aliceTiming = {
duration: 3000,
iterations: Infinity
};
var aliceAnimated = document.getElementById("alice").animate(
aliceTumbling,
aliceTiming
);

31. WEB ANIMATION API
CONTROL YOUR ANIMATION
aliceAnimated.pause();
aliceAnimated.play();

32. CURRENTLY WORKING DRAFT!
Supported by Chrome 39+ and Firefox 48+
STATUS

34. WEB APIS WHICH …
SHOULD ALREADY BE KNOWN
// Geolocation
// IndexedDB
// Storage (Local-/SessionStarage)
// Notifications API

35. GAMEPAD &
POINTER LOCK
https://flic.kr/p/7BeYGK

36. VIBRATION
HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/VIBRATION_API
https://flic.kr/p/akrgGg

37. VIBRATIONS API
GOOD VIBRATIONS…
let duration = [
200, !// vibrate 200ms
100, !// pause 100ms
200 !// vibrate 200ms
];
window.navigator.vibrate(duration);

38. W3C RECOMMENDATION
Supported by Chrome and Firefox but not iOS

39. BATTERY STATUS
HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/BATTERY_STATUS_API
https://flic.kr/p/hNcMN

40. BATTERY STATUS API
BATTERY STATUS
navigator.getBattery().then(function (battery) {
battery.addEventListener('chargingchange', function () {
console.log("charging? " + (battery.charging ? "Yes" : "No"));
});
battery.addEventListener('levelchange', function () {
console.log("level: " + battery.level * 100 + "%");
});
battery.addEventListener('chargingtimechange', function () {
console.log("charging time: " + battery.chargingTime + " seconds");
});
battery.addEventListener('dischargingtimechange', function () {
console.log("discharging time: " + battery.dischargingTime + " seconds");
});
});

41. W3C CANDIDATE
RECOMMENDATION
Supported by Chrome and Firefox but will possibly being
removed due abuse

42. AMBIENT LIGHT
HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/AMBIENT_LIGHT_EVENTS
https://flic.kr/p/4zNmSX

43. LIGHT EVENTS
AMBIENT LIGHT
window.addEventListener("devicelight", function (event) {
var luminosity = event.value;
console.log(luminosity);
});

44. EDITORS DRAFT
Supported by Firefox and Chrome for Android
HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/AMBIENT_LIGHT_EVENTS

45. NETWORK INFORMATION
HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/NETWORK_INFORMATION_API
https://flic.kr/p/peQyWU

46. NETWORK CONNECTION API
NETWORK CONNECTION
var connection = navigator.connection !||
navigator.mozConnection !||
navigator.webkitConnection;
var type = connection.type;
function updateConnectionStatus() {
console.log("Connection type changed " + type + " !-> " +
connection.type);
}
connection.addEventListener('typechange', updateConnectionStatus);

47. EDITORS DRAFT
Supported by Firefox mobile and Chrome for Android

48. DEVICE ORIENTATION &
DEVICE MOTION
HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/DETECTING_DEVICE_ORIENTATION
By Svjo (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons

49. DEVICE ORIENTATION AND MOTION
DEVICE ORIENTATION
window.addEventListener("deviceorientation", handleOrientation, true);
function handleOrientation(event) {
var absolute = event.absolute;
var alpha = event.alpha;
var beta = event.beta;
var gamma = event.gamma;
!// Do stuff with the new orientation data
}

50. DEVICE ORIENTATION AND MOTION
DEVICE MOTION
window.addEventListener("devicemotion", handleMotion, true);
function handleMotion(event) {
console.log(event.acceleration.x + ' m/s2');
!// more stuff
}

51. W3C WORKING DRAFT
Supported by Chrome, Edge, Firefox and Safari mobile

52. WEB AUDIO
HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/WEB_AUDIO_API
https://flic.kr/p/7XqtJP

53. WEB AUDIO API
TYPICAL WORKFLOW
// Create audio context
// Inside the context, create sources — such as
<audio>, oscillator, stream
// Create effects nodes, such as reverb, biquad filter,
panner, compressor
// Choose final destination of audio, for example your
system speakers
// Connect the sources up to the effects, and the
effects to the destination.

55. WEB AUDIO
GREAT RESOURCES
// Talk:
// https://fronteers.nl/congres/2015/sessions/hands-
on-web-audio-soledad-penades
// Links:
// https://developer.mozilla.org/en-US/docs/Web/
API/Web_Audio_API
// https://github.com/notthetup/awesome-webaudio
// Awesome use case:
// https://learningmusic.ableton.com/index.html

56. W3C WORKING DRAFT
Supported by every major platform at desktop and mobile

57. WEB MIDI
HTTPS://WWW.W3.ORG/TR/WEBMIDI/
https://flic.kr/p/4fJGT

58. W3C WORKING DRAFT
Supported by Chrome

59. WEBVR
HTTPS://DEVELOPER.MOZILLA.ORG/DE/DOCS/WEB/API/WEBVR_API

60. WEBVR
WEBVR APIS
// Navigator.getVRDevices
// VRDevice/HMDVRDevice
// PositionSensorVRDevice
// VRPositionState
// VREyeParameters
// VRFieldOfView/VRFieldOfViewReadOnly

61. WEBVR
WEBVR USING AFRAME.IO
<!DOCTYPE html>
<html>
<head>
<title>Hello, WebVR! - A-Frame!</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https:!//aframe.io/releases/0.5.0/aframe.min.js">!</script>
!</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9">!</a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E">!</a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D">!</a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4">!</a-plane>
<a-sky color="#ECECEC">!</a-sky>
!</a-scene>
!</body>
!</html>

63. EDITORS DRAFT
Supported by Firefox and Chrome

64. SERVICE WORKERS & PUSH APIS
HTTPS://DEVELOPER.MOZILLA.ORG/DE/DOCS/WEB/API/SERVICE_WORKER_API

65. ☁
🖥
Internet
📜Service Worker
📁Cache
1
2
3
3

66. ☁
🖥
Internet
📜Service Worker
📁Cache
5
3
2
4
1

67. ☁
🖥
Internet
📜Service Worker
📁Cache
❌
1
2
3
4

68. SERVICE WORKERS
REGISTER SERVICE WORKER
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' })
.then(function (reg) {
!// registration worked
console.log('Registration succeeded. Scope is ' + reg.scope);
}).catch(function (error) {
!// registration failed
console.log('Registration failed with ' + error);
});
}

69. SERVICE WORKERS
IMPLEMENT SERVICE WORKER
self.addEventListener('install', function (event) {
console.log("installed");
});
self.addEventListener('activate', function (event) {
console.log("activated");
});
self.addEventListener('fetch', function (event) {
console.log("fetch");
event.respondWith(new Response("My response!!!"));
});

70. PUSH APIS

71. W3C WORKING DRAFT
Supported by Firefox and Chrome

72. BE
PROGRESSIVE!

73. WEB BLUETOOTH
HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/WEB_BLUETOOTH_API

74. WEB BLUETOOTH
BLUETOOTH
navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
.then(device !=> device.gatt.connect())
.then(server !=> {
!// Getting Battery Service!!...
return server.getPrimaryService('battery_service');
})
.then(service !=> {
!// Getting Battery Level Characteristic!!...
return service.getCharacteristic('battery_level');
})
.then(characteristic !=> {
!// Reading Battery Level!!...
return characteristic.readValue();
})
.then(value !=> {
console.log('Battery percentage is ' + value.getUint8(0));
})
.catch(error !=> { console.log(error); });

75. DRAFT
Supported by Chrome (behind a flag)

76. WEB SPEECH
HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/WEB_SPEECH_API
https://flic.kr/p/5EWHJ4

77. WEB SPEECH
SPEECH SYNTHESIS
var msg = new SpeechSynthesisUtterance('Hi there.');
msg.onstart = function () { };
msg.onend = function () { };
window.speechSynthesis.speak(msg);

78. WEB SPEECH
SPEECH RECOGNITION
var recognition = new webkitSpeechRecognition();
recognition.continuous = true; !// keep processing input until stopped
recognition.interimResults = true; !// show interim results
recognition.lang = 'de-DE'; !// specify the language
recognition.onstart = function () { };
recognition.onerror = function (event) { };
recognition.onend = function () { };
recognition.onresult = function (event) {
var interimTranscript = '';
for (var i = event.resultIndex; i < event.results.length; !++i) {
if (event.results[i].isFinal) {
finalTranscript += event.results[i][0].transcript;
} else {
interimTranscript += event.results[i][0].transcript;
}
}
};
recognition.onspeechend = function () { }

79. DRAFT
Supported by Chrome (prefixed) and Firefox (behind a flag)

80. SHAPE
DETECTION
HTTPS://WICG.GITHUB.IO/SHAPE-DETECTION-API/

81. SHAPE DETECTION
FACE DETECTION
let faceDetector = new FaceDetector({ fastMode: true, maxDetectedFaces: 1 });
!// Assuming |theImage| is e.g. a <img> content, or a Blob.
faceDetector.detect(theImage)
.then(detectedFaces !=> {
for (const face of detectedFaces) {
console.log('Face @ (${face.boundingBox.x}, ${face.boundingBox.y}),'
+ ' size ${face.boundingBox.width}x${face.boundingBox.height}');
}
}).catch(() !=> {
console.error("Face Detection failed, boo.");
})

82. SHAPE DETECTION
TEXT DETECTION
let textDetector = new TextDetector();
!// Assuming |theImage| is e.g. a <img> content, or a Blob.
textDetector.detect(theImage)
.then(detectedTextBlocks !=> {
for (const textBlock of detectedTextBlocks) {
console.log(
'text @ (${textBlock.boundingBox.x}, ${textBlock.boundingBox.y}), ' +
'size ${textBlock.boundingBox.width}x$
{textBlock.boundingBox.height}');
}
}).catch(() !=> {
console.error("Text Detection failed, boo.");
})

83. SHAPE DETECTION
BARCODE DETECTION
let barcodeDetector = new BarcodeDetector();
!// Assuming |theImage| is e.g. a <img> content, or a Blob.
barcodeDetector.detect(theImage)
.then(detectedCodes !=> {
for (const barcode of detectedCodes) {
console.log(' Barcode ${barcode.rawValue}' +
' @ (${barcode.boundingBox.x}, ${barcode.boundingBox.y}) with
size' +
' ${barcode.boundingBox.width}x${barcode.boundingBox.height}');
}
}).catch(() !=> {
console.error("Barcode Detection failed, boo.");
})

84. DRAFT
Supported by Chrome
HTTPS://WICG.GITHUB.IO/SHAPE-DETECTION-API/

85. APART FROM WEB

86. SENSORS
https://flic.kr/p/adQqaY

87. CREATE A
COMMON API FOR
DEVICE SENSORS
Device and Sensors
Working Group

88. WHAT’S COMING?

89. WEBUSBhttps://flic.kr/p/iSrCYX

90. PAYMENT
https://flic.kr/p/bf45dn

91. WEB CRYPTO
https://flic.kr/p/5hXtw5

92. PRESENTATION
API

93. REMOTE
PLAYBACK
https://flic.kr/p/5Psjeu

94. APIS EVOLVED

95. FROM DEVICE-
CENTRIC TO OFFLINE

97. SENSORShttps://flic.kr/p/BF4bzN

98. THANK
YOU!
CARSTEN SANDTNER
@CASAROCK