CODEWITHSUNDEEP
javascriptreactjssafariprogressive-web-apps
Pingolin
Pingolin

Reputation: 3417

Add to Home screen (A2HS) feature detection (no user agent sniffing)

I have a PWA where Android users are prompted to Add the PWA to their home screen, but I would also like to show a tooltip for Safari users on iOS showing how to add the PWA to their Home screen since it's not a supported feature for them.

I was thinking about using feature detection but I can't find a way to do it, something like:

if ("a2hs" in navigator) {
  // Do something for browsers supporting A2HS feature
} else {
  // Show the tooltip if the browser does not support A2HS
}

I also thought I could use something like this:

const isIos = () => {
  return window.navigator.vendor === 'Apple Computer, Inc.';
};

but this is also returning true for users of Chrome on iOS :(

Any idea how I can detect if a user is using Safari on iOS?

Note: I also want to avoid using user agent sniffing. I think I read almost all topics related to this subject on SO but so far I couldn't find any solution not using user agent sniffing.

Upvotes: 0

Views: 1085

Answers (1)

epos_jk
epos_jk

Reputation: 329

a partial solution:

if('BeforeInstallPromptEvent' in window)
    alert('Chrome-style PWA install experience supported!');
if('standalone' in navigator) // only available on iOS - but also on alternative browsers on iOS without Add-to-Homescreen support
    alert('iOS Safari-style PWA Add-to-Homescreen maybe supported!');

Open problems:

  • avoid false positives on iOS - if you could accept using the user agent for that, you could use navigator.userAgent.match(/(iOS|OPT|Brave|GSA|DuckDuckGo|Snapchat)\//) to detect most alternative browsers; For explanation: iOS in the regex should detect CriOS|FxiOS|EdgiOS|OPiOS (Chrome/Firefox/Edge/Opera mini); Does anbody have a way to detect alternative browsers on iOS without using the user agent?
  • it does not detect Firefox on Android; and I don't know if other browsers based on Firefox for Android support PWAs (e.g. QuantMobile, PrivacyWall, Fennec, KAIOS - all tokens that appear together with Firefox and Android in the user agent string)

Addition (untested & unreliable): I did some more research:

  • A sure sign that you are in a webview on iOS is (or was?) that navigator.mediaDevices.getUserMedia or maybe navigator.mediaDevices is undefined. But I also read that Apple implemented it some months ago - so there will be webviews for which this isn't true.
  • Another hint might that if navigator.doNotTrack is undefined, it could mean that you are in a webview (or that Apple decided to remove this deprecated property from Safari...)

Upvotes: 1

Related Questions