• Posted on: Jan 23, 2011
  • Tag:
  • Reactions: 687

> Add to home screen

Add to home

Add To Homescreen (ATH) is a javascript widget that opens an overlaying message inviting the user to add the web site/application to the home screen. This was born mainly to support web-app-capable applications but extended to a more general purpose use case.

Support Development

Add To Homescreen is a free, open source javascript software. It is released under the MIT License which basically grants you complete freedom in usage for open source and commercial applications.

That being said the only way for me to subtract hours from my day work and keep implementing this script is through donations. If you find this widget useful and wish to support future development, please consider a donation.




Overview

The script opens an always-on-top message inviting the user to add the application to the home screen. This is currently supported on iOS and Mobile Chrome. While other devices have the ability to bookmark any website to the home screen, only iOS and Mobile Chrome have a straightforward way to do it. ATH would technically also work on Windows Phone (which has the equivalent Pin to Start option), but I’m not currently able to test it on that device. WinPhone support might be added in a future release if there will be enough interest.

ATH by default looks something like this

ath-preview

But appearance is customizable with plain old CSS.

The script is compatible with iOS 6+ and Chrome 31+. It would be possible to add iOS5 (and older) support, but considering the iOS7 penetration I decided to support the latest two releases only. If there’s really interest in older versions I might reintroduce <iOS5 support or you could use the previous version of ATH (which supports iOS3 and up).

Languages

The message changed in v3 so unfortunately all the languages supported in v2 are not available anymore. If you wish to help please send more translations!

Basic Usage

v3 API changed drastically (sorry about that) and it’s not a drop in replacement for v2. The good news is that v3 is aware of user sessions saved on previous ATH versions, so if the users have already seen the message, it won’t be displayed again.

The easiest way to use ATH is to link the script into your document HEAD and call the addToHomescreen() function as soon as possible. Eg:

<head>
<title>Add To Home</title>
...
<link rel="stylesheet" type="text/css" href="../../style/addtohomescreen.css">
<script src="../../src/addtohomescreen.js"></script>
<script>
addToHomescreen();
</script>
</head>

That’s all you need. ATH automatically hooks to the onload event, checks device compatibility, detects if the app is already in full screen mode and eventually pops up the message.

It is not strictly needed to place the script in the document HEAD (you can also place it at the end of your BODY), but ATH makes a series of checks that are better done sooner than later.

Options

ATH accepts one option parameter to customize the script behavior.

To change the start up delay for example you could use the startDelay option.

addToHomescreen({
   startDelay: 5
});

This would delay 5 seconds before showing the message.

Below the most common options.

  • modal: prevents further actions on the website until the message is closed.
  • mandatory: the website is not accessible until the user adds the application to the homescreen. This is useful mainly for web-app-capable applications that need full screen viewing to be accessed (eg: games).
  • skipFirstVisit: setting this to true prevents the message to appear the first time the user visits your website. It is highly recommended to enable this option!
  • startDelay: seconds to wait from page load before showing the message. Default: 1.
  • lifespan: seconds to wait before automatically close the message. Default: 15 (set to 0 to disable automatic removal).
  • displayPace: minutes before the message is shown again. By default it’s set to 1440, meaning that we will be showing the message only once per day.
  • maxDisplayCount: absolute maxium number of times the call out will be shown. (0 = no limit).
  • icon: display the touch icon in the pop up message. Default: true
  • message: you can provide your custom message if you don’t like the default.
  • onShow: custom function executed when the message is shown.
  • onAdd: custom function executed when the application is added to the homescreen. Please note that this is a guesstimate (see below).
  • detectHomescreen: ATH tries to detect the homescreen. Supported values are: false, true (=’hash’), ‘hash’, ‘queryString’, ‘smartURL’ (see below).
  • autostart: the message is not shown automatically and you have to trigger it programmatically.

Detect the homescreen

There’s no native event we could hook to to know when a user actually adds the page to the homescreen. That’s also the reason why this script has become so complicated despite the apparent simple task it has to accomplish.

ATH development started when Apple introduced the apple-mobile-web-app-capable meta tag and stand alone mode with it. When the webapp is in stand alone mode the window.navigator.standalone property is set to true and that’s the only 100% safe way to know if the app has been added to the homescreen… With some caveats (of course).

// set a web app capable website
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

Standalone mode is meant for web applications, not “standard” web sites. The webapp has to be designed with standalone mode in mind, for example links inside your fullscreen app will open in a new browser window hence your app navigation has to be handled with JS.

Also, as of this writing Chrome –despite support for mobile-web-app-capable– doesn’t fill the window.navigator.standalone property, making it an unreliable way to detect if the app has been added.

So, how can we detect if the app has been actually added to the home screen? ATH tries its best to help you in this hard task and the followings are your options.

  • Show the callout only once per user. This is the best, safest and most polite solution of all. Set the maxDisplayCount to 1 and the user will be presented with the nasty callout only one time, smartly circumventing the problem.
  • Build a standalone application. When possible try to use apple-mobile-web-app-capable.
  • Add a special token in the URL and have the user bookmark the tokenized address. ATH supports hash, query string or smart url tokens. Continue reading for details.

I strongly suggest to go with the first option and show the callout only once. That’s the safest solution, but if you want to be more aggressive you can take the “token” route.

First of all you have to choose where to place the token. ATH offers three options:

  • hash: http://www.example.com/#ath
  • query string: http://www.example.com/?ath=
  • smart url: http://www.example.com/ath/

As soon as the page is loaded ATH adds the token to the page URL (no worries, no reload will happen as we use history.replaceState). If the user adds the page to the homescreen the actual URL that will be saved contains the token. If the page already contains the token before ATH could add it, it means that (most likely) the page has been added to the homescreen.

Bear in mind that this is a guesstimate, there are some exceptions but the good news is that it should be pretty rare to have false positive, ie: it should never happen to see the popup after the app has been added. Instead it may happen to have ATH think that the app has been added even if it hasn’t.

Be careful when using the detectHomescreen option since it may interfere with your application especially if you already use #hash or history.replaceState for your navigation.

Optimal configuration

Do not annoy your users with frequent callouts the suggested setup is to show the message only once, the second time the user visits your website.

addToHomescreen({
   skipFirstVisit: true,
   maxDisplayCount: 1
});

The above config skips the first time the user comes to your site, so she has time to look around freely. The next time she will be greeted by the cheerful balloon and from that moment on she won’t be bothered again.

Debug mode

ATH v3 also introduces debug mode. By setting debug: true some of the preliminary checks are skipped and the message is shown on desktop browsers and unsupported devices as well.

You also have the addToHomescreen.removeSession() function in your tool belt, which clears the current session. This is very useful when testing various options and the callout seems not to be willing to show up again. This is common because ATH is very conservative, to avoid showing the message by mistake it tries to show it the less as possible.

Open the pop up programmatically

Of course you can bypass the automatic triggering and open the call out programmatically. To do so you have to set the autostart: false option.

var addtohome = addToHomescreen({
   autostart: false
});
addtohome.show();

addToHomescreen() it’s a kind of singleton and returns the instance to the real AddToHomescreen class. From there you have access to the show() method. Note that no checks are performed to verify if the DOM is ready, if you show the message programmatically that’s up to you.

show() also supports one boolean option. If you pass true the callout is shown no matter what overriding most of the preliminary tests.

localStorage variable name

The user session is stored in a localStorage variable called org.cubiq.addtohome by default. localStorage is domain based, so if you have multiple applications on the same domain ATH can’t understand which one you actually added to the homescreen.

You can have multiple instances of ATH on the same domain by setting a different appID for each installation. Eg:

addToHomescreen({
   appID: 'org.cubiq.myCoolApp'
});

IMPORTANT: once set do not change the appID! If you change the appID all users will see the callout again regardless if they already added the application to the home screen or not. Only exception is for standalone applications. They would keep working correctly anyway.

apple-mobile-web-app-title

From iOS6 you have a handy meta tag called apple-mobile-web-app-title that holds the name that will be displayed on the homescreen, otherwise the page title will be used. Since the app name is limited to 11 characters you may want to take advantage of this feature.

/Share the joy

/Reactions

    • Author: bstewart
    • Posted on: 2011/05/26
    • At: 15:25

    Any way to increase the size of the box (and fonts) on the iPhone? iPad size is good. GREAT SCRIPT!

    Reply
    • You can customize it in any way you like, just modify the css

      Reply
    • Author: dayna
    • Posted on: 2011/05/27
    • At: 20:27

    Do you know to do this for Android?

    Reply
    • Author: Carlos
    • Posted on: 2011/05/28
    • At: 13:23

    Superb script.. have just donated to say thanks!

    Reply
    • Author: Thumb
    • Posted on: 2011/05/29
    • At: 20:19

    i used this in a webapp (duh…) and i really liked it,
    i’ve put you on my credits page (1 out of 3 pages) so you’ll get visitors from me as well =D

    Reply
    • glad you liked it and thanks for your support

      Reply
    • Author: ccar
    • Posted on: 2011/05/30
    • At: 22:28

    Thank you.

    Reply
    • Author: bearlakeboarder
    • Posted on: 2011/06/08
    • At: 15:26

    Do you know of any way to get this working on Android? I’m working on a cross-platform web app… By the way, EXCELLENT SCRIPT! Thanks a lot man. It works flawlessly on my jQueryMobile site for iPhone and iPad (haven’t tested iPod, but I assume it’s the exact same). And it seems to be the only script of its kind as of 6/8/11.

    Reply
    • technically it might work on android, but as far as I know it’s not possible to “install” a webapp on android from the browser itself.

      Reply
  • Perfect! Absolutely bang on the money, gone are the days of having to explain how to install web apps. Love it

    Reply
    • Author: Mark
    • Posted on: 2011/06/29
    • At: 19:57

    This script works excellent on a couple sites I’m working on.

    I’ve modified the code a bit so instead of launching the load event on window.load, I launch it on a button press (on a help button instead)

    Basically only had to comment out the event listeners and make the method public.

    But it only seems to run once. If I press the button again it goes through the motions but doesn’t seem to show anything.

    Any ideas?

    Reply
      • Author: Mark
      • Posted on: 2011/06/29
      • At: 20:15

      Nevermind.
      I realized the element was being removed in transitionEnd.
      As soon as I commented that out, I can make it appear as many times as I like.

      Reply
      • Author: Jorge
      • Posted on: 2011/11/18
      • At: 04:45

      Hey Mark, could you post the lines you updated? I’m trying to do the same thing but I don’t know where exactly to tweak.

      Thanks in advance!

      Reply
    • Author: Roger
    • Posted on: 2011/06/30
    • At: 19:09

    Very cool script. Thank You

    Has anyone had an issue with ASP pages and the script? I tested the example and it works great under .html but when I change the extension to .asp I get the error. I changed this because most of my pages on my site are .asp

    Active Server Pages error ‘ASP 0138′
    Nested Script Block

    A script block cannot be placed inside another script block.

    Reply
    • Try this:
      document.write('<s' + 'cript type="application/javascript" src="../../src/add2home.js">&ls;\/s' + 'cript>');

      Reply
      • Author: Roger
      • Posted on: 2011/07/06
      • At: 19:11

      The code still did not work. A friend of mine said he has it working on an ASP page. I will check it out and post the results if needed. Thanks!

      Reply
    • Author: jay
    • Posted on: 2011/07/06
    • At: 08:01

    Great script!

    is ti possible to replace the word iPod with the word iTouch when it displays %device

    Reply
    • you have to replace it in the script core.

      Reply
    • Author: Ian
    • Posted on: 2011/07/07
    • At: 03:11

    This is awesome! Had it working great, think it still is but I must have worn out my number of uses, definitely not more than 100, maybe 5-10? But iterations:100 is still set, is that not what I think it is or did I miss something (not a js person, really)? Thanks!

    Reply
      • Author: Ian
      • Posted on: 2011/07/07
      • At: 06:00

      Seems to be ok if i leave it for a few min, gotta be patient!

      Reply
    • Author: jay
    • Posted on: 2011/07/09
    • At: 17:54

    @matteo

    i kinda figured thats where it would be… i dont know enough about javascript to do an if statement on the $device variable
    to display iTouch instead of iPod would you offer paid support to implement that change? if so how much?

    cheers

    jay

    Reply
    • replace
      nav.platform.split(‘ ‘)[0]
      with
      nav.platform.split(‘ ‘)[0].replace(/ipod/i, ‘iTouch’)

      Reply
    • Author: jay
    • Posted on: 2011/07/09
    • At: 17:56

    also how do you do the video screencast of your iphone – thats cool!

    thanks

    Reply
    • Author: Gaucho
    • Posted on: 2011/07/10
    • At: 19:09

    Great stuff!! It wasn’t working for me on a JQtouch webapp until I changed the following code in the add2home.js file:

    // take this existing line out:
    //document.body.appendChild(div);

    // and add the following with ‘home’
    // changed to whatever the first screen’s div ID is:
    document.all.home.appendChild(div);

    I’m guessing there may be a better way to do this… but this worked for me so I thought it may help others

    thanks again Cubiq – GREAT work!!

    Reply
      • Author: Jonah
      • Posted on: 2011/09/19
      • At: 00:22

      Thank you so much for this, Gaucho!! You really saved me. It wasn’t working and I was tearing my hair out until I found your post. Saved me so much time!!

      Reply
      • Author: RJ Auburn
      • Posted on: 2011/10/07
      • At: 20:14

      Hit the same issue with jQuery mobile (RC1). Made the hack as above and it works great.

      Reply
    • Author: jay
    • Posted on: 2011/07/11
    • At: 23:09

    awesome thanks on both instances!

    Reply
    • Author: Luca
    • Posted on: 2011/07/12
    • At: 14:19

    Ciao
    ho visto che sei italiano, una domanda: il tuo script mi sembra che non sia compatibile con jQuery Mobile, è vero o sbaglio io qualche cosa?

    Reply
    • Author: JIm
    • Posted on: 2011/07/13
    • At: 20:32

    how can I modify the code to only show the bubble message on the home page? I’ve tried adding

    if ($(‘body’).hasClass(‘front’)) {
    if (‘standalone’ in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion)) {
    var addToHomeConfig = {
    animationIn:’fade’, // Animation In
    animationOut:’fade’, // Animation Out
    lifespan:10000, // The popup lives 10 seconds
    expire:0, // The popup is shown only once every 2 minutes
    touchIcon:true
    };

    document.write(”);
    document.write(”);
    }
    }

    and also tried

    if (‘standalone’ in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion) && ($(‘body’).hasClass(‘front’)) {
    var addToHomeConfig = {
    animationIn:’fade’, // Animation In
    animationOut:’fade’, // Animation Out
    lifespan:10000, // The popup lives 10 seconds
    expire:0, // The popup is shown only once every 2 minutes
    touchIcon:true
    };

    document.write(”);
    document.write(”);
    }

    Neither worked. I also tried to use a PHP code if statement for front page, but that stops the popup from displaying too.

    Thanks so much for any help!!

    Reply
    • Author: Tom McKearney
    • Posted on: 2011/07/15
    • At: 17:01

    Is there a way to tell whether or not they have already done this? I don’t want to annoy the crap out of users who have already added it.

    Tom

    Reply
    • if they already added the app to the homescreen, they probably access it from the homescreen and if your app is in full screen mode the message is not shown.

      Reply
    • Author: JIm
    • Posted on: 2011/07/15
    • At: 19:23

    Thanks so much for all your time on this!

    Another issue I’m having is when the Safari Mobile address (header) bar gets hidden.

    It appears the calculation of the popup position gets calculated before the address bar is hidden. So, the address bar is visible for a moment, and then when it’s hidden the popup ends up 50 pixels or so above the Safari toolbar footer. It doesn’t seem to be a problem in the demo because the Safari address bar isn’t hidden.

    Any ideas on a way to fix this?

    Thanks for any help!

    Also, great blog post on iOS5 and fixed positioning…

    Reply
    • you may try by increasing the startDelay. Set it to 4000ms or whenever the url bar hiding is completed.

      Reply
        • Author: Jim
        • Posted on: 2011/07/18
        • At: 17:03

        Thanks for the response Matteo.

        I have actually added a full screen splash div behind the popup in the js file and I’m using both as a startup/splash page for users in Mobile Safari. Anyway, I removed the fade and startDelay so that the splash screen starts right away. Both fade after 10 seconds, or when the close button is clicked.

        In order to get the popup to display at bottom of screen after Safari address bar is hidden, I have also tried to use the bottom offset to push the popup down with a negative value, but a few times the popup ended up below the Safari footer.

        Thanks again for any help.

    • Author: Alan
    • Posted on: 2011/07/16
    • At: 02:18

    Have you tested this in conjunction with your iScroll script? I seem to be doing everything right (files load properly, and addToHomeClose is available), but I can’t seem to get it to show up. I’ve tried doing what Gaucho recommends above (replacing document.body.appendChild(div) with document.all.main.appendChild(div)) but it doesn’t seem to help. (I’m using iScroll on #main, with an inner element of #event-list).

    Any ideas?

    Reply
    • Author: Midhun
    • Posted on: 2011/07/18
    • At: 18:41

    I am not able to get the touchicon beside the message in the bubble. I have done the following:

    touchicon: true;

    I have added the following lines in my head tag:

    link rel=”apple-touch-icon” href=”../apple-touch-icon.png” type=”image/png”/
    link rel=”apple-touch-icon-precomposed” href=”../apple-touch-icon-precomposed.png”/
    link rel=”apple-touch-icon” sizes=”72×72″ href=”../apple-touch-icon-72×72.png” /
    link rel=”apple-touch-icon” sizes=”114×114″ href=”../apple-touch-icon-114×114.png” /

    but still I am not able to get the touchicon image in the bubble.

    Any ideas please??

    Thanks a lot in advance. :-)

    Reply
    • mmh maybe the relative path? try to use absolute path for your touch icons

      Reply
        • Author: Midhun
        • Posted on: 2011/07/25
        • At: 18:37

        I am working in asp.net mobile. I need to create a user control and only then it will work. I didnt know this before and though there was a mistake in script. My mistake. Works now perfectly.

        Great script though!

        One more thing. This bubble shows up even after user adds to home screen. Can the script be updated in such a way that, once user adds to home screen, the bubble should not show up.

        I dont know how feasible it is. But just wanted to know.

        Thanks!

      • It shouldn’t show up when the app has been added to the homescreen. If it does, I need a detailed report.

        • Author: Henry Jin
        • Posted on: 2011/07/28
        • At: 05:19

        Maybe visitor still uses Safari to see the bubble. If in Safari we can not detect if already added to home screen, the only solution will be cookie. Correct me if I am wrong.

      • remember to add apple-mobile-web-app-capable meta

      • Author: Midhun
      • Posted on: 2011/07/26
      • At: 16:57

      Report means… do you want a screencast or ..?

      What do you want the report to contain?

      Sorry for such dumb question, but I m new to asp.net development. :-)

      Thanks,
      Midhun.

      Reply
      • a link to your app would be the easiest thing. also what iOS device are you testing on?

        • Author: Midhun
        • Posted on: 2011/07/27
        • At: 18:14

        Its dev.mkitgo.com. I tested it using Iphone 3G. I made a change to the options.expire to 0. I tested it with option.expire to 1, but still, in all cases, the bubble shows up even after adding to home screen.

      • your site is not “web app capable”, you have to add

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

        to your page head

    • Author: Adam
    • Posted on: 2011/07/19
    • At: 11:08

    Is it possible to add a different message for users who are viewing through a Twitter app / QR reader app WebUIView so I can tell them “open this in Safari to add to homescreen” or something?

    Reply
    • this is a cool feature to add. I’ll put it in my to-do!

      Reply
    • Author: Frank
    • Posted on: 2011/07/23
    • At: 02:10

    It seems like, taht the “Add to home screen” Bubble will not resize for iphone users. It shows up very small. is there an option to change it, that it shows up in fit of iphone screen?

    thx

    Reply
    • don’t know what you mean. the balloon is the same size for all devices. if you want it bigger you can always alter the stylesheet

      Reply
    • Author: andrew
    • Posted on: 2011/07/26
    • At: 17:20

    Brilliant tutorial, very professional & works a treat!

    Reply
    • Author: Davis Gossage
    • Posted on: 2011/07/29
    • At: 03:32

    Just wanted to compliment you on how professional this looks. Also is there a maximum value for the ‘expire’ option? I was wanting to set it so it reminds users every week.

    Reply
    • there shouldn’t be any limit to the expire. You can freely set to one week or one year, or even 10 years probably.

      Reply
  • love this! – thanks, want to use it but have a small problem. when i use

    meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0″

    it scales up current site (posterous) weirdly so i have taken this line out, problem is the box is smaller and location arrow is wrong on the top now (ipod one is fine) – is there a simply way to adjust the arrow on the top for the ipad?

    i’m new to mobility sites but can hack things together ok. ;)

    Reply
    • Author: Ray
    • Posted on: 2011/07/31
    • At: 16:12

    on the main links

    can we have some type of sounds buttons?

    Reply
    • Author: Ray
    • Posted on: 2011/07/31
    • At: 16:12

    Can we have sounds with the buttons?

    Reply
    • Author: Davis Gossage
    • Posted on: 2011/07/31
    • At: 20:43

    One more question. I’m having trouble getting my custom webclip icon to show up. Is this because add2home.js controls this?

    Reply
    • no, add2home does not interfere with your custom icon.

      Reply
    • Author: nilkash
    • Posted on: 2011/08/03
    • At: 13:46

    hii this is nice feature…
    but ther is one problem i include it still showing balloon

    Reply
    • Author: nilkash
    • Posted on: 2011/08/03
    • At: 14:06

    hiiiiiiiii i include meta tag for prevent the balloon to appear but its not working….

    Reply
    • Author: Davis G
    • Posted on: 2011/08/04
    • At: 19:57

    I can’t run this web app in fullscreen mode because I need the back button to be available. If the app isnt running full screen, is it impossible to detect that the page has been added to the home screen? Thanks for your help, love the plugin.

    Reply
      • Author: Davis G
      • Posted on: 2011/08/04
      • At: 20:00

      YouTube does this somehow, and I read that you can use a get http request to get the context root? This is all over my head, but would you know how to make this work?

      Reply
      • Interesting. I’ll have a look at it.

    • Author: Jacob
    • Posted on: 2011/08/10
    • At: 19:11

    Didnt worked for me :(

    I changed the code for jqtouch like some suggestions here, but no way to make it work. Neither iPad, iPhone, nothing :(

    Reply
  • The script works perfectly, just one thing , I added my Homepage to the Home screen and once I revisit the Homepage I see the pop-up again, my site already has the meta tag :

    apple-mobile-web-app-capable

    is there something else I need to do in order for the pop-up to not display if the shortcut is already added to the homescreen?

    Reply
    • Author: Hiro
    • Posted on: 2011/08/14
    • At: 11:17

    Hi,
    It’s awesome!
    I was looking for something like this!!
    I donated you right now.

    Thanks a lot!

    Reply
    • arigatogozaimashita
      I’ll soon update the add2home script, so stick around! ;)

      Reply
    • Author: J. Pisano
    • Posted on: 2011/08/19
    • At: 20:30

    Wicked cool code. Awesome. Is there a way to pre-create a “button” on the website that would be used for the button that gets placed on the iPhone, etc.? That is I would like to create a button graphic to be used as the icon for the “app launch” on the iPhone so it would be automatically used instead of what is generated…

    Reply
    • Author: Alex
    • Posted on: 2011/08/22
    • At: 00:28

    For Jacob
    You need to put your deafults in add2home.css

    Reply
      • Author: Alex
      • Posted on: 2011/08/22
      • At: 00:31

      You can take all tools at top – GET THE SCRIPT
      and put each file to your web site root.

      Reply
    • Author: Tony M
    • Posted on: 2011/08/25
    • At: 15:52

    Hi Matteo. I absolutely love your script, buddy–thanks a million. It looks great on my blank test pages. The problem is I can’t get it to work on my full iOS web page, which utilizes iUI. iUI uses its own javascript code. My question is: Do you know of any way to make both iUI and Add to Home Screen work harmoniously? If you’re not familiar with iUI, do you have any tips with regards to how I may run multiple javascripts without conflict? Thanks.

    Reply
      • Author: Tony M
      • Posted on: 2011/08/25
      • At: 16:11

      Nevermind. I solved the problem. I changed some code (From: document.body.appendChild(div); To: document.documentElement.appendChild(div);), and now it works flawlessly! I’ll be donating later today. Thanks again!

      Reply
    • Author: Cupper
    • Posted on: 2011/09/02
    • At: 21:09

    Thank you, you saved me a lot of time. Your page was the first interesting one on Google and 15 minutes later I had it working on my webapp.

    Reply
  • Thanks a lot for the script! But for some reason apple-touch-icon stopped working. It was working for one day and the next day icon doesn’t appear anymore. The code is the same. Can you have a look? URL of the app: http://www.genkin.org/apps/ndfilters/ndfilters.html

    Reply
    • it works for me. Maybe a temporary server error?

      UPDATE: the second time you load the page the icon doesn’t appear. That’s really weird, I cannot replicate on my server. Can you try to use relative paths instead of absolute ones?

      Reply
      • Hi Matteo, thanks for checking! Actually I used relative path at first but when the next day the icon disappeared I started investigating and changed to absolute path – same thing. It does the same thing on my local dev server and remote “production” one. Just changed path back to relative one on my local dev server – doesn’t work. Really strange. Any thoughts?

      • below line 117 add: console.log(touchIcon); and see what it returns.

    • Author: craig
    • Posted on: 2011/09/04
    • At: 02:12

    Is there anyway to add a link to the pop up for going out to another page. I would like to use this pop up for directing people to another page so they can download my iPhone and Android apps.

    Reply
    • you can customize the message. have a look at the advanced features.

      Reply
    • Author: Markus
    • Posted on: 2011/09/10
    • At: 19:45

    Hello, can the script check if home screen icon is exist?

    Reply
  • hiiiiiiiii i include meta tag for prevent the balloon to appear once it is added to home screen but its not working…

    Reply
    • Author: Phil
    • Posted on: 2011/09/15
    • At: 14:39

    You write “iPhone does not support fixed positioned elements, so the message has to be relocated on each page scroll.”.
    On the app.ft.com site which uses a similar balloon, you can perfectly scroll the background while the balloon stays fixed. Maybe check how they do it.

    Nice work anyhow.

    Reply
    • They probably use a JS scroller such as iscroll

      Reply
    • Author: vladimir
    • Posted on: 2011/09/16
    • At: 15:29

    hi, i have some question about script… in JS i’m new… so, i will discribe my problem…
    I have imported this script in my ASP.NET project, when i trying to compile and run my project, Visual Studio throws me an error – http://screencast.com/t/ho8Chwo48Q
    can you help me solve this error?

    Reply
    • Author: Luca
    • Posted on: 2011/09/21
    • At: 18:13

    Ciao Matteo,
    Everything is going well, I have put my webapp on Ipad, when click on created icon my website start in fullscreen, but when I try to click a link inside my site Ipad switch to browser and not stay in app! Why? Have you already find a solution for this strange behaviour? Thanks in advance! Luca

    Reply
      • Author: vladimir
      • Posted on: 2011/09/21
      • At: 20:13

      you need to rewrite your links…
      i did in that case
      javascript

      function navigator_Go(url) {
          window.location.assign(url); // This technique is almost exactly the same as a full [a] page refresh, but it prevents Mobile Safari from jumping out of full-screen mode
      }
      

      right url

      ((HyperLink)sender).NavigateUrl = "javascript:navigator_Go('" + Request.ApplicationPath + "page.aspx" + "');"; //for Iphone
      
      Reply
    • Author: Max
    • Posted on: 2011/09/22
    • At: 03:02

    the script works perfectly on ipad only in the portrait mode, but when I rotate the ipad or run the app on the landscape mode, the balloon shifts to the right of the icon, and it does not stand exactly below the icon, is there anyway to solve this problem?

    Reply
    • cannot replicate, works perfectly on my ipad. perhaps there’re some conflicting elements in your installation? I should see a demo.

      Reply
        • Author: Max
        • Posted on: 2011/09/22
        • At: 18:33

        i have iPad 1 with IOS 4.3.5 version, the problem even exists when I run your simple example in the ipad simulator window, that’s why i don’t think it’s my app or ipad problem.

        • Author: Max
        • Posted on: 2011/09/22
        • At: 23:16

        the problem is solved! I just didn’t copy the Meta tag in your html page for keeping the page scale at 1.0, so it changed the page scale whenever i rotated the ipad, and therefore the balloon relocated in wrong spot.
        Thank you for the script

/Leave a reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>