Browser compatibility of new Web technologies

To verify that all the new features for Web applications run in a browser, a test page.

Because the best way to verify that a feature is present is to use it. So you can display this page with browsers you are targeting and ensure that they can run your application ...

SQL Storage

Can you create a local database in the client? The answer ...

Support:

Currently this is only on Chrome ...

Code:

if (window.openDatabase) {
   thedb = openDatabase("DBTEST", "1.0", "HTML5 database", 10000);
}

WebGL

After seeing Tree.js demonstrations, there is no doubt of the value of using WebGL on a website, in an application or as the center of an application. 3D is not just for games, the uses are endless: graphs in 3D interfaces, presentations of objects or products in three dimensions ...
Now the question is what browsers can display WebGL ... Verification:

Demo: The bar below should be green.

Support:

All browsers support WebGL on the desktop. Keep checking on mobile.

Code:

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

FileReader

An API to upload files to the client and process or display their contents. These may be images, tables, texts.

Support:

Supported by all desktop browsers.

Code:

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

FileWriter

After processing a document, it should be saved ... Unfortunately this is only supported experimentally.

Support:

Supported by Chrome only (for now)...

Code:

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

CSS Gradient

With CSS 3, it is possible to make transitions, animations and effects of shaded surfaces or logos ... To achieve a modern application with colored panels, gradients are essential for a modern look and feel, which is why the property is so important.
Other functions of CSS 3 are implemented unevenly across browsers.

Support: A green gradient bar should appear below.

Supported by all desktop browsers.

Code:

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

Web Worker

Multi-tasking in the browser without even a call to the server ... Worker launches processes that run silently and send results when asked. The application can interact with a program by messages that initiate queries and update the contents of the interface when the answer comes.

Support:

Supported by all desktop browsers.

Code:

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

Shared Worker

A version of Worker which may be used by serveral windows or iframes. It may be used also by other workers.

Support:

Not supported by Edge.

Code:

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

WebSocket

Everything that you do with Web Worker on the client, can be done with the server using WebSocket. It communicates asynchronously and the server sends data when it is available. An extra advantage here is that the server can communicate with multiple clients.

Support:

Supported by all desktop browsers.

Code:

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

WebRTC

This protocol is the next step in communications with the server: from two-way trade to real time trade we go. Once the connection opened, the data is passed from server to client in continuous flow, or better yet, from a browser to another browser without a server.

Support:

Supported by Chrome and Firefox.

Code:

var audio = new AudioContext();

IndexedDB

To enter offline mode, data taken in a remote MySQL or another database are transferred locally in a IndexedDB database.

Support:

Supported by all browsers (desktop or mobile) but Safari. A frontend as Lawnchair or localForage (not a misspelling) is needed for compatibility with all browsers.

Code:

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

postMessage

Enables the exchange of data between iframes, or between a page and iframes in it.

Support:

Implemented by all browsers.

Sending data :

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

Receiving data :

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