HTML5.1 & Web Platform APIs

Paris Web, October 2016

Léonie Watson
Chaals McCathie Nevile

Push API

What?

Enables push notifications in webapps

How?

Part of the Service Workers family
Objects, events and methods for managing and manipulating push notifications

Where?

Subscribe to notifications

Webapp has an active service worker
Subscribe to Push notifications using PushManager.subscribe()
PushSubscription contains endpoint and encryption key

Handle notifications

Incoming Push notifications delivered to ServiceWorkerGlobalScope.onpush event handler
Webapp shows Push notification using ServiceWorkerRegistration.showNotification()

PushEvent interface

Push action sent to a service worker
Contains information sent from a webapp to a PushSubscription

PushManager interface

Enables webapp to receive third party notifications
Replaces PushRegistrationManager interface

PushMessageData interface

Access to push data sent from server
Has methods for manipulating the received notification data

PushSubscription interface

Provides URL endpoint
Enables Push notification unsubscribe

Push API demo

Gamepad API

What?

Enables game controller support in browser-based games

How?

Events and objects for querying gamepad state
Method for returning connected gamepads

Where?

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

id: string of gamepad information
index: unique index number
connected: boolean indicating gamepad connection state
buttons: array of GamepadButton objects
axes: array of axis based controls
timestamp: time the gamepad data was last updated

Gamepad API demo

Vibration API

W3C Recommendation, February 2015

What?

Enables simple haptic feedback from webapps

How?

Patterns of on/off pulses
Each pulse is described in milliseconds
Patterns are a combination of pulses/pauses

Where?

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?

Extends MouseEvent interface with movement attributes
Methods and events for managing and manipulating a pointer lock

Where?

Pointer lock features

Hides the on-screen mouse cursor
Persistent until released by an API call
Sends events regardless of mouse button state
Not confined to the browser window

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?

SpeechSynthesis and SpeechRecognition interfaces
Methods for controlling and manipulating speech output/input

SpeechRecognition interface: Where?

SpeechSynthesis interface: Where?

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

HTML 5.1

Faire revisions (±) annuelles
Spec sur github
Réfléchir réalité, utiliser WICG pour "incubation"
"Proposed Recommendation" 15 Septembre 2016
Nous travaillons sur HTML 5.2

Where?

Yandex Firefox Opera Edge Safari UCWeb Chrome Glazou!! Opera Mini ...

Regardez le rapport d'implementation

Mais ça changera…

Quoi?

Nouvelles fonctionalités
Regressions vers HTML 4 :(
Integration dans l'écosystème
bugfixes
Mieux expliquer certaines choses

Quoi de neuf?

picture / srcset
details, summary
input type={week,month,datetime-local}
registerProtocolHandler()
oncopy, oncut, onpaste

`picture`, `srcset`

Images "responsive"

<picture>
  <source srcset="1.png" type="image/png"
     media="max-width:20px">
  <source srcset="1.svg" type="image/svg+xml"
     media="min-width:20px">
  <img src="one.jpg" alt="two!">
<picture>

`srcset`…

<img src="ouff.jpg" alt="Oh-la-la"
  sizes="super-petit.jpg 100w,
         petit.jpg 300w,
         grand.jpg 800w">

Yandex Firefox Opera Edge Safari Chrome

`details` et `summary`

information optionelle

<details>can
  <summary>Ce que se voit toujours</summary>
  Et voici, des explications, etc
     
</details>

Nouvelles `type`s

input type="week":
input type="month":
input type="datetime-local":

Yandex Edge

`registerProtocolHandler()`

navigator.registerProtocolHander("mailto",
      "http://mail.yandex.com", "Яндекс Почта")

Protocols: liste + "web+[a-z]*"
URL: Que de la même "origine"
Titre

Yandex Firefox Opera

`oncopy`, `oncut`, `onpaste`

<code oncopy="alert('Vous allez me partager?')">()</code>

Etc…

Yandex Firefox Opera Safari

Ce n'est pas tout!

reportValidity()
fastSeek()
forceSpellCheck()
scrollRestoration()
menu type="contextmenu", menuitem

Regression?

accesskey="1 a 語""a", comme HTML 4
@rev retourne, principalement pour RDFa
Mettez les entêtes en ordre

<section><h1>
  <section><h1><h2>

Fonctionalités supprimées

Faute d'implementation: <label form="UnAutre">; <range multiple>
Suppression des implementations: MediaController; appcache; keygen - dès HTML 5.2

Reparation

mousewheel
<option></option> est valide
Construction des tables…
<figcaption> n'import où dans une figure

Etc etc… et il en reste à faire :(

Integration

requestAnimationFrame
Content Security Policy (CSP)
allowfullscreen
Expliquer mieux SVG en HTML

Reporté a l'avenir(?)

<style scoped>
<dialog>
isProtocolHandlerRegistered
contenteditable="???"
inputmode
tables sortables

Le futur proche?

Peut-être, entre autres, il y aura…

Custom Elements
Shadow DOM
Service Workers
beforeInput
javascript module

Picture credits

The pictures used in this talk:

Browser logos from browser companies
Duck from ClipArts

Demo credits

The demos used in this talk: