Bloguons JavaScript

Parce que je me dis tout le temps : « Faut que j'écrive ça quelque part. »
Home

Aller au menu | Aller à la recherche

Avertir les gens du non-support de leur navigateur

, 14:31 - Lien permanent

C'est vrai, c'est banal, mais ça peut sauver beaucoup de temps de débogage : si on met du JavaScript dans notre site, c'est très important de savoir quels navigateurs on veut supporter.

Avant, j'utilisais le script de Browser Update. Il est bien ficelé, se met à jour automatiquement.

Sauf que... cela crée un appel de script inutile en début de chaque chargement de page de son site, pour un support qui semble arbitraire. En effet, si toutes les fonctionnalités de JavaScript exploitées dans notre code existaient avant 2018, alors pourquoi bloquer Google Chrome 70, qui date d'octobre 2018?

Il est préférable de vérifier plutôt si les fonctionnalités exploitées existent avant d'exécuter le code JavaScript utile.

(function () {
    // noinspection ES6ConvertVarToLetConst
    var supportsES6 = function () {
        try {
            new Function("(a = 0) => a"); // jshint ignore:line
            return true;
        } catch (err) {
            return false;
        }
    };
    var supportForEach = window.NodeList && NodeList.prototype.forEach;
    if (!supportsES6() || !supportForEach) {
        window.alert('Votre navigateur est obsolète. Mettez-le à jour pour naviguer sur notre site web.');
    }
})();

Vous remarquerez que le code ci-dessus est dans un dialecte compris par IE6, l'ancêtre mal-aimé de tous, mais qui saura toujours bien afficher l'avertissement sans broncher.

Dans ce code, on vérifie deux choses, d'abord si le navigateur supporte les fonctions fléchées, la base de ES6, et ensuite s'il supporte la méthode forEach d'un élément NodeList, ce qui élimine le support de MS Edge 15 et antérieurs.

On pourrait aussi y ajouter le support de URLSearchParam, le support de FormData, et ainsi de suite.

Les commentaires // noinspection et // jshint sont évidemment facultatifs, ne servant qu'à indiquer aux validateurs jsLint et jsHint que le code écrit est intentionnel et d'ignorer l'erreur s'il en voit une.

De cette façon, l'utilisateur sera averti s'il utilise un navigateur trop ancien pour aller sur le fruit de notre amour, nous permettant dès le départ de lui dire que s'il s'y plante, le problème n'est pas nous mais bien lui!