CODEWITHSUNDEEP
iosiphone-standalone-web-app
Ruslan Grebeniouk
Ruslan Grebeniouk

Reputation: 77

iOS Web App: Showing content only if the application is standalone

If a user visits my websites example, from Safari Mobile how could I place there a blank page that says "Add To Homescreen."? Once added it would show different content.

Upvotes: 5

Views: 6936

Answers (3)

neoswf
neoswf

Reputation: 4760

Slight slight different code, based on @ThinkingStiff solution, and this other question on this Post, to support IOS7 detection to provide CSS interface to add more padding-top in case of transparent app title.

isIOS7 = function() {
  return navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i);
};
isStandaloneAndIOS7 = function() {
  return isIOS7() && window.navigator.standalone;
};
if (isStandaloneAndIOS7()) {
  body = document.getElementsByTagName("body")[0];
  body.className = body.className + " standalone";
}

Upvotes: 0

ThinkingStiff
ThinkingStiff

Reputation: 65361

You'll want to check two things. First, is it running on an iOS device? Second, is window.navigator.standalone == true?

window.navigator.standalone is primarily used by Webkit browsers to indicate the app is in fullscreen (or standalone) mode. Plenty of devices (like phones running Android), support this property, but don't have the option to 'Add to Homescreen' like iOS devices do, so you need to check both.

Demo: jsFiddle

Javascript:

function isIOS() {
    var userAgent = window.navigator.userAgent.toLowerCase();
    return /iphone|ipad|ipod/.test( userAgent );
};

function isStandalone() {
    return ( isIOS() && window.navigator.standalone );
};

window.onload = function () {
    if( isStandalone() || !isIOS() ) { //either ios+standalone or not ios
        //start app
    } else {
        //display add to homescreen page
    };
};

Upvotes: 16

rob mayoff
rob mayoff

Reputation: 385890

Check window.navigator.standalone.

Upvotes: 2

Related Questions