By Shreya Bose, Technical Content Writer at BrowserStack - February 18, 2021
However, errors in JS due to browser differences continue to plague developers. Though their occurrence is less frequent than before, they still need to be dealt with quickly and cohesively. This article will explore these issues and offer a few solutions for the same.
- Promises are excellent for executing asynchronous operations, but they are not supported in IE.
- Arrow functions offer a more concise and usable syntax to craft anonymous functions. It is not supported on IE and Safari.
- On declaring Strict mode on top of JS code, it is parsed more rigorously with numerous rules, causing more warnings and errors to be flagged. Using Strict mode creates cleaner and more efficient code. But it isn’t supported uniformly across all browsers.
- With typed arrays, JS code can access and modify raw binary data. Along with modern browsers, this feature is only supported by IE10 and above. Did you know, how to test your website on the latest IE versions?
Several necessary APIs are also unsupported on older browsers – IndexedDB API, Web Storage API, Web Workers API, WebGL API, Web Audio API, WebRTC API, WebVR API.
- Browser sniffing is the practice of “sniffing” out which browser is accessing a site and run the relevant code to make the site compatible with that browser. This was done by reading the unique user-agent string of the browser, thus identifying it. At a time when every internet user was using either Netscape or IE, this worked perfectly fine.However, with more recent browsers showing up, this approach revealed itself to be faulty. The code itself is error-prone, to start with. For example, let’s say a website feature doesn’t work on Chrome 86 and below, and browser sniffing code has been added to detect this. However, it does work on Chrome 87. But because the code doesn’t include Chrome 87, the feature won’t be loaded even though it is supported. It’s a good practice to do a quick check of your website on different Chrome versions.Browser sniffing code has to be regularly changed to stay relevant. In the absence of this, browsers are prevented from accessing websites with features they actually support but whose code hasn’t been updated. At one point, the issue got so bad that browsers started allowing users to change their user-agent string to get around the sniffing code when queried with JS. This made browser sniffing even more pointless.
- As mentioned earlier, libraries like jQuery are essential for abstracted browser-based differences related to JS code. However, there are native and third-party libraries that are not supported across browsers and browser versions. Before using a library, analyze its offerings in terms of browser and feature support. Check its development history to ensure that it is regularly updated to keep pace with technological advancements.
- Use Polyfills: These are third-party JS files that work similarly to JS libraries. However, polyfills are also capable of providing new functionalities. For example, a polyfill can be used to support ES6-based features in browsers that fundamentally don’t.
BrowserStack offers 2000+ real browsers and devices for manual and automated website testing. Testers can simply sign up for free, pick the device-browser-OS combination they want, and start testing their website performance. It is easy enough to see what features do not render or function on which browsers – and then backtrack to the JS code to identify and resolve the issue. Since BrowserStack only provides real browsers and devices, testers do not have to deal with the limitations of emulators and simulators. They get instant feedback on a website’s UX as it appears in the real world