My Slides for my talk of State of Web APIs 2017 at International PHP Conference 2017 (IPC17)

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