Geek Answers Handbook

How to determine browser compatibility with ES2015

I have a large chunk of JS libraries that I have to rewrite since it is really old and outdated. So, I decided to come up with a solution in which I would use most of the features of ES2015, such as leisure options .

The fact is that I am sure that all clients will not have their browser up to date, and I am confused whether I will encounter any problem regarding their browser that is compatible with my new JS libraries.

So, I was wondering if client browsers are compatible with ES2015. And if not, I would just turn on my old JS library.

I am looking for a solution, such as Conditional comments , but I am not getting a solution.

Any help in HTML, JS or PHP is welcome. Please offer your advice.

+7
javascript ecmascript-6
source share
1 answer

I was wondering if I can determine if client browsers are ES2015 compatible. And if not, I would just include my old JS library.

You cannot do this, simply because AFAIK does not have a browser that fully supports ES2015. Also, you really don't want to support two different versions of your code because it is painful and it can become very messy.

Currently, the approach is to use a transpiler, which is a kind of compiler that compiles your ES2015 code to ES5 (JavaScript that knows about all browsers). This is still messy, but at least you can write only one version of your code, and ES2015.

I think Babel (formerly 6to5) is the most popular transporter. You can check your site to get started.

How to answer your real question,

How to determine browser compatibility with ES2015

You can do this in many ways. I'm not sure what might be the most reliable, but, for example, you can just try on your browser console:

'Promise' in window

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

This is not enough for most cases; you can be 100% sure that what you are using is not going to throw SyntaxError into any old browser.

The solution may be to manually check each function that you want to use. For example, if you need the Fetch API, you can create a function that tells you if the current browser supports:

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

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

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

This works fine in Firefox because the rest of the options are supported. It also works in Safari, returning false , because break options are not yet supported.

+3
source share

More articles:


All Articles