When you develop a web application and want to support older browsers but also want to use the latest browser features you need a transpiler that rewrites the code into ES5 code and you need to include polyfills. One common approach with polyfills is to bundle them together with the application. The problem is that this increases the bundle size and users with modern browsers have to download code that their browser does not need.

An alternative is the Polyfill.io service. It's a service developed and maintained by the Financial Times and it works very simple. You send a request to the service and get back the requested polyfills, but only if your browser does not support the features natively.

In the simplest case you add this script tag into your site

<scriptsrc="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

This returns the default set of polyfills. See the documentation to see what is contained in this set

When you open the URL in a modern browser you get an almost empty file back and when you open it in a browser like IE11 you see polyfill code. Polyfill.io analyzes the User-Agent HTTP request header to determine what code it has to send back.

Instead of requesting a standard set of features it is better to request only the features that your application depends on. You can specify the features with the query parameter features and a comma separated string.

One issue with Polyfill.io is that your application depends on a third party service you don't have any control over. This is maybe not a big problem when the application already depends on a lot of other external services.

But when Polyfill.io is the only external dependency this might be an issue. Or you develop an in house web application, where you have to support older browsers, and the employees only have limited or no access to the Internet.

Fortunately this issue can be solved by installing Polyfill.io on your own server. The source code is public available on GitHub and it's written in JavaScript and Node.js. It should run on any platform where a Node.js runtime is available.

At this stage of the installation you can test the service if it works.

bin/polyfill-service

Open a browser and point it to the IP address of the server and port 3000. If there is firewall installed on your server open port 3000. If you see the Polyfill.io website everything is okay. You can now stop the service with CTRL+c

Next we move the build directory to /opt/polyfill-service, create an unprivileged user that will run the service (polyfill) and change the ownership of the /opt/polyfill-service script to the new polyfill user.

When you build the project (npm run build) you see that the bundle has a size of only 8KB and it works when you open it with IE11. Users on a modern browser don't have to download any polyfill. Although all users now have to make an additional blocking request to Polyfill.io or your own server.