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

Question

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.

Hyperventilation

Answer 1

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:

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
    };
};

Heaven

And in typescript ? – Pat

Answer 2

Check window.navigator.standalone.

Ericerica

Sorry, I do not know what you mean. – Hyperventilation

Answer 3

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";
}

Lacuna