How to detect iOS 13 on JavaScript?

Question

I use this function to detect iOS

export function isiOS() {
  return navigator.userAgent.match(/ipad|iphone/i);
}

is there any way to make it detected iOS13+? thanks

Why do I need it? usually, iOS safari can't download files therefore to make image downloadable I should render it as

<img src={qrImage} alt="creating qr-key..." />

however on Android/PC and pretty much everywhere else it's possible to do it directly via

<a href={qrImage} download="filename.png">
    <img src={qrImage} alt="qr code" />
</a>

so user just press image and download it. Turned on on iOS13 now second option works while first one doesn't anymore.

Solution 1

I would like to advice you against detecting operating system or browser from user agent, since they are susceptible to change more than an API for that does, till a reliable stable standard API lands. I have no idea about when this second part will happen.

However, I can suggest to detect feature instead if in this case it is applicable to you.

You can check if the anchor html element supports download attribute:

"download" in document.createElement("a") // true in supporting browsers false otherwise

That way you can display the appropriate html markup depending on the output for each case. Something like that may help:

function doesAnchorSupportDownload() {
  return "download" in document.createElement("a")
}
// or in a more generalized way:
function doesSupport(element, attribute) {
  return attribute in document.createElement(element)
}

document.addEventListener("DOMContentLoaded", event => {
  if (doesAnchorSupportDownload()) {
    anchor.setAttribute("display", "inline"); // your anchor with download element. originally display was none. can also be set to another value other than none.
  } else {
    image.setAttribute("display", "inline"); // your alone image element.  originally display was none. can also be set to another value other than none.
  }
});

For example, I use following to detect if I am on an ar quick look supporting browser on iOS:

function doesSupportAnchorRelAR() {
  return document.createElement("a").relList.supports("ar");
}

You can also use techniques documented below: http://diveinto.html5doctor.com/detect.html#techniques

Solution 2

See this Link .

$(document).ready(function() {
    function iOSversion() {
        if (/iP(hone|od|ad)/.test(navigator.platform)) {
            var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
            return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
        }
    }

    ver = iOSversion();

    if (ver[0] >= 13) {
        alert('This is running iOS '+ver);
    }
});

Solution 3

You can detect iOS 13 on iPhone but in iPad OS 13 navigator.platform comes as MacIntel. So it is not possible to get iPad identified using below code, but it works perfectly on iPhone.

    if (/iP(hone|od|ad)/.test(navigator.platform)) {
        var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
        var version = [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
}

When user asks for mobile website using the browser navigator.platform returns as iPad and works perfectly.

Comments

[Madusanka]

Check my other question for iPad OS 13 detection (How to detect iPad and iPad OS version in iOS 13 and Up? - stackoverflow.com/questions/57765958/… )

[lebed2045]

would the command document.createElement("a") pollute the DOM? especially if it's called many times. Is there a way to do pure function?

[sçuçu]

Probably not because it is not appended anywhere. If appended I would remove it as well.

[Justin Putney]

navigator.platform for iOS 13 is "MacIntel" for all devices, so this code would fail to detect iOS 13.

[sçuçu]

Also it is possible to create a DocumentFragment and work inside it, but I am not sure I would need to check the DOM API if I would further work on that.

[sçuçu]

A bit more extreme approach for not even creating a test element could be that defining the functions with an element parameter and inside make the test with that element itself, preferably without mutating it, then decide whether to make the element visible or not, or render, remove from DOM and attach the aleternative.

[Greg Perham]

These kinds of answers are unhelpful when confronting bugs in particular browser versions (ahem, Mobile Safari). Certain CSS animations are buggy in iOS 12, but fixed in iOS 13. No way to use feature detection for that.

[sçuçu]

My idea was for feature detection, not bug detection of any kind. Programmer expects a feature to be not buggy. If it is implemented correctly by the vendor of feature or not is another story. A previously correct implementation in a major version can later be buggy. It is still a good idea to depend on feature detection rather than version detection if what developer wants to detect is a feature but not a version. If one, for example, wants to show a thing in a particular version of a platform like telling them to upgrade etc., then yes a version detection is definitely what one needs.