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.
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:
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?Addition (untested & unreliable): I did some more research:
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.navigator.doNotTrack is undefined, it could mean that you are in a webview (or that Apple decided to remove this deprecated property from Safari...)