Le problème lorsque l'on écrit du JavaScript côté navigateur et que l'on n'a pas le contrôle sur l'environnement qui sera utilisé pour l'exécuter. Il est alors difficile de prévoir si une fonction ou un objet sera supporté. Heureusement, la nature dynamique du JavaScript permet de rajouter des Polyfill qui vont définir les objets ou les fonctions dans le cas où elles n'existeraient pas. Cela rajoute cependant quelques problématiques :
- Il faut chercher les blocs de codes correspondant aux polyfills à utiliser.
- On impose à tous les utilisateurs de charger le code d'un polyfill même si au final il n'est utilisé que par 1% des utilisateurs.
Polyfill.io
Polyfill.io est un service qui propose de solutionner ces 2 problèmes grâce à l'utilisation d'une API simple qui permet de charger les polyfills sur demande. Il suffit de charger le fichier JavaScript en lui passant en paramètre les méthodes à polyfill.
https://polyfill.io/v3/polyfill.min.js?features=NodeList.prototype.forEach,Array.prototype.forEach,IntersectionObserverL'avantage est qu'il va en plus vérifier l'en-tête User Agent du navigateur afin de ne distribuer que les polyfills nécessaire au navigateur actuel. Ainsi il n'imposera pas aux utilisateurs de navigateurs modernes un téléchargement conséquent inutile.
Les risques
Attention cependant avec l'utilisation d'un service tiers pour charger votre code JavaScript.
- Polyfill.io ne garantit aucun SLA et le service peut être indisponible ou discontinué du jour au lendemain.
- De la même manière, si le service est arrêté et que quelqu'un de mal intentionné reprend le domaine vous pourriez vous retrouver avec du code malhonnête exécuté sur votre site.
Pour éviter ces problèmes vous pouvez héberger votre propre instance du service Polyfill.io en utilisant le code source (si vous avez besoin d'aide pour configurer votre serveur pour une application NodeJS vous pouvez utiliser ce ce tutoriel).
