0

Our company recently decided to stop support for iOS 12.3 and below. However a small fraction of users are still on older devices that do not support newer JavaScript operators or syntax.

In order to prevent our script from affecting these users we are looking for ways to stop our script from loading if iOS v12.3 or below is detected.

Our JS code is loaded onto client websites via script tags like so:

<script src="exampledomain.com/example.js"></script>

Our first idea was to detect the useragent like this post but there are some problems with this approach.

  • It is strongly advised against for several reasons outlined here

  • Detecting the user agent within our script means that it still loads and throws errors when iOS <12.3 encounters syntax it cannot handle.

  • Detecting the user agent using conditional javascript on our client websites before loading our script is a possibility but difficult to maintain and not ideal for our customers.

Another option is to point the src of our script element to a script that can detect the UA and serve different versions of our script. However our script is time sensitive and the additional time it takes to make 2 requests instead of 1 is something we would like to avoid.

Lastly it is also possible to detect iOS versions without using the useragent by specifically targetting features that are not supported. For example using the nullish coalescing operator (??) in a try catch statement could indicate that the device is below iOS 12.3. But this method also relies on running JavaScript directly on the client website or doing multiple requests.

I would like to know if there are alternative methods we have not considered. Thanks.

Thomas Ham
  • 1
  • 1
  • "_using the nullish coalescing operator (??) in a try catch statement_" fires an error as well, because `??` is a syntax error (when it's not supported), `try..catch` can handle runtime errors only. – Teemu Feb 24 '22 at 12:41
  • @ArchitGargi read that post before but the advice to use `navigator.userAgent` is regarded as bad practice. Specifically made this thread to look for alternatives. – Thomas Ham Feb 24 '22 at 14:09
  • Transpile your scripts, use ex. [Babel](https://babeljs.io/). – Teemu Feb 25 '22 at 05:59

1 Answers1

0

This code snipped detects iOS version, so you can manage the scripts from backend side:

function getIOSVersion() {
    const ua = navigator.userAgent;
    if (/(iPhone|iPod|iPad)/i.test(ua)) {
        return ua.match(/OS [\d_]+/i)[0].substr(3).split('_').map(n => parseInt(n));
    }
    return [0];
}

If you do not want to use UserAgent you can use the information of the platform the browser is compiled:

function getIOSVersion() {
    const ua = navigator.platform;
    if (/(iPhone|iPod|iPad)/i.test(ua)) {
        return ua.match(/OS [\d_]+/i)[0].substr(3).split('_').map(n => parseInt(n));
    }
    return [0];

}

Diego Jiménez
  • 1,398
  • 1
  • 15
  • 26
  • True, I wrote something very similar based on [this post](https://stackoverflow.com/questions/8348139/detect-ios-version-less-than-5-with-javascript). But as I explained it's considered bad practice to use `navigator.userAgent` so I want to explore alternatives. – Thomas Ham Feb 24 '22 at 14:05
  • You can use platform instead userAgent too. – Diego Jiménez Feb 24 '22 at 14:33