How to detect if browser is compatible with ES2015 [duplicate]

Question

I have a big chunk of JS libraries that I should rewrite since it's really old and outdated. So, I decided to come up with a solution where I would just use most of ES2015 features like rest parameters.

The thing is, I am sure all the clients would not have their browser up-to-date and I am confused whether I will face any issue regarding their browser is compatible with my new JS libs.

So, I was wondering if I could detect whether the client browsers are compatible with ES2015. And if not, I would just include my old JS library.

I am looking for a solution like Conditional comments, but I am getting nowhere to solution.

Any help in HTML, JS or PHP is appreciated. Please kindly suggest your advice.

Answer 1

I was wondering if I could detect whether the client browsers are compatible with ES2015. And if not, I would just include my old JS library.

You cannot do that, simply because AFAIK there's no browser that fully supports ES2015. Also, you don't really want to maintain two different versions of your code, because it's painful and it could get messy really quick.

The approach nowadays is to use a transpiler, which is sort of a compiler that compiles your ES2015 code to ES5 (the JavaScript that every browser knows). It is still kind of messy, but at least you get to write only one version of your code, and it's ES2015.

I think Babel (formerly 6to5) is the most popular transpiler. You can check out their website for getting started.

---

As to answer your actual question,

How to detect if browser is compatible with ES2015

You can do that in many ways. I'm not sure what could be the most reliable one, but for example you could simply try on your browser's console:

'Promise' in window

If this statement returns true, then the current browser supports promises, which is a new feature of ES2015, so you could assume that it supports most of the features of ES2015.

This is not enough for most cases though; you may want to be 100% sure that what you're using is not going to throw a SyntaxError in any old browser.

A solution could be to manually check for each feature you want to use. For example, if you need the Fetch API, you could create a function that tells you if the current browser supports it:

function isFetchAPISupported() {
    return 'fetch' in window;
}

You can do this for any new API you need. However, if you need something syntactically different, I think your only bet is eval() (as Katana314 suggested). For example, in order to check support for rest parameters you could do:

function isRestSupported() {
    try {
        eval('function foo(bar, ...rest) { return 1; };');
    } catch (error) {
        return false;
    }
    return true;
}

This works great in Firefox, because the rest parameters are supported. It works as well on Safari, returning false because rest parameters are not supported there yet.