• 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: Steve
    • Posted on: 2012/03/13
    • At: 16:53

    I’m having an issue where after I’ve installed the web icon, then I return, it prompts me to re-install. I would prefer to never show the “add to home screen” once the the icon has been installed.

    I have added the following to the header

    but I’m still getting ask to install the icon.

    help is greatly appreciated. Fantastic script by the way.

    Reply
    • Author: James
    • Posted on: 2012/03/18
    • At: 03:30

    If the app hides the url bar then positioning ends up being wrong. For example if the following code is used.

    setTimeout(function() { window.scrollTo(0, 1) }, 0);

    Reply
    • prevent the script to autoload and fire it manually only when the URL bar is hidden. it should word.

      Reply
        • Author: James
        • Posted on: 2012/03/19
        • At: 05:48

        Seems to only work about 50% of the time.

        • Author: Joseph
        • Posted on: 2012/04/05
        • At: 23:19

        Thanks for the code, very useful! Do you have any further information on how to solve the minor issue with hiding the address bar? I’m pretty new to .js so any guidance is much appreciated

      • Set the autoload to false. Then add an onload event and place the addToHome.show() function inside a 1000ms timeout:

        function loaded() {
          window.scrollTo(0,1);
        
          setTimeout(function () {
             addToHome.show();
          }, 1000);
        }
    • Author: d3javu
    • Posted on: 2012/03/19
    • At: 14:24

    I was using the earlier version with success. HOWEVER, when using v2.0 I notice this problem:
    – the icon (add to home screen- the box with arrow) does not show in the bubble.
    Feel free to look at my site.

    Reply
      • Author: Eilev
      • Posted on: 2012/03/28
      • At: 09:07

      Same problem here.. any solution?

      Reply
        • Author: Eilev
        • Posted on: 2012/03/28
        • At: 09:11

        the apple-touch-ico does not show up either, it is configured to..

    • it seems to work on my iPhone…

      Reply
        • Author: P3N
        • Posted on: 2012/05/10
        • At: 20:45

        I had the same issue until i changed to the new css file ;-)

    • Author: d3javu
    • Posted on: 2012/03/19
    • At: 14:31

    Never mind! It suddenly started working after I burned some incense. Phew!
    Thanks for the nice script.

    Reply
    • Author: J-J
    • Posted on: 2012/03/19
    • At: 17:32

    Is there any way to adjust the display frequency of the bubble with something other than minutes? Could you display it, say, every 15 (or X number of) page loads?

    Reply
    • Author: Paul
    • Posted on: 2012/03/20
    • At: 03:34

    I have added a ‘add to home screen’ code to my standard website (its not optimised for an iphone) to show message about downloading my iphone app. There is no need to do an iphone optimised site (for my website) but I do like the idea of them seeing this baloon offering to download the app from the store.

    The problem is that it shows tiny and practically impossible to see. Is there any way to make it full size and not reflect on the size of my page?

    Reply
    • you can change the CSS styles as you like

      Reply
    • Author: titi
    • Posted on: 2012/03/21
    • At: 14:03

    Hi there,

    Any news about Android support?

    Thanks for this script :p

    Reply
    • Author: Liam
    • Posted on: 2012/03/23
    • At: 13:18

    Where should i put this if i want it to work with a wordpress theme?

    Reply
    • in the header.php file should work.

      Reply
      • Author: Jonas
      • Posted on: 2012/04/18
      • At: 10:38

      add the following to your header.php and the files in the js folder.

      <link rel="stylesheet" href="/js/add2home.css" type="text/css" media="screen" />

      Reply
        • Author: Jonas
        • Posted on: 2012/04/18
        • At: 10:39

        adding code to this blog doesn’t work…

      • Author: Mark Freebs
      • Posted on: 2012/05/16
      • At: 14:43

      I cannot seem to get it to work in wordpress, I have tried it with a few different themes, but it won’t work. I have copied the css and js files into their own directory, within the theme, but still no joy.

      Am I doing something wrong.

      Reply
        • Author: Mark Freebs
        • Posted on: 2012/05/16
        • At: 17:59

        never mind, I got it to work eventually. had to use
        <link rel="stylesheet" type="text/css" href="/js/add2home.css”>

        <script type="text/javascript" src="/js/add2home.js”>

        • Author: Mark Freebs
        • Posted on: 2012/05/16
        • At: 18:00

        <link rel="stylesheet" type="text/css" href="/js/add2home.css”>
        <script type="text/javascript" src="/js/add2home.js”>

        • Author: Joeyz
        • Posted on: 2012/07/06
        • At: 16:47

        looks like comments is stripping the php out,

        <script type="application/javascript" src="/js/add2home.js" charset="utf-8">

    • Author: Puzzled
    • Posted on: 2012/03/23
    • At: 15:29

    Great work!… but… the message keeps showing for every page of the site even after added to the home screen… does that happen only to me? Am I doing something wrong here?
    Cheers

    Reply
      • Author: P3N
      • Posted on: 2012/05/10
      • At: 20:56

      Only load the script if the page is not in webapp mode, then it will not load at all when the page is started from homescreen. Example of javascript:
      if ((\”standalone\” in window.navigator) && !window.navigator.standalone){
      document.write(”);
      document.write(”);
      document.write(‘var addToHomeConfig = {‘);
      document.write(‘ animationIn: \”bubble\”,’);
      document.write(‘ animationOut: \”drop\”,’);
      document.write(‘ lifespan:10000,’);
      document.write(‘ expire:7200,’);
      document.write(‘ touchIcon:true,’);
      document.write(‘ returningVisitor:true,’);
      document.write(‘};’);
      document.write(”);
      document.write(”);
      }

      Reply
        • Author: P3N
        • Posted on: 2012/05/10
        • At: 21:00

        Sorry, it could not be pasted here. Check it on pastebin –> http://pastebin.com/bDJ4iLf5
        Sorry for the mess Matteo, and thanks for another great script, love it :-)

  • Is this ok if i do the updates or i must to reinstall it each time something new update?

    Reply
    • reinstall? just replace the .js file

      Reply
    • Author: glepage
    • Posted on: 2012/03/23
    • At: 22:13

    I just want to simply use a PNG file to drop down. Nothing else. What code should I use for that?

    Reply
    • Author: Magor34
    • Posted on: 2012/03/25
    • At: 18:46

    Love the script dude.

    I just wanna know if theres an iPad update coming, even tho I’m using an old iPad (1st gen) the popup seems a bit off. It’s right on the edge of the screen when using both iPhone 114×114 Retina icon and standard iPad 58×58 icon. It looks awesome on the iPhone but looks awful on the iPad.

    Will this be fixed in the next update or do I need to find a workaround?

    Many Thanks!

    Reply
    • I’ll soon check this on new iPad. Thanks for your report.

      Reply
    • Author: Alex
    • Posted on: 2012/03/27
    • At: 16:27

    What is the best way to determine whether the balloon is currently displayed?

    I want to use addToHome.close() to make sure the balloon is hidden when the user takes certain actions. But it seems that if the balloon is not displayed, calling addToHome.close() generates an error.

    TypeError: Cannot call method ‘querySelector’ of undefined”

    I assume it’s just because close() should only be called on an open balloon. Or am I perhaps doing something else wrong?

    That question aside, this plugin is working great for me.
    Thanks!

    Reply
    • I may add a check to prevent the JS error. thanks for pointing that out

      Reply
    • Author: KH
    • Posted on: 2012/03/28
    • At: 12:59

    Hi there,

    this is a great script!!!
    Works perfect!
    I’ll let it run for a while and than donate a bit – for sure!

    Greetings, KH

    Reply
    • Author: juro
    • Posted on: 2012/03/30
    • At: 11:28

    Hi,

    this is a great script, for all -)

    Reply
    • Author: Chris
    • Posted on: 2012/03/30
    • At: 15:58

    Very nice plugin, thanks alot! So easy :)

    Reply
    • Author: Bernhard
    • Posted on: 2012/04/01
    • At: 15:22

    Wonderfull script. Very easy to integrate and very ‘powerful’ too. Thanks. Because of this it’s a pleasure to show a little financial support.

    Reply
    • Author: Tim
    • Posted on: 2012/04/03
    • At: 10:26

    Hi, I am going to sounds like an amateur here, but where do I need to install the script – ie. I get where to insert the code in the page, but do I need to also upload the javascript file onto the host server and if so where should I put it? And how should I nominate the path in the code?

    Reply
    • the naming it’s up to you. if –for instance– you upload the script to your server under the addtohome directory, then link to the files like so:
      <link rel="stylesheet" href="/addtohome/add2home.css">
      <script type="application/javascript" src="/addtohome/add2home.js"></script>

      Reply
        • Author: Tim
        • Posted on: 2012/04/04
        • At: 03:00

        ok, thanks.
        The script file downloads as a zip file. Do I need to extract all the files from the zip file first before uploading it to the server? Also, do all the files in the zip file need to be uploaded or if not, which is the file to upload?

    • Author: Lutz
    • Posted on: 2012/04/12
    • At: 17:19

    Hi there and thanks for this great script.
    Is there a possibility to open such a little box when loading which opens a or .html as popup and closing as well?

    Reply
    • Author: Mike
    • Posted on: 2012/04/13
    • At: 09:20

    Doesn’t resize properly on iPhone. Very small hard to read. Is there a fix for this? iOS5 problem maybe?

    Reply
    • Author: Dominic
    • Posted on: 2012/04/13
    • At: 14:15

    I would like it more if it would display on the whole Screen..
    Like a “big” Message.

    If you have a big site, it’s just very little.

    Can you help me?

    Reply
    • Author: Luis
    • Posted on: 2012/04/16
    • At: 13:47

    There seems to be a problem with localStorage.setItem, i think it’s a security problem, maybe only iOS5, so it’s preventing the X (close), returnungvisitor and expire functionality to work correctly.

    Reply
    • Author: Nam Nguyen
    • Posted on: 2012/04/16
    • At: 17:09

    Great script!

    Reply
  • A million times thank you. This is a great script that works perfectly and has saved me loads of time.

    Thanks again. You rock.

    Reply
    • Author: Andrey
    • Posted on: 2012/04/17
    • At: 23:11

    To small on iphone. How can i do dialog box bigger?

    Reply
    • could you please test my online demo and verify if that dialog is actually too small? I suspect people having trouble with balloon size don’t use initial-scale:1

      Reply
  • Thank you this is what you look for
    Thank you very, very

    Reply
    • Author: HomeroMx
    • Posted on: 2012/04/20
    • At: 16:15

    Hi, good morning…

    This script is awesome, all settings tested and working perfect, but I have a little issue, after “add to home screen”, all my links open a new safari tab, this is my deb site:

    http://www.jomaeli.com/booksmart/

    Any ideas????

    Thanks a lot…

    HomeroMtz

    Reply
      • Author: HomeroMx
      • Posted on: 2012/04/20
      • At: 16:19

      jeje sorry… its “my dev” site… ;)

      Thanks again….

      Reply
      • Author: Miles M
      • Posted on: 2012/04/26
      • At: 06:13

      full-screen for just the home page and browser-bar windows thereafter is just the way iOS web apps are formatted

      Reply
    • Author: Beck
    • Posted on: 2012/04/20
    • At: 16:49

    Hi,

    Nice script but I cant get it to work with my page. It works on a blank page I’ve tried.

    Look at my source (minimal source): http://www.larmkonsult.se/kga/problem.html

    Seems to be problem with my other css/js. If I remove these the popup shows.

    Reply
      • Author: Beck
      • Posted on: 2012/04/20
      • At: 16:50

      Double right click to view source.

      Reply
    • Author: jakob
    • Posted on: 2012/04/23
    • At: 23:41

    Hey. I can implement this ( ADD TO HOME SCREEN) module into my mobile jomla website ..? If I can how do I do? .. I have tried a little back and forth but no luck .. I’m far from good at making websites. So I hope there’s someone who can help me … thanks in advance

    Reply
    • Author: Darren
    • Posted on: 2012/04/24
    • At: 12:19

    Hi

    On my iphone the website is too big and needs to be resized to fit the screen but the buble is the perfect size.

    We did have it working the opposite way where the website was resized to fit the screen but the bubble was too small, then we added the following code and it went the opposite way as stated above. Can you suggest a fix. FYI great feature.

    My website link: http://bit.ly/JneD6a

    <meta http-equiv="Content-Type" content="; charset=” />

    Reply
      • Author: Darren
      • Posted on: 2012/04/25
      • At: 01:25

      Hi – I took out this line of code and the website is resized to fit the screen but the bubble is too small. Any suggestions would be very much appreciated.

      Website (in Construction) http://bit.ly/JneD6a

      Line of code:

      Reply
  • Hi there, above all thanks a lot for you great script. However I am experiencing a little issue, the same as HomeroMx.

    Each page I open from the WebApp open in a new safari tab, any idea to stay in the full screen webapp ?

    Thanks in advance.

    Reply
      • Author: Miles M
      • Posted on: 2012/04/26
      • At: 06:11

      Pretty sure that the full-screen feature for just the home page and browser-bar windows thereafter is just the way iOS web apps are formatted.

      Reply
  • I can’t get my apple-touch-icon to show up either and the close button isn’t working. I followed the directions exactly. http://www.reblis.com/beta

    Reply
    • Author: Fernando Lisboa
    • Posted on: 2012/05/03
    • At: 02:36

    Hi, in my iphone does not appears this option, i need customize ?

    Reply
    • Author: John
    • Posted on: 2012/05/03
    • At: 06:32

    Hello, I want to donate to you but I REFUSE TO USE PAYPAL. Oh well, your loss. Moneybookers is great, so are PayMate. Offer something other than PayFuck, eh, I mean, PayPal, and I’ll be glad to donate 20 bucks!

    Reply
    • there’s flattr

      Reply
        • Author: John
        • Posted on: 2012/05/07
        • At: 16:52

        sorry, but i’m not going to sign up to something just for one donation. i’ve shared on facebook and twitter. i love this script – it used to work for me i know, but i have no ios devices to test on now so i’m just going on faith it’s working on my sites. i’ve tried testing in safari with the ua set to iphone or ipad under the developer menu but it doesn’t show. hope it’s working!

      • no problem, it’s the thought that counts ;)

    • Author: Stephen
    • Posted on: 2012/05/03
    • At: 15:53

    Is there no option to say: “once a user dismisses the bubble I don’t want to show it again” ?

    Reply
    • set “expire” to a very high number (eg: one year 525600)

      Reply
    • Author: Tim
    • Posted on: 2012/05/04
    • At: 03:03

    Great script Matteo. Works perfectly so far. Any idea on when Android support will be added? Days? Weeks? Months? no pressure haha keep up the good work!

    Reply
    • Author: Chris
    • Posted on: 2012/05/07
    • At: 00:11

    First of all, great script! I use it on multiple sites and works like a charm.
    However, I’ve added it on a new site of mine and the bubble keeps returning, even though I ‘install the webapp’. Any idea what could be wrong?

    Here’s the code (same for all my sites):
    var addToHomeConfig = {
    touchIcon: true
    };

    Thanks!

    Reply
    • Author: John
    • Posted on: 2012/05/07
    • At: 16:49

    does this work in safari when under developer settings the ua is set to an iphone or ipad? i’m trying to test like this and it just won’t work.

    Reply
  • Hello wehn i put this in the .html then the page are zommed? if I leave out the very small then the button

    Reply
    • Author: Cartman
    • Posted on: 2012/05/12
    • At: 03:13

    Best script ever!

    Reply
  • I cannot get this to work on my wordpress powered blog. I have unzipped and uploaded as is to the plugins folder and added the following in header:

    Reply
  • It wouldnt let me post the code so where it says path too I have used /wp-content/plugins/cubiq-add-to-homescreen-508e479/style/add2home.css AND /wp-content/plugins/cubiq-add-to-homescreen-508e479/src/add2home.js

    Reply
    • Author: D Murray
    • Posted on: 2012/05/14
    • At: 17:22

    Hi

    Thank you for the great script.

    I’m having a similar problem to Chris.
    I have set apple-mobile-web-app-capable to yes, but, even after adding my site to my homescreen, I still get the bubble appearing on every page. I hav ethe code below in my . Am I doing something wrong?

    Regards

    D

    Reply
    • post a link to your site

      Reply
        • Author: D Murray
        • Posted on: 2012/05/15
        • At: 09:51

        Hi Matteo

        I can’t post a link to my client site as I’d get into bother :)

        I did however upload your examples to a test server, which seems to be doing exactly the same thing on my iPhone 4:

        http://www.electriccheese.co.uk/mobile/examples/simple/

        When I add the link to the homescreen and then open Safari again and refresh the page, the bubble pops up again.

        I did just update iOS to 5.1.1 (9B206). Could that be anything to do with it? Or am I missing something here?

        Many thanks

        D

      • I’d say that it works on my iPhone

        • Author: D Murray
        • Posted on: 2012/05/15
        • At: 20:12

        Thnaks for looking Matteo.

        I just tested it on my partners iphone 4. I load the page, no bubble appears. I close the browser and re-open it, refresh the page and the bubble appears as expected. I then add the page to the homescreen. I then re-load safari and refresh the page and the bubble appears again.

        I’m out of options.

        Thanks again.

      • Please do like so:
        1) clear your browser cache in Safari preferences
        2) go to http://cubiq.org/dropbox/a2h/examples/simple/ and let me know if the problem persists

        Thanks

        • Author: D Murray
        • Posted on: 2012/05/17
        • At: 13:58

        Hi Matteo

        Sorry, should have said, I get the same results with and without the cache being cleared. I’m clearing the cache fully under settings.

        I just tried your link on my iPhone4 and iPad2 (both with latest update):
        http://cubiq.org/dropbox/a2h/examples/simple/
        and get the same result again. The bubble popus up after the link has been added to the homescreen.

        I only have access to 2 iphones and an iPad2 I’m afraid.

        Driving me potty.

        Many thanks for your help

        D

      • I totally need to see a video of this :) Really I cannot replicate on any of my devices. Please remember to completely kill the browser (remove it from background) before clearing the cache. Even better try to reboot your iphone.

        Matteo

        • Author: D Murray
        • Posted on: 2012/05/18
        • At: 11:53

        I’ll bob a link in an email to you…

    • Author: D Murray
    • Posted on: 2012/05/14
    • At: 17:23

    Doh, wouldn’t let me post my code either, but I set the web app to enabled etc. Should I add that before or after the call to the js and css?

    Thanks

    D

    Reply
    • Author: sissi
    • Posted on: 2012/05/20
    • At: 22:29

    I have the tool embedded on a page where there is also an iframe that loads google mapps.

    Somehow it’s using the url of the iframe rather than the url of the page itself as bookmark link…..any ideas why? thx :)

    Reply
    • Author: Pradeep
    • Posted on: 2012/05/21
    • At: 12:05

    We are using iPad. When we open our web site in Safari we have ‘Add to Home’ pop up. If we Add it to Home we get an icon on the iPad screen. If we close that session and again open it in Safari we again get ‘Add to Home’ pop up. How can we avoid that. We checked the same functionality for other site e.g. espn. For that site the ‘Add to Home’ pop up does not come back once it is added to screen on iPad. Is there any way to find out that whether this site is already added on the screen of the iPad?

    Reply
    • you can make an educated guess, but it’s not bulletproof. On ESPN they probably set a cookie if you come from the URL that shows the balloon (instead of simply espn.com).

      Reply
        • Author: Pradeep
        • Posted on: 2012/05/28
        • At: 17:08

        Hi Matteo. Thank you for reply. One more question, if we are able to add web app on the screen of iPad (with the help of javascript), then there should be a way to find which web apps are present on the iPad screen. Is there such kind of javascript/jquery to find out web apps on iPad screen.
        Thanks in advance.

      • Unfortunately there’s no such API

        • Author: Pradeep
        • Posted on: 2012/05/30
        • At: 12:29

        Hi Matteo, did not find reply button below your latest comment. So asking my question here. When we click ‘Add’ button from pop up to add app on iPad screen at that time which event/function is called? Can we handle/update that event/function? Please let me know as we require it urgently.
        Thanks in advance.

      • no action/event is triggered when you tap the “add to homescreen” button

    • Author: Anthony
    • Posted on: 2012/05/21
    • At: 12:13

    Hey, great script though it seems to have a problem with iOS 5.1.1 which causes the icon and splash screen to fail to load.

    Reply
    • Author: Daniel
    • Posted on: 2012/05/23
    • At: 14:55

    Hi Matteo, first of all thanks for the nice script.

    We have a problem with the following:

    The bubble opens on every page, because we are using a cms. But this is ok.

    Now if you add a page to the home screen, the bubble will not appear on this particular page, but on every other page.

    It would be nice if the script only added one particular page to the home screen (the homepage) and does not appear on every page after that.

    Is this possible or do we have to only include the script on the homepage and not on the following pages?

    Thank you!
    Daniel

    Reply
    • yes, include the script in the homepage only.

      Reply
        • Author: Daniel
        • Posted on: 2012/05/25
        • At: 12:31

        Thanks for your answer, of course this JS just points to an iPhone feature, so the url cannot be changed. Your answer is the solution we are looking into right now.

      • if you have a 1 page site, you have to call the script programmatically with addToHome.show()

  • I love this script! I would like to customize it so there are different apple-touch-icons for each college. Is that possible? I’ve tried adding another icon called apple-touch-iconcc.png, editing css and js file but it always uses the standard apple-touch-icon.png. Ideas?

    Reply
    • maybe you have caching issues? Remember to place just 1 touch icon per page per device and add a “scrambler” to the image name to destroy cache (eg: apple-touch-icon.png?v123)

      Reply
      • Where in the code would I tell the browser to use the other image? In js file? CSS file?

      • sorry don’t follow you. the icon is declared in the METAs

      • Yes, that answers my question. Thanks for your help.

    • Author: Stass
    • Posted on: 2012/05/27
    • At: 11:08

    «If the user intentionally closes the balloon, it won’t show up again for all the duration of that session.»

    How I can owerride this?

    Reply

/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>