Web browser for new technologies

To check if the new features of web applications work with the browser, the tests page.

Because the best way to check for a function is to implement it. So you can view this page with the browsers you're targeting and see if they can run your app...

SQL Storage

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

Customer support:

Currently it's only on Chrome...

Code:

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

WebGL

Having seen Tree.js demos, there is no doubting the wisdom of using WebGL on your site, in your app, or in the app center. 3D isn't just for gaming. Countless uses: 3D graphs, interfaces, presentations of 3D objects or products...
Now it remains to be seen which browsers WebGL runs on... Check:

Demonstration: The next panel should be green.

Customer support:

All browsers support WebGL on the desktop. Stay connected.

Code:

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

FileReader

API for downloading files to the client computer and processing or viewing their contents. These can be pictures, tables, texts.

Customer support:

Recognized by all desktop browsers.

Code:

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

FileWriter

After processing the document, save it... Unfortunately, this is only experienced experimentally.

Customer support:

Only Chrome is recognized (currently)...

Code:

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

CSS gradient

With CSS 3, you can perform transitions, animations and gradient effects on surfaces or a logo... To implement a modern application, panels with color gradients are needed, which is why the gradient property is so important.
The rest of the CSS 3 functions are implemented unevenly depending on the browsers.

Support: A green panel with a gradient should be displayed below.

Recognized by all desktop browsers.

Code:

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

Web and worker

Multitasking in the browser without even accessing the server... Together with Worker, we run processes that run in silence and send results when asked. The application can interact with the program via messages that trigger requests and update the contents of the interface when a response arrives.

Customer support:

Recognized by all desktop browsers.

Code:

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

General worker

A version of Worker that is used in multiple windows or iframes. Other workers can use this.

Customer support:

Not recognized by Edge.

Code:

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

WebSocket

Everything that is done with Web Worker on the client computer can be done with the server via WebSocket. Communication is asynchronous and the server sends data when it is available. Another advantage here is that the server can communicate with multiple clients.

Customer support:

Recognized by all desktop browsers.

Code:

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

WebRTC

This protocol is the next step in communicating with the server: we are moving from bidirectional exchanges to real-time exchanges. After opening a connection, data is switched from server to client in a continuous stream, or better, from one browser to another browser, without passing through one server.

Customer support:

Chrome and Firefox recognized.

Code:

var audio = new AudioContext();

Index DB

To go offline, data taken from a remote MySQL database or something else is transferred locally to the IndexedDB database.

Customer support:

Recognized by all browsers (desktop or mobile) except Safari. For compatibility with all browsers, a frontend like Lownchair or localForage is required (this is not a spelling error).

Code:

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

PostMessage

Exchange of data between iframes or between the page and iframes contained on the page .

Customer support:

Implemented by all browsers.

Shipment ID:

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

Receiving code:

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