Compatibilité navigateur des nouvelles technologies du Web

Pour vérifier que les nouvelles possibilités offertes aux applications Web fonctionnent avec un navigateur, une page de tests.

Parce que le meilleur moyen de vérifier qu'une fonctionnalité est présente, c'est de la mettre en oeuvre. Vous pouvez donc afficher cette page avec les navigateurs que vous ciblez et vérifier qu'ils pourront faire fonctionner votre application...

SQL Storage

Pouvez vous créer une base de donnée locale chez le client? La réponse...

Support:

Actuellement c'est sur Chrome seulement...

Code:

if (window.openDatabase) {
   thedb = openDatabase("DBTEST", "1.0", "Base de données HTML5", 10000);
}

WebGL

Après avoir vu vu les démonstrations de Tree.js, on ne peut douter de l'intérêt d'utiliser WebGL sur son site, dans son application ou au centre d'une application. Le 3D n'est pas seulement faite pour les jeux. Les utilisations sont innombrables: graphes en 3D, interfaces, présentations d'objets ou de produits en trois dimensions...
Maintenant, reste à savoir sur quels navigateurs fonctionne WebGL... Vérification:

Démo: La barre ci-dessous doit être verte.

Canvas non supporté!

Support:

Tous les navigateurs supportent WebGL sur le bureau. Rester à vérifier sur les mobiles.

Code:

var canvas = document.getElementById("canvas3D");
var wgl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

FileReader

Une API pour charger des fichiers sur le poste du client et traiter ou afficher leur contenu. Ce peut être des images, des tables, des textes.

Support:

Reconnu par tous les navigateurs de bureau.

Code:

var test = window.File && window.FileReader && window.FileList && window.Blob;

FileWriter

Après avoir traité un document il convient de le sauvegarder... Malheureusement cela est supporté expérimentalement seulement.

Support:

Reconnu par Chrome seulement (actuellement)...

Code:

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;

CSS Gradient

Avec CSS 3, on peut réaliser des transitions, des animations et des effets de dégradés sur les surfaces ou sur un logo... Pour réaliser une application moderne, des panels avec des dégradés de couleurs sont indispensables, ce pourquoi la propriété gradient est si importante.
Les autres fonctions de CSS 3 sont implémentées de façon inégale selon les navigateurs.

Support: Une barre verte en dégradé doit s'afficher ci-dessous.

Reconnu par tous les navigateurs de bureau.

Code:

<style>
.cssgrad {
  background: -webkit-linear-gradient(#0c0, #060);
  background: linear-gradient(#0c0, #060);
}
</style>

Web Worker

Le multi-tâche dans le navigateur sans même faire appel au serveur... Avec Worker, on lance des processus qui s'exécutent en silence et envoient des résultats quand on le demande. L'application peut interagir avec un programme par messages qui lancent des requêtes et mettent à jour le contenu de l'interface quand vient la réponse.

Support:

Reconnu par tous les navigateurs de bureau.

Code:

var w1 = new Worker("myscript.js");

Shared Worker

Une version de Worker qui s'utilise dans plusieurs fenêtres ou iframes. Cela peut aussi être utilisé par d'autres workers.

Support:

Non reconnu par Edge.

Code:

var sw = new SharedWorker("myscript.js");

WebSocket

Tout ce ce que l'on fait avec Web Worker sur le poste client, on peut le faire avec le serveur grâce à WebSocket. On communique en mode asynchrone et le serveur envoie des données quand elle sont disponible. Un avantage de plus ici est que le serveur peut communiquer avec plusieurs clients.

Support:

Reconnu par tous les navigateurs de bureau.

Code:

var ws = new WebSocket("url", "protocol");

WebRTC

Ce protocole est l'étape suivante dans la communication avec le serveur: on passe des échanges bi-directionnels aux échanges en temps réels. Une fois la connexion ouverte, les données passent du serveur au client en flux ininterrompu, ou mieux encore d'un navigateur à un autre navigateur sans passer par un serveur.

Support:

Reconnu par Chrome et Firefox.

Code:

var audio = new AudioContext();

IndexedDB

Pour passer en mode offline, les données prises dans une base distante MySQL ou autre sont transférée localement dans une base IndexedDB.

Support:

Reconnu par tous les navigateurs (bureau ou mobile) sauf Safari. Il faut un frontend comme Lawnchair ou localForage (ce n'est pas une faute d'orthographe) pour obtenir la compatibilité avec tous les navigateurs.

Code:

var request = window.indexedDB.open("MaBase", 2);

postMessage

Permet d'échanger des données entre iframes ou entre la page et les iframes qu'elle contient.

Support:

Implémenté par tous les navigateurs.

Code envoi:

window.postMessage("message", "http://www.example.com");

Code réception:

window.addEventListener("message", callback, false);

Voir aussi...

Prévu pour l'avenir

Fonctionnalités futures des navigateurs, ce qui est prévu d'implémenter ou pas. Liens externes.