January 19, 2010

Detect if iPhone web app was launched from home screen

Following on from my 24 Countdown Clock web app, I’ve been working on more feature-rich iPhone web application, which will hopefully be launched later on this week(!). For the best experience I’m trying to encourage users to add the app to their home screen. This allows them to launch it from a friendly icon on their home screen and also strips away the Safari browser elements, such as the address bar, navigation bar, etc.

I wanted to display a gentle reminder to users who hadn’t launched the app from their home screen, but I also didn’t want to intrude on users who already had done this.

Reading through Apple’s Safari Reference Library again, I came across a snippet I’d missed the first time around.

window.navigator.standalone

This returns a boolean true or false depending on the outcome, which can be translated into a simple code example:

if (window.navigator.standalone) {
   alert ('Thanks for launching this app your home screen')
} else {
   alert('Add this app to your home screen for the best experience')
}

You could modify the example to show/hide a friendlier message, or something completely different!

  1. Hallor May 13, 2010

    This is exactly what I was looking for! Thank you!

  2. Kevin June 21, 2010

    I want to repeat Hallor’s thanks, this is exactly what I was after, and much easier to find than in Apple’s documentation (I wanted to to change the layout based on the absence of navigation bar).

Leave a comment