CODEWITHSUNDEEP
javascriptsafarisfsafariviewcontroller
petranaya
petranaya

Reputation: 769

How to detect if your site is loaded on SFSafariViewController

How can you tell using javascript if your site is being loaded in an SFSafariViewController, and not pure Safari? I looked at window.navigator.userAgent, but it outputs the same thing on both browsers.

Upvotes: 16

Views: 1923

Answers (2)

Manju S.J
Manju S.J

Reputation: 1

Detecting if your site is loaded in SFSafariViewController (used commonly in iOS apps for displaying web content) can be achieved by examining specific characteristics of the user agent string or by utilizing JavaScript to detect the environment.

Method 1: User Agent String

SFSafariViewController typically modifies the user agent string to indicate its presence. You can inspect this string to determine if your site is being loaded within this environment.

Here's a basic example of how you might do this:

function isSFSafariViewController() {
    var userAgent = navigator.userAgent;
    return /Safari/.test(userAgent) && /Version\/[\d\.]+/.test(userAgent) && !/CriOS/.test(userAgent) && !/FxiOS/.test(userAgent);
}

if (isSFSafariViewController()) {
    console.log("The site is loaded in SFSafariViewController");
} else {
    console.log("The site is not loaded in SFSafariViewController");
}

This function checks if the user agent string includes "Safari" and "Version", while ensuring it doesn't contain identifiers for Chrome (CriOS) or Firefox (FxiOS) on iOS.

Method 2: JavaScript Environment Detection

Another method involves detecting specific JavaScript properties that might indicate the use of SFSafariViewController. While less reliable than checking the user agent string, it can provide additional confirmation.

Here's an example of how to do this:

function isSFSafariViewController() {
    var standalone = window.navigator.standalone;
    var ua = window.navigator.userAgent.toLowerCase();
    var isSafari = ua.indexOf('safari') !== -1 && ua.indexOf('version') !== -1;
    var isSafariOnIOS = isSafari && (ua.indexOf('iphone') !== -1 || ua.indexOf('ipad') !== -1 || ua.indexOf('ipod') !== -1);
    var isSFSafariViewController = isSafariOnIOS && !standalone && window.self !== window.top;
    
    return isSFSafariViewController;
}

if (isSFSafariViewController()) {
    console.log("The site is loaded in SFSafariViewController");
} else {
    console.log("The site is not loaded in SFSafariViewController");
}

Combining Both Methods

For a more robust detection, you can combine both methods:

function isSFSafariViewController() {
    var userAgent = navigator.userAgent;
    var standalone = window.navigator.standalone;
    var ua = window.navigator.userAgent.toLowerCase();
    var isSafari = ua.indexOf('safari') !== -1 && ua.indexOf('version') !== -1;
    var isSafariOnIOS = isSafari && (ua.indexOf('iphone') !== -1 || ua.indexOf('ipad') !== -1 || ua.indexOf('ipod') !== -1);
    var isSFSafariViewControllerEnv = isSafariOnIOS && !standalone && window.self !== window.top;
    var isSFSafariViewControllerUA = /Safari/.test(userAgent) && /Version\/[\d\.]+/.test(userAgent) && !/CriOS/.test(userAgent) && !/FxiOS/.test(userAgent);

    return isSFSafariViewControllerEnv || isSFSafariViewControllerUA;
}

if (isSFSafariViewController()) {
    console.log("The site is loaded in SFSafariViewController");
} else {
    console.log("The site is not loaded in SFSafariViewController");
}

This combined approach should provide a reliable way to detect if your site is loaded in SFSafariViewController, helping you tailor the user experience accordingly.

Upvotes: -1

hector-j-rivas
hector-j-rivas

Reputation: 807

According to this Apple Developer thread they should be different; I'd also check iOS User Agents.

Upvotes: 0

Related Questions