Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

We have our main site at:

http://mysite.com

which we don't want to alter. Then we have our web clip app at:

http://mysite.com/app/

If someone visits the app URL in normal Safari then the Safari UI will still display. But if the user adds the app URL to their home screen, and then they tap that icon they will launch the app URL without the Safari UI as intended.

My question is how do you go about getting the user to use the web clip app from their home screen when they start from mysite.com? What I'm thinking is that we have a link on mysite.com that points to mysite.com/app/. Then when they click that /app/ link they'll go to the app but it won't be in "app mode". Can I detect that it's not in app mode and display a message like "add this page to your home screen to use the app"? And then when they do visit in app mode obviously just let the app run.

share|improve this question
add comment

closed as off topic by Kilian Foth, Glenn Nelson, MichaelT, Martijn Pieters, Mike Brown Mar 4 '13 at 15:29

Questions on Programmers Stack Exchange are expected to relate to software development within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer

Apple's Safari Web Content Guide has a lot of useful information, as well as the Safari HTML Reference.

In Javascript you can check if it is an open as a WebApp:

if (window.navigator.standalone) {
    // Code if open as WebApp
} else {
    // Normal iOS Safari
}

To tell Safari that it is WebApp capable, you have to set:

<meta name="apple-mobile-web-app-capable" content="yes">

For more information on WebApp configuration take a look at Creating Compatible Web Content, Configuring the Viewport, and Configuring Web Applications.


So, to do what you want to do, have something like so:

<div id="nonapp">
    <p>This is telling you to add to home screen!</p>
</div>
<div id="app" style="display: none;">
    <p>This is telling you your content!</p>
</div>
<script type="text/javascript">
if (window.navigator.standalone) {
    document.getElementById("nonapp").style.display = "none";
    document.getElementById("app").style.display = "block";
}
</script>
share|improve this answer
    
Yes I was already thinking to do that on the front-end with Javascript. Is there a way to detect it on the back-end though? –  Ryan Nov 6 '12 at 2:20
    
You could have the iPhone send the server a signal, and the server dishes out the correct code, which is document.write()ed onto the page. –  question Nov 6 '12 at 2:53
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.