HTML5.1 & Web Platform APIs

HTML5.1 & Web Platform APIs

Over the Air, London November 2016

HTML5.1

What

New things

What's changed?

What's gone?

What's fixed?

What's waiting?

HTML5.2

What?

When?

HTML needs you

Push API

What?

Enables push notifications in webapps

How?

Where?

Chrome Firefox

Subscribe to notifications

Handle notifications

PushEvent interface

PushManager interface

PushMessageData interface

PushSubscription interface

Push API demo

Gamepad API

What?

Enables game controller support in browser-based games

How?

Where?

Chrome Firefox Edge Opera

Connect a gamepad

The gamepadconnected event fires when a gamepad is connected


window.addEventListener('gamepadconnected', function() {
    console.log('Gamepad connected');
});

Query a gamepad

The navigator.getGamepads() method returns an array of connected gamepads


window.addEventListener('gamepadconnected', function(e) {
    var gamepad = navigator.getGamepads()[e.gamepad.index];
    console.log('Gamepad connected: Index %d', gamepad.index);
});

Gamepad object properties

Gamepad API demo

Vibration API

What?

Enables simple haptic feedback from webapps

How?

Where?

Chrome Firefox Opera

Vibrate once


 var vibrateOnce = function(e) {
	window.navigator.vibrate(500);
 };

Vibrate twice


 var vibrateTwice = function(e) {
	window.navigator.vibrate([500, 500, 500]);
 };

Vibrate more


 var vibrateMore = function(e) {
	window.navigator.vibrate([500, 500, 500, 500, 500]);
 };

Vibration API demo

Pointer Lock API

What?

Locks mouse movement to a single element, removes the mouse cursor, and removes mouse movement boundaries

How?

Where?

Chrome Firefox Edge Opera

Pointer lock features

Request pointer lock

The requestPointerLock() method locks the pointer to an element


canvas.requestPointerLock();

Query pointer locked element

The pointerLockElement property of the document object


if (document.pointerLockElement === canvas) {
    console.log('Pointer loc status: Locked');
}

Release pointer lock

The exitPointerLock() method of the document object


document.exitPointerLock();

Listen for pointer lock changes

The pointerlockchange event fires when the pointer lock state changes


if ("onpointerlockchange" in document) {
    document.addEventListener('pointerlockchange', someFunction, false);
}

Detect pointer lock errors

The pointerlockerror event fires when requestPointerLock() or exitPointerLock() fails


document.addEventListener('pointerlockerror', someFunction, false);

Pointer Lock demo

Web Speech API

What?

Enables speech input and output for webapps

How?

SpeechRecognition interface: Where?

Chrome Opera

SpeechSynthesis interface: Where?

Chrome Edge Opera Safari

Basic HTML


<button data-hint="Use space or enter to activate">
	Foo
</button>

Check for API support


if (window.SpeechSynthesisUtterance === undefined) {
	alert("Browser does not support the Web Speech API");
} else {
	// Do something
}

Get controls with hints


hints = document.querySelectorAll('[data-hint]'),
		hoverTimeout;

Create speech callback


speakHint = function(e) {
	var msg = new SpeechSynthesisUtterance(e.target.dataset.hint);
    window.speechSynthesis.speak(msg);
};

Keyboard functionality


function focusEventListener(e) {
	hoverTimeout = window.setTimeout(speakHint, 500, e);
}

function blurEventListener(e) {
	window.clearTimeout(hoverTimeout);
}
	

Mouse functionality


function mouseoverEventListener(e) {
	hoverTimeout = window.setTimeout(speakHint, 500, e);
}

function mouseoutEventListener(e) {
	window.clearTimeout(hoverTimeout);
}

Event listeners


hints.forEach(function(hint) {
	hint.addEventListener('focus', focusEventListener);
	hint.addEventListener('blur', blurEventListener);
	hint.addEventListener('mouseover', mouseoverEventListener);
	hint.addEventListener('mouseout', mouseoutEventListener);
});

Web Speech API demo

Thank you