Differentiate requests from MobileSafari vs. SafariViewController

Question

For a web application, is there a way (either client- or server-side) to differentiate requests coming from MobileSafari vs. SafariViewController (embedded in any 3rd party app)?

I need this because SafariViewController doesn't support universal links and smart app banners so I'd like to show an appropriate alternative in the content.

I've checked the HTTP User-Agent and it's exactly the same for both.

Norward

What does this fiddle demo report: jsfiddle.net/ThinkingStiff/6qrbn – Curtin

@LGSon 'browser' for both. – Norward

Ok, have you tested the navigator objects properties and if they differ between the two? ... (I can't test as I don' have either browser/device) – Curtin

Here are 2 more links that might help, 1: ios9-universal-links-does-not-work ....2: css-hack-for-safari – Curtin

I've checked the CSS test page browserstrangeness.bitbucket.org/css_hacks.html#webkit and the JS test page cyscape.com/showbrow.asp?bhcp=1 and they yield the exact same output. Only the HeightAvail property differs (1649 in TweetBot SafariVC, 1487 in MobileSafari). But I assume this property might even change from one SafariVC instance to another. – Norward

I spend some time try find how to detect SafariViewController but came up short. Can't you test the link result somehow and see if what should be in there is present? – Curtin

The smart app banner and the small banner for universal links aren't part of the DOM. Safari seems to render them natively, independent of the HTML. So I don't see a way how to find out if they're shown or not. – Norward

Maybe testing for URL schema? stephenradford.me/… – Deerskin

@Deerskin I believe I can only open a URL directly but not really test if it can open it (the trick is to open a second URL with a timeout if the first open didn't succeed). However, in that regard, Safari and SafariVC seem to behave identically, too. Of course I could ditch smart app banners and Universal Links completely and try to open the URL scheme directly in order to open in-app. However I don't really like this approach and prefer to let the user decide where to open it. – Norward

I made this for test, any of these props. that can be useful? ... jsfiddle.net/LGSon/L4bu8smL – Curtin

@LGSon all properties are equal. :( – Norward

Answer 1

There's no official/"production ready" way to detect the difference. However, there are some obscure system font differences. For example, in SFSafariViewController there is a system font, .Helvetica LT MM. It might break in a future iOS release though.

Here's some code to detect that system font:

https://gist.github.com/aeharding/08eaafbb7742f78ede9b8d2f5d096354

Gayegayel

Answer 2

Instead of testing for the specific client, you should test for functionality. Check out Modernizr https://modernizr.com/download?setclasses

If you ask the question that way "How do I detect for universal links and smart app banners" that will be a more useful question for modern web app development than sniffing specific clients.

Fleshings

With respect, this is not an answer to my question. You can debate the usefulness of a question by posting a comment (or even downvote a question) but an answer should actually solve the OP's question. – Norward