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
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-capableapplications that need full screen viewing to be accessed (eg: games). - skipFirstVisit: setting this to
trueprevents 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
maxDisplayCountto 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.
Again some nice work from the webapp master.
Very nice, Matteo. I tried it, but the close button gives an ‘A’ instead of an ‘x’. Any idea where to change this?
Thank you.
this is extremely weird. have you changed the file encoding? Anyway it’s on line 115.
Same problem. There is a A instead of a x. I changed it to iso-8859-1 before and now change back it to utf-8, but same.
the file is not probably sent as UTF8 by the server
I’m having the same problem. and im unsure what should be on line 115. could you help me out a little
Thanks,
I had the same issue(I was actually using javascript files served by PHP, so it was likely an encoding issue), but I was able to avert the issue by simply replacing the x character with the unicode escape (u00D7).
Hi!
The same occurs for me. I see that Nate found a solution, but where in the javascript can I change the x character with the unicode escape (u00D7)? Its not on line 115 (as far as I can tell).
I have added script on http://portada.no/butikk/index.html
ps. Brilliant script btw!
Please download the latest version. should fix your problem.
Thanks Matteo!
Updated my site to utf-8 and the new script and now it works!
Hurray! 🙂
I’ve seen several sites using a script like this, and sometimes it gets activated when I’m viewing the page inside a third-party app (Twitter, Instapaper, etc.) So of course it’s pointing to a button that doesn’t exist. I wonder if there is a solution for that.
Good point. I’ll check it out.
Now fixed (v1.0)
Thank you, Matteo. My file encoding was not set to utf-8.
One of the nicest “Add to home screen” messages I’ve seen. Thanks for sharing.
Phenomenal! Really great code, just left a tip, thanks again!
Wow great very nice.
The localization is great.
Would be great if it would be possible to localize a whole webapp with a XML file. I found this:
http://www.samuelgarneau.com/lab/lang/
But i do not know how to implement it so that the language detection choose the right language.
Maybe that would be something for our “webapp master”
Thanks
hurray for Matteo, as his cube continues to spin, can’t to see what iScroll4 brings
Excellent work! Thanks so much!
I’m not much of a mobile developer, but from what I can see this effect looks money. I’ve also really enjoyed your blog. You should write about Web Dev more since you obviously have the touch.
I’m in awe. Thank you.
That’s awesome!!! Thank you very much. Do you guys know something like this for Android phones?
This is a great and very helpful addition to a website’s general user interaction — there’s just one little thing: Is there any chance to detect whether the web app was started from the home screen to then prevent the message to show up?
Because after a user saved the website to his home screen it might become a bit annoying to stil see the message at every visit.
Many thanks for your great effort and any further development.
fullscreen mode is already detected. no message is displayed if in fullscreen mode (and apple-mobile-web-app-capable meta is active of course).
I have this working fine on a couple of sites, but can’t seem to get it working with jQTouch – is this something you are aware of? Do I need to do anything differently? Many thanks.
Bit more info…debugging tells me that all the required functions are called, even calls the start of the drop animation, just nothing being displayed. Seems jQTouch prevents the div from showing?? Not sure. Can anybody shed any light on this?
maybe you need to higher the z-index? otherwise there must be some overlapping styles between my script and jqtouch.
Thanks for reply. I added:
div.style.zIndex=”999″;
But no difference. I’ll check through for style conflicts as well – if I find anything I’ll let you know!
No joy I’m afraid. Can’t see why it’s not displaying, zindex is set very high in css in any case, and no style conflicts from what I can see. Must be to do with jqtouch.js or a maybe a funny version of jquery.js ? Anyway, I’ll keep trying…
Well, I got it working. With jQTouch, I couldn’t find a way to have the div append to the body as it was always rying to do so before the page load, due to the way jqt works.
Anyway, I changed :
document.body.appendChild(div);
To:
document.documentElement.appendChild(div);
And it works fine! So looks like a workaround for those wishing to use this with jQTouch.
thanks for sharing!
Thanks a lot Matteo for this really good script.
Thanks Jon for the jQTouch fix.
Where i have to change this string? in my jquery.js file? on my php document? can you post you entire code please? Help me :-))
in the add2home.js script I presume. Search document.body.appendChild(div); and replace.
Thanks! This got it to work on iuI as well.
Hey, good solution. Just to report you that on ipad – atomic browser, works emulating iphone, but as ipad doesn’t work.
Using safari no problems.
bye
Great work, i’m using this on my new webapp and it works flawless!
Thanks alot. Anyway to have the bubble always appear in all browsers? ( easy to firebug and so on.. )
a.w.e.s.o.m.e
I’m very appreciated for your sharing!
Thousands of thanks.. = )
This is a brilliant piece of code!
I showed the results to my boss and he got seven kinds of excited and wants me to update the production code immediately.
This is great. Added it to one of my projects!
My first web app and it works great.
Do you know why once I have added it to my homescreen it loads fine and I get the homepage, but when I click a link within my website it opens up in Safari?
Do you know why it does this?
On iPhone 4 it works great, but what happens to iPod Touch 4? 🙁 I’ve testeted it on both devices and only iPhone 4 shows it.
It works on mine…
Well, Maybe that’s because I’ve implemented it on a dashcode web application ready project and something is messing up the code or even I’ve messed it up myself, I’ll double check it.
Thanks for the info.
Actually for me it is not showing up on the iPod Touch 4, even if I access the Demo link from the device it doesn’t work at all. Would it be because I’ve got it jailbroken? I mean this script checks the iOS version to show the correct icon etc. doesn’t it?
Any help is welcome.
Thanks in advance.
can you post your:
navigator.appVersion
and
navigator.platform
Probably jailbroken devices use a non-default string.
Thanks
Here´s a Finnish translation (there´s lot´s of iOS web-app productions going on in Finland right now):
Asenna tämä web-ohjelma työpöydällesi: Paina [ ] -kuvaketta ja valitse “Lisää kotivalikkoon”.
Thanks! I’ll add Finnish asap.
Where should I place the %device name in your translation? (I guess the share icon is the [ ])
Does anyone else using this on the iPhone have a problem with the latest version of the i-nigma barcode reader?
They’ve started opening the links in their own micro-browser, and I get a big fat NSURLErrorDomain error – 999 alert box over the loaded page, and the javascript execution breaks so the add2home bubble is never shown.
Been trying in vain to catch and suppress that error…
THANK YOU ! Another nice UI & very useful script. Strangely, the css-inline icon for the home screen button (the share icon, for iOS >=4.2) does not show up in my app on the iphone (https://grouptodo.com/) It does not show up in the XCode iphone/pad simulator either for me. Just shows a blank space there.
I know it must be something I am doing wrong (since your demo works) but I cannot figure out what it is – can someone see it ?
maybe an encoding error?
Ah silly mistake on my side. Nothing to do with your code (css minifier was eating the base64)
Does the script check if the website is already installed at the home screen? I ask, because the message is shown to me, even if I start the web app _from_ the home screen.
Do you have a jailbroken iphone? If so please post your
alert(navigator.appVersion)
and
alert(navigator.platform)
thanks!
Nice work! I’m a developer from Hong Kong and I’ve translated the Traditional Chinese and Simplified Chinese message for you:
Traditional Chinese (likely to be zh_TW): 您可以將此應用程式安裝到您的 %device 上。請按 %icon 然後點選加入主畫面螢幕。
Simplified Chinese (likely to be zh_CN): 您可以将此应用程式安装到您的 %device 上。请按 %icon 然后点选添加至主屏幕。
Keep up the good work.
cool, thanks! I’ll update the script asap
i love you man
You did a great job there, thanks for the script! (Now by default in all my mobile websites).
Is there a way to programmatically open the balloon in a button’s onclick event?
not without modifications to the code
Anyone know if there’s a way to get this to work with a wordpress/wptouch site? I’ve tried adding the code to the actual wordpress header, and the wptouch head file, but to no avail.
Sweet Feature, really good work!
Greetz
Is there anyway to stop the message coming up after someone has already ‘installed the web app’?
it shouldn’t come up if the user added the app to the homescreen. If it does, it’s a bug and I’d need more info
Yeah, still comes up on mine after having been added to homescreen, running iOS 4.3.3 on an iPhone 4 from a wordpress site with wptouch for the mobile interface.
I need to see the code.
Thank you for this nice bit of code, I’m using it on a mobile site I’ve made for the iPhone.
Very nice ! Wish I could do stuff like that 🙂
Thanx, this is a really nice ‘function’ for my webapp. But I have 1 problem: My apple-touch-icon won’t show in advanced mode 🙁
I’m having the same issue
I need to see the code. do you have an online demo?
I have use it here: http://phineasandferbwiki.webs.com/
This seems nice, but it keeps asking the question over and over. How do you tell when to stop asking?
expire:1440
asks it once per day.
expire:10080
only once per week.
quote: “If you don’t want to show the message at each and every page load, you can set a timeframe in minutes. The message will be shown only one time inside that timeframe. Default: 0 (=always show).”
Can’t get the icon to show.
http://mobilewebsolutions.us/bywave/add.htm
Any suggestions? Other than that, this is a sweeeet function. Very nice.
Please update to the latest version. Also it is crucial that the JS file is served as UTF8. That should be default on recent webservers but you can force it by adding the following to your .htaccess:
AddDefaultCharset utf-8
AddCharset utf-8 .html .css .js .xml .json .rss
If you don’t want to convert all your site to UTF8 you can serve just this script with the proper charset, like so:
<Files “add2home.js”>
AddDefaultCharset utf-8
</Files>
(Not tested but should work)
If working with .htaccess is not possible, you may want to remove all languages but English from the script.
I can’t. The download is .gz. I’d need a zip. The only version I can use is whatever you have setup for the demo. Can you update that to the latest version?
you can get it from github… anyway I’ve updated the demo
Hi
I’m a newbie and really just want to create a basic mobile webkit site
I’ve created this test subject to see If I’m any good but now want to add this to my site (Home Screen Bubble)
Can anyone help ?
http://82.45.130.37/atozcouriers/ftp/rb/kjh/001/testindex.html
HTML File @-http://www.2shared.com/document/XdlY_yPp/index1.html?(Password 21)
If any one could help that would be great
Thanks keirjohnharry
Hi there,
First of all, you make some cool stuff!
What I noticed is that when you save the webpage on your homepage and you open it again, the website is an web app. How cool is that! But when you click on a link in that web app, you get redirected to Safari, so that’s kinda weird though.
I’ve fixed the above problem of the Safari-Redirect in web-app but I was still wondering how to implement this to my site ?
http://82.45.130.37/atozcouriers/ftp/rb/kjh/001/testindex.html
Thanks keirjohnharry
How did you fixed it?
Thanks.
Could you implent query.cookie.js (http://plugins.jquery.com/node/1386/release), so when somebody clicks on the ‘x’ (or ‘don’t show anymore’ link), the popup won’t show anymore when you refresh the website.
the script uses localstorage that should be more stable than cookies. If you set the expire to 525600 you won’t see the message again for one year.
Can anyone help me with my above issue ?
I don’t even know how to put this into my website
Please Help
Any way to increase the size of the box (and fonts) on the iPhone? iPad size is good. GREAT SCRIPT!
You can customize it in any way you like, just modify the css
Do you know to do this for Android?
Superb script.. have just donated to say thanks!
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
glad you liked it and thanks for your support
Thank you.
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.
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.
Perfect! Absolutely bang on the money, gone are the days of having to explain how to install web apps. Love it
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?
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.
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!
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.
Try this:
document.write('<s' + 'cript type="application/javascript" src="../../src/add2home.js">&ls;/s' + 'cript>');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!
Great script!
is ti possible to replace the word iPod with the word iTouch when it displays %device
you have to replace it in the script core.
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!
Seems to be ok if i leave it for a few min, gotta be patient!
@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
replace
nav.platform.split(‘ ‘)[0]
with
nav.platform.split(‘ ‘)[0].replace(/ipod/i, ‘iTouch’)
also how do you do the video screencast of your iphone – thats cool!
thanks
I use iShow U HD
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!!
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!!
Hit the same issue with jQuery mobile (RC1). Made the hack as above and it works great.
awesome thanks on both instances!
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?
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!!
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
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.
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…
you may try by increasing the startDelay. Set it to 4000ms or whenever the url bar hiding is completed.
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.
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?
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. 🙂
mmh maybe the relative path? try to use absolute path for your touch icons
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.
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
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.
a link to your app would be the easiest thing. also what iOS device are you testing on?
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
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?
this is a cool feature to add. I’ll put it in my to-do!
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
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
Brilliant tutorial, very professional & works a treat!
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.
there shouldn’t be any limit to the expire. You can freely set to one week or one year, or even 10 years probably.
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. 😉
on the main links
can we have some type of sounds buttons?
Can we have sounds with the buttons?
One more question. I’m having trouble getting my custom webclip icon to show up. Is this because add2home.js controls this?
no, add2home does not interfere with your custom icon.
hii this is nice feature…
but ther is one problem i include it still showing balloon
hiiiiiiiii i include meta tag for prevent the balloon to appear but its not working….
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.
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?
Interesting. I’ll have a look at it.
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 🙁
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?
Hi,
It’s awesome!
I was looking for something like this!!
I donated you right now.
Thanks a lot!
arigatogozaimashita
I’ll soon update the add2home script, so stick around! 😉
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…
For Jacob
You need to put your deafults in add2home.css
You can take all tools at top – GET THE SCRIPT
and put each file to your web site root.
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.
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!
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.
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
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?
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.
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.
you can customize the message. have a look at the advanced features.
Hello, can the script check if home screen icon is exist?
hiiiiiiiii i include meta tag for prevent the balloon to appear once it is added to home screen but its not working…
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.
They probably use a JS scroller such as iscroll
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?
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
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 Iphonethe 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?
cannot replicate, works perfectly on my ipad. perhaps there’re some conflicting elements in your installation? I should see a demo.
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.
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
Hi,
I’m trying to dynamically include your script from within another javascript by injecting the script element into the document head. At the time I include the script, the load and domready events have already fired. I cannot get your script to work, because in this scenario the ready() and loaded() functions will never be called.
Any ideas?
this is a very interesting scenario. I’ll soon release v2.0 that should solve this issue.
Great script, have working fine, but is it possible to alter the default text that appears prior to saving link, or is it only available from the page Title meta?
Thanks for the great scripts and detailed instructions – you’re site is a goldmine for a start-up’s shoe string budget! Donation sent, site bookmarked and knowledge paid forward to others!
Tim, thanks for your support and good luck for your projects!
Fantastic piece of code! Very easy to install and set up.
Thanks for sharing.
iv been struggling to get this script working on any of my sites. can you help?
Can I load this script not on page load, but on button click? If it is posible, can you write short explatation? Thanks. 🙂
next version will
if a web page is added once to home page and the same page is loaded on safari will it show the addtohome window or not?
yes, it will. there’s no way to know if an user actually added the page to the homescreen.
Congratulations, great script. When is released the new version?
Most annoying script ever. How do you turn it off? I’m not going to fill my home screen up with web links. This script should be banned as it is invasive and extremely annoying.
Not Impresed!
Wow, I just put it on fyiAuto.com/hot-not?game=Y and added a quick call to our database to track users. I’ve have had over 100 this morning click the add to home screen button. Amazing results. Thank you!
Is there any method to force the user to do the “Add to Home Screen” process? For example to dim the content of the webpage with content?
feasible but it’s out of the script scope.
Great script, it does not seem to work on iOS 5 though. Any thoughts on how to make it work?
I see no issues on iOS5
I’m suddenly not able to turn bookmarks into web apps on my ipad with ios5. I do the same “add to home screen” on the same sites I’ve already done it with and now they all open in Safari. The ones I bookmarked before still open in a web app. Is there some setting on the ipad that’s preventing this from happening? It’s not working on my iphone either.
if the page doesn’t use apple-mobile-web-app-capable it won’t be converted into a web app.
Excellent script, any tips on getting it to work in a sencha touch “afterrender” listener?
Thanks
script is definitely loading, but nothing displayed
You mention: ” there’s no way to know if an user actually added the page to the homescreen.”
Can you not use HTML5 local Web storage for this. I feel users will get a bit sick of this bubble appearing every few minutes even though they have added an icon to their home screen.
you can always display the balloon only once.
How do I do that?
I have set it expire 40 mins but If I can set it to only display once that would be better.
Cheers
set it to something like 525600.
Hi there,
your Script is the best thing ever. I just wanted to know, if it’s possible, to put this Script on a WebSite Mainpage and the Content from the “WebApp” is placed in another subfolder? You know what I mean?
http://www.example.com/index.htm <- Script added
http://www.example.com/ipad/index.htm <- Content after added to Homescreen
Thanks for your help.
Greetings from Germany
Martin
Firstly, Thanks for all your hard work! I am new to programming and just trying to learn. I have the script running in a web app I’m working on but I can’t get the animation to appear just the text. Can you explain where you put the icons and the path to change to get them to appear for a complete beginner please?
Thanks again
Just worked it out! Only problem I am getting is on an iPad and iPhone 4 it adds the “add to home screen” icon instead of the app icon. On my 3gs running ios5 it works fine, any ideas please?
Works really fine on Iphone.
But what is with Android devices?
Do you have a similar solution which also works with Android phones?
I’ll be working on v2 shortly. It will include android support.
Do you already know when it gonna be finished?
Hi. Matteo.
This is what i’v been looking for. However are you able to explain step by step the steps. Iv downloaded the plugin. Intending on putting it on a wordpress theme running a mobile friendly version already.
Where should i place the plugin? what part of the folder?
Where should i edit the code?
Can anyone give me straight forward step by step instructions?
Can you add a cookie when the close button is clicked, preventing the popup for ever showing again (until cookies are deleted)?
use expire option. set it to 1 year.
You are the man!!!
I’ve noticed that when you add the bookmark to your homescreen, it puts a glassy overlay on top of the icon. Can this be avoided?
Thanks,
Bren
Use apple-touch-icon-precomposed
Hi man,
Yes you can:
“In case you realized you don’t like the pre-defined rounded corner plus glossy effect at all, you will have to rename your file (or link rel) accordingly, replacing apple-touch-icon with apple-touch-icon-precomposed. In this way your icon will be rendered as you conceived it, with no further modification.”
So here is the code:
Really cool script. Added it to our bank’s mobile pages and all folks were impressed. Good job.
If you’d find a chance to extend it to Android it would be even greater!
Fantastic! Thank you so much.
Donation and tweets etc are on the way…!
Great script, thanks for sharing! Works perfectly 😉
Great Script!
Another shout for Android support.
BTW How do you add a web app to the Android screen? I can’t see an easy way to do it.
menu > more > add shortcut to home
I too am very interested in the Android version. Thanks so much for this script!!
mythical the scripts perfect and very very simple thank you a lot
I LOVE this script! I wanted to set it to just show on the home page. I looked through the responses here but the fix looked like it was from an earlier version or did not have an answer. If I set “expire” to “1” it won’t load the script again, even after, say 5 min. I’m kinda new so I am probably missing something elementary, Watson. Any thoughts? Thanks for your work!
Does this work with iScroll? I downloaded it and tried, nothing happend, but an alert(); after everything was loaded appeared.
I will be implementing this in a rails app today- you sire are a life saver/improver!
What could I possibly be missing? Checked all paths, running with iOS 5.01 and won’t work on both an iPhone 4 and iPad 2. Added javascript alerts to the .js file and they pop so I know it’s finding it, but no page displays. Page also uses the iUi framework. Could they perhaps be conflicting?? What about 5.01 iOS? Is that tested? Is the UTF-8 thing required? Can I add that as a META tag to the page instead?
Sorry so many questions but I’m trying to debug this.
Maybe iUI is the culprit. Try to replace
document.body.appendChild(div);
with
document.bodyElement.appendChild(div);
bodyElement did not work. Finally got it to drop now but only by commenting out all the iUi code. There definitely is a conflict and I don’t know how to create a workaround.
Have narrowed it down to a specific CSS setting in the iUi code. Any idea why this conflicts with “Add To home”?
body > *:not(.toolbar) {
display: none;
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 45px;
width: 100%;
height: auto;
min-height: 415px;
-webkit-transition-duration: 300ms;
-webkit-transition-property: -webkit-transform;
-webkit-transform: translateX(0%);
}
I’ve got the same problem. Trying to implement with iui and the ‘body > *.not(toolbar)’ css breaks it.
That section is fundamental to how iui works, so it’s impossible to change it. It’s how iui hides the different pages and transitions to them.
I’m also using iscroll, but this doesn’t seem to be a problem.
Would be forever grateful if there’s a fix for this!
Cheers, Tony.
Hie, is someone fixed this problem ? Thanks.
Solved it!
Add the class ‘toolbar’ to the add to home javascript and it works. Still some small css issues, but essentially it works.
This is the line in addtohome.js, add the bold bit:
div.className = (isIPad ? ‘ipad’ : ‘iphone’) + (touchIcon ? ‘ wide’ : ”)+ ‘ toolbar’;
Tony
scrap that.
Just use display: block !important; in the addtohome.css
Which CSS line gets this display:block !important;
??
Hey, just try to use our thing: add “display: block !important;” to the #addToHomeScreen and I now have the add to home screen showing 🙂 sweet ! But it extends on all the height of the page…. So not the best fix.. If anyone have ideas. I am trying to fix it too
That is very good!
Great plugin man 🙂
Hi,
I have a problem;
When opening the front page via the icon on the home screen, all links on this site is opening in a new safari window. That is annoying, not possible to use back button..
Any solution?
You can test it here: http://ledigp.no
This solved my problem; http://stackoverflow.com/questions/2898740/iphone-safari-web-app-opens-links-in-new-window
Following up to post on 11/23… hoping ‘Tony’ can explain exactly which line to put display: in CSS to solve the problem with iUi framework conflict. I got it to work but the text spilled out of the bottom of the balloon so still broken. – Thanks in advance.
Hi,
The fact that the current version can’t be included dynamically makes it impossible for me to use it. You announced a 2.0 version 2 months ago. I do know you are probably doing this in your spare time and this script is a free giveaway. Is there still a chance 2.0 will be out anytime soon?
Michael
Great script ! Thank you !
I will use it for my next wep app 🙂
I have only one question : is it possible de change the url shortcut ?
Adress of my web app : domain.com with your script
Adress when the user click on the shortcut : domaine.com/iphone/
Thank you for your help.
How would I get this to work on Blogger?
So cool! I’m running iOS 5 and the height of the box extends all the way to the top of the page. I can’t figure out how to fix that. Any ideas? Thanks so much!!!
Hey, I’ve been using this AWESOME script on a clients site for a while, but I am just now getting around to worrying about the size of the box. I know I can change it in the CSS but is there a way I can just resize the balloon to fit the screen (proportionally appropriate)? Right now, when you load http://www.thejkinz.com it is so small you can hardly read it, is there a way I can resize it without changing every width/height size in the CSS?
I would also like to know how to do this….it would be a great option to add.
Any suggestions?
Hello,
first of all: really nice job!
Now, I’ve got a problem: I’ve got this script working finally but it shows an “Approve” mark when this Add to homescreen script comes up.
I’ve not tested it yet in the english text but i’ll translate:
Install this web app on your %devic(APPROVE MARK)e
so basically:
Install this web app on your iPhon(APPROVE MARK)e
I don’t have any idea how to fix it.
Thx
I’m sorry but I don’t follow you…
Love the script! None of our competitors are doing this. Thanks for helping us be the first!!
Here’s an example of how we are implementing : http://cars.liqueo.com/demo/a_asset_info_WDDGF8BB1CR205262
Love als the script! Good work!
I have a problem such as Ken. Only in this case with jQTouch framework. The script works great without jQTouch code so also in this case there’s something conflicting.
Any solution? Thanks in advance.
Just looking at older posts… stupid.
thank you, this works great!
Nice script!
This script is really nice and easy to use, thanks. You say above that there’s no way to tell if a user has added the app to their home screen yet the FT app somehow knows.
If you visit the app in safari it says “You’ve added the FT Web App to your homescreen but are not using it. Launch the FT Web App from your homescreen to get the best out of it’s features and content.”
Any idea how they can do that?
Thanks a lot for this very interesting script.
Great work Matteo!
I was able to implement it without much trouble at all. I did notice, that once I added the code, the accented characters are not being interpreted correctly. I’m trying to debug it now.
Thank you for sharing!!!
很好的服务，给我方便。谢谢。
Works perfektly! Is there a way to enlarge the close icon?? Have tried in the css, but that doesn’t make the icon bigger..
Change the
#addToHomeScreen .close
CSS property
Is it possible to send notification messages to standalone iPhone web apps?
Thank you
you mean “from” standalone iphone web apps?
Hie,
Thanks so much for this very good script.
Also, I have a problem to implement it correctly.
When I use it alone in a page without effect js and css, everything is right.
But in my iphone page, it does’nt. Do you have an idea please ?
Thanks, Olivier
Hie
I think the problem is coming from IUI in my page. Is there someone with an idea ?
Thanks so much for this excellent work.
Much love for this work. Super thanx!
Hie, Is there someone to help me to fixe the problem, please ?
Out of my page, it is running well.
http://olivierjully.free.fr/WebApp/add.html
But in my IUI page, it does’nt :
http://olivierjully.free.fr/WebApp/index.html
Height size problem !
Thanks very much. Olivier
This is a great plugin for my site! I am having just one issue. Once it is launched on the homescreen and you hit any link it launches again in safari.
Am I missing something or doing something wrong?
Other than that it is great!
@CHAE: You also have to add this to the head of your website:
Then Web App will not start again in safari
meta name=”apple-mobile-web-app-capable” content=”yes”
Tobias,
Thanks for the reply, I have added this to the header of my site template but still opens up a new Safari window.
Also, is there any way I can customize the add 2 homepage text? It is pulling the title text from my website, and it does not start with my company name.
Thanks
I found this code, but where do I install this?
(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener(“click”,function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;”href”in d&&(d.href.indexOf(“http”)||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,”standalone”)
im usually too lazy to write comments but this is an awesome script/idea 🙂
Hi there !
Great script. But it doesn’t seem to work for me. I built my app with iUI and experience the same problem Mr.Olivier (above) seems to. Whatever I try, I can’t seem to get it to work. Do you have any information about your script together with iUi ? Cheers and thanks,
Hans
Hie, I fixed the problem with IUI.
Place a display:table in addscreen css wire. Reset with margin:0 and padding:0 +++
Very good source.
lo trovo un lavoro molto utile, complimenti!
It’s probably something really simple but i am a newbie and can’t figure it out. the message drops down from the top but it shows the text only…no bubble, no touch icon…what is the problem?
Thanks for the tip, I’m trying it on my website.
I am using this script. It works fine but popup baloon is coming everytime even if i have added to home screen. Please give me the solution ASAP.
Thank you.
Hmm, “Please give me the solution ASAP?” I think you should say “Thanks for giving me a great solution”. Very rude demanding that someone should give you something for free, when you already got most of it for free?
Anyways, Matteo, thank you for a great script, I am looking at a cookie based solution but it is not easy.
Polish translation:
pl_pl: ‘Aby zainstalować tę aplikacje na %device: naciśnij %icon a następnie Dodaj jako ikonę ‘
thanks!
I’ve added the basic script to my mobile site, but I just dont get the popup. Can anyone suggest what I’m doing wrong?
All my visitors/users are Danes, so I would like to present the message in Danish.
However, if the visitor has an iPhone with English as the device language, then then instruction should still be “Add to Home Screen” (with the rest in Danish). Is that possible?
you can customize the message
Hi,
Been trying to download the script but the Get the Script button at the top of the page is not working?
Panic over, found it under the Public Repo button as a zip file
Hi Matteo, thanks for this fine script. It’s up to the point, simply perfect.
You suggest to use “one of the many include/require/load javascript libraries” for conditionally including the script. I tested this with
yesnope.js, but the async loading leads to problems with the initialization.you should really try v2.0 (out now)
Have you considered adding support for Android devices like some of the work on this project: http://code.google.com/p/mobile-bookmark-bubble/issues/detail?id=17
Thanks,
doug
yes, I’ll probably add android compatibility in a near future
Hey, awesome script, works like a charm.
One question though: to hide the URL bar, I did this:
body onload="window.scrollTo(0, 1);"So now when I show the bubble it’s 40px too high, but when I move the page it “jumps” down to its correct position. Any idea on how to solve this?
Also, the X-Button doesn’t seem to work for me (unless I’m doing something wrong).
var addToHomeConfig = {autostart:false,startDelay:0,message:'test.'};
iPhone 4, by the way.
In your example (http://cubiq.org/dropbox/a2h/examples/simple/) the X button doesn’t work for me either.
with iOS 5 🙂
I can change it if I edit this line:
balloon.style.bottom = options.bottomOffset + 'px';to
balloon.style.bottom = (options.bottomOffset - 60) + 'px';But as soon as I scroll or pinch, it “jumps” down. Any idea how I could catch these 60 pixels?
Hey there,
I am having the same problem, have you manage to fix it?
Thank
I’m having the same issue as Phil (above)
Most mobile suites like to hide the address bar these days. Taking this into account would make this awesome. I hope there is a fix for this.
One possible solution I can think of is to scroll the page via javascript just before showing the bubble, but I’ve been trying to do that unsuccessfully so far.
A different approach (not the smartest one, most likely) would be to check if the page’s been scrolled manually (e.g. with jquery’s .scroll()-event) and then remove the “-60” from the code. I’ll give that a try.
Having trouble adding this to a WordPress-powered JQM site. Anyone know how to include this properly? (I’ve tried adding to header.php using wp_enqueue_script to no avail).
Thanks!
Im adding my custom.js to the headtag, then within it I have the code that calls the add2home bubble.
It is not possible to only show this bubble at the JQM home indexpage, it will be displayed on all subpages too.
You must define the variables before the section that uses document.write to add the script URL’s, and because of this you can not use the pagecreate events to activate this script and have it showing only on JQM home page.
Best regards Victor
Use is_front_page to only display on home page:
Really great piece of code, thank you very much! I can’t wait ’till you add Android support – Will be so awesome!
Cheers
Dang – I wish you hadn’t published this. Espn mobile site added it and now I get that annoying ballon each time…
How do I apply this to icons on my site. my teacher asked me to add the code that would add a link to an icon so that when you add it to the home screen it makes the icon on the devices
im not sure what the link is that I need to add to my icon.
Not sure I understand your issue. have a look at the advanced example, you have to add a couple of metas to enable the touch icon.
when the dom is ready, i have a error message : unable to load the local ressources in add2home.js in line 17. how can i fix it ?
thank for all
Hey,
Is there a way to customize the homescreen icon that will appear on the user’s device after they save it to homescreen?
Thanks!
BTW Amazing script. Love it.
yes, Brianna. Have a look at the “touch-icon” example.
Okay, I got a problem. I put this code in the index.php, just before thr tag.
var addToHomeConfig = {
animationIn: ‘bubble’,
animationOut: ‘drop’,
lifespan:10000,
expire:2,
touchIcon:true,
message:’Install this web app on your %device: tab `%icon` and then Add to Home Screen.’
};
Also, I uploaded through the FTP the “apple-touch-icon.png” (57×57) to the root. Also to the root I installed the folder (next to the folder “css”) “js” and put the “add2home.css” and the “add2home.js”.
The message comes up, but the bubble is transparent, the apple-touch-icon is missing and the %icon won’t show up. Also when manually installing the web app, the apple-touch-icon doesn’t get shown…
Who can see the mistake? I thank everyone that can help.
[…]the time to read or go to the content or web-sites we have linked to below the[…]
I’m having an issue getting the close button to work. I’ve tried it using your live demo on my iPhone and iPad and when I touch the “x” nothing happens. Any ideas? Thanks!
Same problem here.
does it work in the demo page?
Android, Android, Andoird!
And a merge into the querymobile-environment, maybe they have some energy in realizing for even more mobile-browser 🙂
Thanks very much anyway. 🙂
Android doesn’t have a full screen mode actually. The script itself already works on Android but the procedure to add a bookmark to the homescreen is not straight forward as it is on iDevices
Has anyone got this working using WPtouch Pro for WordPress? I tried adding the code to the header.php file of the theme being used but it’s not working at all. I put all the files in the root of the site and used the following:
var addToHomeConfig = {
animationIn: ‘bubble’,
animationOut: ‘drop’,
lifespan:10000,
expire:2,
touchIcon:true,
message:’AB Playbill. Your device is an %device. The action icon is `%icon`.’,
returningVisitor:true
};
if (‘standalone’ in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion)) {
document.write(”);
document.write(”);
}
I should learn how to use this properly. Here is my code:
var addToHomeConfig = {
animationIn: 'bubble',
animationOut: 'drop',
lifespan:10000,
expire:2,
touchIcon:true,
message:'AB Playbill. Your device is an %device. The action icon is `%icon`.',
returningVisitor:true
};
if ('standalone' in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion)) {
document.write('');
document.write('');
}
Is there a way to dim the background while the add2homescreen popup is displayed ?
Thanks in advance, Last1Here
My comment didn’t appear first time sorry if this is a reposts
Is there a way to dim the background during the 10 or so seconds the add2homescreen popup is displayed
Thanks
you may place a black div between the contents and the balloon… not horribly difficult
Ok I’ll try that
Thanks
Very nice work, thanks!
Just wanted to add that it’s not always necessary to mess with the .htaccess file to set the character encoding.
Most of the time (maybe always?) it’s enough to add
charset=”UTF-8″
to the script tag.
Works great, thanks. One problem, it the bubble reappears after I add it to my home screen. Any thoughts? I have tried the hash trick and
Neither have works,
Regards.
hi JD,
did you figure out a solution to this problem ?
thanks
anthony
After drinking 1 cup of yerba daily for 20 yrs, suddenly it seemed to go right through me, even with the small amount of milk I put in it.
What a great script! Best way to make people aware of installing webapp! I would like to contribute with czech translation. “cs_cz: ‘Pro instalaci aplikace na Váš %device, stiskněte %icon a v nabídce Přidat na plochu.'” I’m not sure if this is literal translation, but its user-friendly czech sentence.
Damn! I made this with correct utf-8 codes, but i didn’t think that it will write corectly with diacritics right on the page. PLS find the correct UTF codes
thanks! I’ll add Czech in the next update
Matteo,
I’m using godaddy linux hosting. I’m trying to make this work but for some reason it looks like it’s not recognizing the CSS because it drops in as a text that says
‘
Install this web app on your iPhone: tap and then Add to Home Screen. x’
But not the normal bubble that iPhone 4S shows.
I followed all the instructions but for some reason I still cannot get anything but text dropping down. Sorry if this seems like a dumb question but I’m a bit of a newbie at all of this and just trying to learn.
Help?
[email protected]
I’m using godaddy linux hosting. I’m trying to make this work but for some reason it looks like it’s not recognizing the CSS because it drops in as a text item rather than a bubble.
I put he css file in the same folder as the .js file and it still didn’t work so I then put the css file in the main directory and that still didn’t work. Sorry if this seems like a dumb question but I’m a bit of a newbie at all of this and just trying to learn.
Help?
[email protected]
Someone make this works with sencha touch?
It works with Sencha touch 2.0.
any youtube videos on how to do this?
Hello Matteo,
Thank you for this handy and versatile script. It did save my day and I tried to make a small donation, but it was not clear how to donate in US dollars. I admit I am clueless about euros. Please advise.
Joanne
Never mind, as you know PayPal took care of the conversion with no problem.
Thanks again for a very well done script.
Here’s a fix for a problem I ran into on jQuery Mobile 1.0.1 using the “touchOverflowEnabled: true” option. When set to true, the “add to home” bubble would drop down too low (below Safari toolbar). I was using touchOverflowEnabled for fixed toolbar support, but jQuery Mobile 1.1 deprecates touchOverflowEnabled in favor of real fixed toolbars so soon will be a non-issue.
FYI:
On my iPhone with iOS 5.0.1 the text string for Danish (da_DK) is ”Føj til hjemmeskærm”, not ”Tilføj til hjemmeskærm”.
thanks
Perfect script, thank you! Just one serious problem: If private browsing is activated in Safari, the javascript returns an error as the client state cannot be stored in client database (I guess). Maybe this should be investigated in, to not display the ballon if private mode in browser is enabled. I could reproduce the problem on ipad2 and iphone4s.
Do you like to address this issue? – Any feedback would be much appreciated. Thank you.
It should be localstorage. A check on localstorage should be done before actually storing data in it.
Great script and easy to use. I removed the website sizing code because both the iPhone and iPad resize to suit their screens
(REMOVED)
Other than that the script is great, just what I was looking for.
Thankyou for a great script I use this on both my darts501.com & darts501.mobi sites
Great script and easy to use. I use it on both my .com and .mobi sites.
I removed the meta name=”view” from the coding because bith the iPad and iPhone resize to suit.
Thanks for some nice coding
did anyone find out how to stop the bubble coming up after youve already added it to your home screen ??
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.
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);
prevent the script to autoload and fire it manually only when the URL bar is hidden. it should word.
Seems to only work about 50% of the time.
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); }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.
Same problem here.. any solution?
the apple-touch-ico does not show up either, it is configured to..
it seems to work on my iPhone…
I had the same issue until i changed to the new css file 😉
Never mind! It suddenly started working after I burned some incense. Phew!
Thanks for the nice script.
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?
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?
you can change the CSS styles as you like
Hi there,
Any news about Android support?
Thanks for this script :p
Where should i put this if i want it to work with a wordpress theme?
in the header.php file should work.
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" />adding code to this blog doesn’t work…
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.
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”>
<link rel="stylesheet" type="text/css" href="/js/add2home.css”>
<script type="text/javascript" src="/js/add2home.js”>
looks like comments is stripping the php out,
<script type="application/javascript" src="/js/add2home.js" charset="utf-8">
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
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(”);
}
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?
reinstall? just replace the .js file
I just want to simply use a PNG file to drop down. Nothing else. What code should I use for that?
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!
I’ll soon check this on new iPad. Thanks for your report.
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.
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!
I may add a check to prevent the JS error. thanks for pointing that out
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
Hi,
this is a great script, for all -)
Very nice plugin, thanks alot! So easy 🙂
Wonderfull script. Very easy to integrate and very ‘powerful’ too. Thanks. Because of this it’s a pleasure to show a little financial support.
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?
the naming it’s up to you. if –for instance– you upload the script to your server under the
addtohomedirectory, then link to the files like so:<link rel="stylesheet" href="/addtohome/add2home.css"><script type="application/javascript" src="/addtohome/add2home.js"></script>
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?
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?
Doesn’t resize properly on iPhone. Very small hard to read. Is there a fix for this? iOS5 problem maybe?
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?
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.
Maybe this is helpful:
http://m.cg/post/13095478393/detect-private-browsing-mode-in-mobile-safari-on-ios5
I did a dirty hack in the click() function just to tell the script not to try the session storage and jump directly to close(), would be nice to have this implemented in a proper way.
Thank’s for sharing your work!
Great script!
A million times thank you. This is a great script that works perfectly and has saved me loads of time.
Thanks again. You rock.
To small on iphone. How can i do dialog box bigger?
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
Thank you this is what you look for
Thank you very, very
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
jeje sorry… its “my dev” site… 😉
Thanks again….
full-screen for just the home page and browser-bar windows thereafter is just the way iOS web apps are formatted
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.
Double right click to view source.
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
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=” />
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:
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.
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.
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
Hi, in my iphone does not appears this option, i need customize ?
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!
there’s flattr
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 😉
Is there no option to say: “once a user dismisses the bubble I don’t want to show it again” ?
set “expire” to a very high number (eg: one year 525600)
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!
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!
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.
Hello wehn i put this in the .html then the page are zommed? if I leave out the very small then the button
Best script ever!
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:
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
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
post a link to your site
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
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
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
I’ll bob a link in an email to you…
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
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 🙂
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?
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).
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
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
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.
I need more details 😉
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
yes, include the script in the homepage only.
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?
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)
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.
«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?
If you want to go back to the first page when attempting to move to the next page on the last page you can place this in your onScrollEnd function.
if (tmp) {
this.currPageX = 0;
this.scrollToPage(0, 0);
tmp = false;
return;
}
if (this.x == this.maxScrollX && !tmp) {
tmp = true;
}
Thanks for this great script. Is there any way to prevent balloon from appearing from the website view (not from the webapp) if the app has already been added to the home screen?
you can change the page hash when the user reach your site, if user bookmarks the hashed page you set a cookie which prevents the balloon to appear. Not 100% failsafe though
check out the window.navigator.standalone property
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW1
I tried to install your brilliant add2home but I am not sure it is compatible with our website could you tell me if it is or not please?
I need to check, in an URL following to the one where we ask the visitor to install icon, to check if it is accessed by the icon app.
I mean… if user does not install shortcut, detect it, and redirect to a page saying something like “you need to install shortcut to access this site”.
Is it supported somehow?
Has anyone had a chance to test this on iOS 6?
Are there any changes coming with mobile safari that will impact this?
it is already compatible with position:fixed, don’t think iOS6 is going to impact addtohomescreen script
iOS6 has the share icons in a slightly different place in mobile safari. Beggars can’t be choosers, as the saying goes, but do you have any plans to update the script?
would you test the latest version and confirm that positioning is still wrong?
Thanks for sharing your work. Does anybody try to implement a function to make it working on Android? I found that https://github.com/okamototk/jqm-mobile-bookmark-bubble.git
Hey, this code is exactly what I need, but I’m having trouble setting it up. How do I install the javascript to a website hosted on Hostgator / WordPress? Thanks for the help, I’ll donate if I get a helpful answer.
Thanks for the script, it’s perfect except for one issue – the balloon image overwrites my favicon so instead of using my favicon on the homescreen it uses your balloon image. How can I correct that? Many thanks!
Sorry, missed the WEB APP CAPABLE section. Will implement that immediately. Thanks for thinking of everything!
Awesome script! Thanks for creating this.
I am having one issue with the iPhone 4/4s only in which the bubble displays in the middle of the page but and doesn’t lower until the user scrolls. As I said this just seems to be an issue on the 4/4s. Any idea why?
I believe it is related to your CSS, try to set
html,body { height:100%; }
Has anyone found a solution for this? I added code to remove the address bar:
window.scrollTo(0, 0)And since then, it shows up in the middle of the screen.
be sure to remove the address bar *before* the call to addtohomescreen. Or call the balloon programmatically after a few millisecond from page load
Hi Guys,
thank u for that beautiful script. Attention, i am new in coding.
Please, i have a Problem with the touch icon, can anybody help me ?
i changed the header like i should.
but i want to change the icon as well, so i insert this line in the header.php:
and put the icon on the servers.
Now, so my hope, the bubble should show the icon !?
Am i wrong ? Couse it doesn´t show up.
Any help ?
Thank u very much
stefan
link rel=”apple-touch-icon” href=”../favheart2.png”
Your script will not run on iPhone 4S Safari browser with private browsing enabled on a jquery mobile site.
It causes the whole page to never load and I get this error in the debug console:
Javascript: Error
undefined
QUOTA_EXCEEDED_ERR: DOM Exception 22: An attempt was made to add something to storage that exceeded the quota.
I’m using the autostart:false setting and I’m running the script myself with addToHome.show().
I had to use a try catch around the addToHome.show() so that it wouldn’t stop the website from loading. You should make note of this in your “AutoStart” section of this page.
try {
addToHome.show();
} catch(e) {
alert(“disable private browsing”);
}
Indeed, private browsing prevents localStorage from working, so it throws the error. I would be nice if the script supported that… 🙂
Two questions:
1. Is there anyway to rename the “page title” that shows up when they click the add-to home screen button? That is have it pre-selected and filled in to something the webmaster specifies? My site defaults to something that is too long (> 11 characters).
2. It seems as though the javascript recognizes that it has been installed on the homepage, but every sub-page will ask if you want to add this to the home screen (wordpress site).
Thanks!
1. it reflects the page title tag (can’t be changed)
2. include the script only on the homepage (or set a cookie and show it only once)
How do I set a cookie with the script? Thanks for the response.
Hi, is there a way to link the touch icon to another homepage? So if you add it to your homescreen the icon should open for example the app store ore something else.
Thanks!
the bookmarked page is the one the user sees. but you can later redirect him
I’m having a wicked frustrating time getting this to play nicely with my scrollbar hider code. It seems to display the balloon “too high” on my iPhone4. I adjusted the bottomOffset to -46 it works. But then looks horrible on iPad.
Help?!
Thanks for the script!
How do you get this to work on non mobile devices (desktop)?
I see you can bypass the compatibility checks by calling addToHome.show(true) but this still doesn’t work if you’re on a desktop. I want to be able to see it on my desktop so I can tweak the CSS with dev tools.
Thanks!
good point. I’ll look into this
How to enable this on Safari only? What if visitor is using Chrome, Opera, Skyfire etc. on their iOS device?
it shouldn’t come up. the script already checks for real mobile safari browser.
Actually this does open on Mobile Chrome, both on the iPad and iPhone. How to prevent??
try the latest version
Doesn’t work if your home screen is “full”.
That is, if you have 11 screens full of 4×4 apps.
That is, if you have 176 apps.
I have too many apps.
Thanks for the script…
Many thanks for the excellent script. Excellent touch for our site that we’ve just put live!
super thanks for the great effort and amazing bubble prompt.
i have a question in mind though it might out of the topic!
is it possible to restrict adding to home screen function, for only the index page ?
thanks again.
You can run the script programmatically. Look for the “AUTOSTART” paragraph in the docs.
Wow. This is go great, it really took my bands mobile site to the next level and it simply looks fantastic. Very easy to set up and add to your existing code. Thank you very much guys!
Thanks so much for creating and sharing this. Such a great tool.
Perfect. Works like Charm. Is there anything for Android browser? Thank You.
Thank you so much, the scripts i downloaded worked perfectly. You made it look so easy. Thank you !
Thank you so much, that was exactly what i was looking for, the scripts i download worked perfectly. You made it look so easy. Thanks again!
As Ryan said, when you remove the address bar to make the viewport bigger, the balloon doesn’t go all the way down. When you switch to landscape and back to portrait, the balloon is at the bottom, where it’s supposed to be. Putting in a negative offset messes everything up so I don’t want to do that.
Could you adapt your script to support this please?
Hugely annoying. Is there any way to block thus script????
Really nice script!
How can i adjust the horizontal position on the ipad?
Its a great script. I have recently used this script but find some issues.
Would you please help me out?
First:
When I test on iPhone and call the web app from the stored home-screen button then first page opens correctly, but then all following pages open again on the web-browser.
Second:
how to close this box – nothing happens by clicking on the X
Third:
How to add logo when web app will be stored on the homescreen : now there is a screenshot with the actual screen
Thanks.
Where do we put it if we are using a wordpress site, hosted on wordpress. I have an index.php but I dont know where to add the js head code mentioned above since its not an html page.
Hi Bro,
Very nice script and thanx for providing it.
Some guys, stole your code and is selling it at Warrior Forum. His add2home.php has this “/*!
* Add to Homescreen v2.0.1 ~ Copyright (c) 2012 Matteo Spinelli, http://cubiq.org
* Released under MIT license, http://cubiq.org/license
*/”
Here is the sales page http://www.warriorforum.com/warrior-special-offers-forum/653485-just-launched-wordpress-plugin-turns-any-site-into-app-installs-directly-onto-any-iphone-4.html#post6792428
Thanx
thanks for the heads-up
Actually, they didn’t “steal” the code and followed the licensing rights that they were given to the software.
They had every right to modify and include the script in their software per the license agreement – http://cubiq.org/license
the author says that the code is all by himself, which is not true. Apart from that, he is allowed to use it for commercial products.
The MIT license this was released under permits use of this code in proprietary software such as this WordPress plugin.
go for it, that is all what the MIT license is about. you could make a small donation to the project if you are so inclined, or maybe contribute to the code with your modifications. You know, just to keep the good karma.
Hi Matteo,
Thanks for the brilliant script!
One point which has come up numerous times in these comments, but has yet to be answered, is that of the ‘X’ (close) button. It does not (always) work.
I say does not ‘always’, because the exact same code DOES work on my iPad 2, but does NOT work on my iPhone 4 OR new iPad (3rd gen). As I said, this issue has also been raised by a number of other users so it is not just me.
I am afraid I cannot think why this would be, but I think it definitely needs some attention!
Thanks in advance,
Jaymes
thanks for your report. could it be just the size of the button? Did you try to make it bigger?
I am using your source code as is. Are you saying it is working for you on retina devices?
I cannot test it on the iPhone 4S, but I assume it would be the same as on my iPhone 4 and new iPad.
(RE your suggestion, I tried assigning the trigger to part of the text but it also does nothing and that can’t be a sizing issue?)
yes, I tried it on iPad3 and had no issues. Also this is the first time I hear of the button not being clickable
That’s strange! I will start from scratch again and report back 🙂
“The MIT license this was released under permits use of this code in proprietary software such as this WordPress plugin.”
You can’t have ‘proprietory software’ for a wordpress plugin. WordPress is GPL and all themes and plugins should follow the licence. While you can sell any plugin/theme you cannot stop anybody doing whatever they want with your plugin so that rules out ‘proprietory’ doesn’t it.
http://wordpress.org/about/license/
Has this been tested to work with iui? I can’t seem to get it to fire up?
Hi would you mind sharing which blog platform you’re working with? I’m going
to start my own blog in the near future but I’m having a tough time choosing between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design and style seems different then most blogs and I’m
looking for something unique.
P.S My apologies for getting off-topic but I had to ask!
highly customized wordpress
Hi…my questions is ¿how I can detect if the icon exist in the home screen?
I need to show the message “install the app in your…” only when the icon does not exist…
thank you for your help… 😀
So i can use this script for free on my Website? I only have to write ADD2HOME by Matteo Spinelli?! THX
exactly. welcome to the world of FOSS
Not work on ios6
yes, it does 🙂
works nice cheers
Hiya,
Great piece of code, congrats!
Is there a way of forcing the Add to home popup to appear before the DOM is fully loaded? As in immediately as the page opens up?
I’m using it in conjunction with a preloader script for an offline web-app, and it would be great to have the prompt open up even while the preloader is running, and not wait for all of it to load up?
I’ve tried adding in addToHome.show() at various points, but that didn’t work as planned…
placing addToHome.show() at the very end of your page should work…
Great, that fixed it, thanks!
Has everyone been able to successfully get the touchIcon to show up? Mine is just an empty box on my ipad no matter what I do.
Really great script. Quick note about use with jQuery mobile – the strange mid-page floating bubble problem will occur (until you scroll when it then corrects itself) unless you make sure to define the following in your css:
ui-page {height: 100% !important;}.And when I said
ui-page {height: 100% !important;}what I really meant was
div.ui-page {height: 100% !important;}Would be great if someone made this into a plugin… Would go mental in terms of popularity 🙂
I would like to ask if I can provide two message of different locale to be shown base on the user setting. (en_us and zh)?
you have to identify the locale yourself and send the right message
I want to control the text that has the field for ‘add to home’ how do I do that?
read the docs, it’s under Advanced Features 😉
I think that the problem with de X button is the private browsing in the device. I had it active and the X didn’t work. I modified the function close in the js file and put an alert there. The alert came up after the default 20 seconds… Just like if the call was blocking somehow.
Then I decided to switch off private browsing and the alert appears just when I click the X button, and the balloon is closed. Maybe it fails to write whatever it’s described at ‘More power to the user’ when private browsing is active.
Just my 2 cents.
Hi, this is absolutely brilliant work done by you.Thanks a ton.I was wondering if it is possible to call the “arrow dropdown” once you touch the bubble.
Just perfect!! Thanks!!
is there a way to easily increase the size of the icon and close button for the popup?
Do you know if there is a way to track if the user is using the Add to homescreen icon?
It would be really nice to know how many people use it and how often.
doable but not 100% accurate
you can do it with google analytics event tracking: https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide
The balloon is still loading even the user add it to the home screen. Is there a way that the script is detecting if the mobile device already add it to the home screen so it will not show again? Thanks.
you should really read the docs 🙂
I’ve read the docs multiple times and I can’t find it either? How can we enable this because it’s really frustrating.. But very nice plugin! 🙂
Seems like there is a bug here. I am using it correctly, but the button still shows up. Here is my header output:
http://screencast.com/t/5N70uCrOAOoA
please try with the demo examples and confirm the bug
yes the bug is there unfortunatly with following settings:
returningVisitor: true,
expire: 0
Does it have something to do with “expire”?
I’ll have a look at it
Thanks mate! Keep up the good work! 😉
Curious if there was ever a solution for this, I’m having this problem of it showing up even though it’s been added to the homepage
Sorry, the negation is unnecessary :). Below the better code (works for me):
isStandalone = "standalone" in window.navigator && window.navigator.standalone,… my first post got lost somewhere. Anyway, line 88 to be amended. Hope it will help you guys!
I tried making the changes, but it still shows up.
Sorry to hear that, for me the combination of adding proper meta to header and changing this line works. Maybe try testing on a fresh and simple project?
This happened to me because I was manualy triggering the notification using the addToHome.show() command. Unfortunately this action still opens the message even if a shortcut has been added.
I worked around it by storing a flag in localstorage if the application is launche in standalone mode. If the flag is set, I am not calling the show command.
Hope this helps.
Grazie mille molto utile, ma il QR code non funziona ha un url sbagliato.
Good morning, excuseme for my bad english but can’t use this script in my page. i don’t know why.
maybe for i have joomla cms? the style add2home.css it’s copied in template.css and the script it’s copied in my index.php.
i don’t understand why no show the ballon. thanks
You can try this plugin for Joomla. http://extensions.joomla.org/extensions/mobile/apple-display/18868
I need to change the background colour of the touch icon. It’s light grey now. Where can I do that in the CSS?
I have a transparent icon with some white text and iOS automatically adds a black background when it creates the app icon for the home screen. I’d like this dialog to show the same icon.
I found a problem with the script. Explorer 8 throws an ugly out of memory message.
The message is “out of memory on row 7”.
I know Explorer 8 is slowly dying but it’s still at 10% so I need to fix it. Can something be done to the script or can I hide the script from IE8 somehow?
I found the problem. IE8 chokes on the CSS file, not the script. So I hide the CSS from IE with this:
script here
css file here
Thanks for the great script. One question: where is the add-icon.png in the javascript or css? I want to modify that image, but I can not find it. Many thanks for any reply!
it is embedded/uri encoded
That did the trick. Thanks very much!!!!
Love the feature .Its a fitting answer from web apps to the native apps.
Hi! I was using your script and until few days it worked perfectly.
Now for testing whats wrong I opened your demo on my iphone4s and it works.
Then after copying your original demo to my server it doesnt show up anymore. Do you have any clue where could the problem be?
This is the link: http://ocjene.info/m/test.html
Okay its working again (maybe some safari cache problem?)
Thanks again on your script and here is the translation for Croatian language:
hr_hr: 'Instaliraj ovu aplikaciju na svoj %device: klikni na %icon i odaberi Dodaj u početni zaslon.'
Firstly id like to commend you on a great piece of code. Simple straight forward but still a great feature. However i have tried many times to implement this on my blog (tumblr) but with no success and i wanted to know if this was not possible to implement on my blog or if i was doing something wrong. I tried simply placing the code as well as inputting the code itself as javascript within my html and also tried manipulating it but with no success… Any help would be greatly appreciated.
Thanks in advance.
Thanks for this nice script, How can i add this to ajax pages.
I am using this script in my jquerymobile app. I load all the pages in ajax and I need to show this balloon in specific url, lets say abc.com/mobile#home, but it shows when the page is loaded. how to prevent the balloon to load and show in specific url?
Thanks for this! Your code is the best yet! I have a question regarding the configuration. Can I just change the settings in the add2home.js or do I need to follow your suggestion: “You can customize the script behaviors by setting the addToHomeConfig global variable *before* the add2home.js script is included into the page. Let me stress on this. The variable must be globally accessible and must be defined before the script is included inside the page.
ALSO, is there a script for Android/Blackberry/other devices?
you should use the addToHomeConfig variable.
where?
I loved as much as you will receive carried out right here.
The sketch is attractive, your authored subject matter stylish.
nonetheless, you command get bought an nervousness over that you wish be delivering
the following. unwell unquestionably come further formerly again since exactly the same nearly very often inside case you
shield this increase.
Hi, anyone modified this to work with Android devices? That would be superb, Thanks.
Hi. Great script. Any luck with android? Just a normal tooltip?
At first I thought the bottomOffset setting was not working. Then I realized the script was assuming that the address bar was present. I have hidden the address bar by auto-scrolling, and that was bringing the balloon up towards the middle of the screen.
I have addressed this by using bottomOffset: -60. Do you have a better suggestion? I am only testing this on an older iPhone 4s, and I am wondering if this number will be incorrect on retina devices.
I tested this on iOS4 and 5 working fine but on iOS 6 when we create shortcut to screen and try to browse that site it open a black page and it keep try loading it….why so?
I am having internal site
never heard of such an issue. you should provide more info
Is it possible to set a url for all the pages?
i don’t want to use the current url
Question. On the iphone5 when you add to home screen all that is fine. When I tap to open what was added to home screen. The height of what is being viewed is not going the full height of the screen. Any fixes for this.
This is a common issue not associated with this script. It’s related to the viewport being set to the device width. More info here about that. http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers
If you have multiple “apps” on the same website (website/app1, website/app2) the localstorage in the browser is the same. So after being prompted on loading the first app the user will not be prompted on the 2nd app as it appears he is “returning” too soon. Maybe should clear time in localstorage if app is added to home screen.
there’s no golden solution to detect if the website has been added to the homescreen. You should detect that yourself based on your app and clear the localstorage accordingly
Anyone know of a y fixes to resolve height on iphone5
Have the same problem….we’re you able to fix?
No I am still looking for a fix. Anyone at all know of a fix for height issue on the iPhone 5. Thanks.
This script rocks.
I just have a question could someone teach me how to track the button or how to track if someone has installed the icon to their homescreen?
I want to see how many people open the “homescreen icon”.
Thanks a lot!
in iOS6 I tried add to home screen button to add my wbsite shortcut but when I open using that shorcut it opens white page and aloader that keep loading ….
Earlier versions of iOS it works fine..please help
Thank you for this amazing script.
I’ve tested it on my site with my iphone 4s IOS5 but when I test it on my wife’s iPhone 4s which had just been updated to IOS6 it doesn’t show up.
Any ideas why?
Scrap that last question…my Mrs had private browsing enabled on her iPhone!
Its a great script but on my ipad mini the bottomOffset does not work properly, it works more like a top offset. Also, is there a way that the x position can be set a percentage rather than a fixed value as the baloon does not line up in the middle of the page when I rorate the ipad.
Is there a way to disable add2home from showing up on iPad. I’m looking to only have it appear on iPhone/iPod.
you have to selectively include/exclude it
Thanks again for this
I’m testing this on my iPhone 4s IOS5… If I add my site to my homescreen in landscape view & then access it from the homescreen icon in portrait view, my site shows as if still in landscape i.e. zoomed in.
Whilst this is not a big problem, my site is mobile-optimised with a fixed view and as such does not support zooming in & out.
Do you know of any way to fix this?
Will donate $10 for a working solution.
Cheers
Hi,
Many thanks indeed for the great script. Can I ask if it is possible to not use current URL for saving to home screen and use the home page URL instead?
We are an ecommerce store and if the prompt appears outside of the home page, for example on a product, well that page could be deleted once sold out, rendering the shortcut useless.
Thanks,
Pete
Always Riding
Just add to frontpage then?
the “Add to homescreen” is just like an “Add bookmark” on desktop. You bookmark what you see on screen.
I would like to change the home icon….how is that done?
sorry, i read the direction and figured it out ;>)
Somehow, the close button in the corner of the bubble has no effect. I am testing this on an iPhone 5 and iPad 3, both iOS 6.
Also the position of the iPad bubble seems a bit off. The arrow does not point towards the “sharing” button.
Hi Matteo,
The qrcode does not work. I downloaded the examples, and they do not work. I’m iOS6 / iPhone 4s. Can you confirm that the script is still up?
thanks
would you retry now?
I’m having the same issue as Marcel the x close button doesn’t seem to work. Thanks for the script though I like it.
Matteo, the problem that I mentioned first and that has been confirmed by Web Design Boulder seems to be based on the iOS version. It does work on iOS 5, but does not work on iOS 6. Could you look into this?
Thank you!
I’ll look into it, thanks for the report
I’m having the same problem with the close button not working. I’m using an iPhone 5 with iOS 6.0.1
are you using some frameworks?
I do not think that matters. The demo on this site has the problem, too.
I am using Sencha Touch 2.0.
I just tried it on 6.0.1 and (guess what) I can’t replicate the issue. If I click the X the popup closes correctly.
It’s hard to debug if I can’t replicate the issue. Anyway, I’d put the close sensible area on the whole balloon. That should help.
Is it possible to set custom logo as a short cut icon rather than a screenshot
you can put anything you want, google apple-touch-icon
Thanx for the reply..its working gr8
Is it possible to have returningvisitor do the opposite? So first time users see message, returning users do not see message?
When I click the icon after adding it to the home screen it’s not opening the website inside the safari browser – not even in your demo. I don’t see any browser – just the page full screen. How can that be?
Pop up says the app is called ‘settings’.
Can we manually set the name of app for shortcut..
Thanks so much for this, it’s super useful.
Here’s a gist of add2home.css converted to sass, in case it might be of use to anyone else:
https://gist.github.com/4162492
This is awesome but it keeps showing up even though it’s already installed.
Is there a fix for that? Please help.
Has anyone come up with a fix yet for this???
please read the last 2 paragraphs of the original post
Is there a way to change the URL to the custom url scheme for my app before the user saves it on home screen?
Is it possible to make this appear only for first time when a user come to your site.. So in other terms not to show the message to returning users?
Hey great code! Thanks!
Mine works, but when the bubble pops up, it is very very tiny. Only when I zoom in does it become larger and eventually the proper size. How can I fix this?
Thanks so much!! Happy New Year!!
Yeah man, I just did it, although I’m working out the kinks. What’s your host? You simply download the files (“Get The Script”), and upload the css and js files onto your host. It can be anywhere, like in some folder. Then add the above code to your header file, where you see other “<link"s and "rel"s. (header.php is located under wp-content, themes, your theme). Just add the two lines of code right below the other similar <link lines at or near the top. Then change the /path/to to match the path you uploaded the files to! And voila!
The close button of the balloon doesn’t work in Safari’s private mode. Is there a work around for this problem? (iOS 6.0.1, iPad 4)
Dear wordpress customers:
from your ftp client (server)
1. create a folder (ex. iphone)
2. upload add2home.css and add2home.js in your folder
3. go to appearance/editor
4. search header.php and put the code
and replace patch/to/ by your created folder.
* if you have problems. put your complete url
ex.
Luck!!
Ok, so I have a wordpress site. I went into my ftp and added a folder named iDevices into my wp-content folder. I then added your add2home.sss and add2home.js files into the folder. I then went to appearance/editor, header. php and entered the code:
I then tried to open my website on iPad and iPhone, but there is absolutely no add to home screen button appearing. Is there another step that I’m missing?
The script works pretty well on my HTML5 web app, except when I turn On the icon feature (I set the Config variable before the .js file, as instructed) it displays “null” instead of my icon. Any idea on what I did wrong or what the problem might be?
Thanks a lot. It’s a wonderful script, by the way.
are you using the latest version that has just being committed?
Yes, I’m using the latest version, and have the icon normally referenced inside HEAD as:
Still, I get a “null” message instead of the icon.
would you send me a demo url?
Pedro I have the same problem !
there happened a Javascript error that “SECURITY_ERR:DOM Exception: An attempt was made to break through the security policy of the user agent”. I didn’t know what’s the matter, could you tell me why?
are you in private mode? or do you mix http with https?
Is there a way to make the “app” open up to a specific page?
I want the app to always open on AustinGolfVIP.com/2013
even if they saved the app from AustinGolfVIP.com/faqs
How can this be accomplished? Thanks in advance,
Mac
Hey Matteo,
Great plugin! The only problem i have is one which happens on just one iphone 4s. I have no idea why but on my other iphone 4s is does work.
It’s the same problem multiple other have been experiencing with the close button. Mine simply does not close at all. Not even with the latest version where you made the whole bubble a close listener.
I’m using Sencha Touch 2. Thanks!
Jos.
Sencha is probably the culprit. try to raise the z-index of the balloon from the CSS.
Is possible to check if the user added the shortcut on the home so not showing again the popup?
And the last thing, if set expire= 60 it will show the popup again after 60 minutes right?
Thank you
Respect
1. please check the last two paragraphs of the documentation
2. precisely
Is possible to check if the user added the shortcut on the home so not showing again the popup?
Is it also possible to show this popup only on the homepage?
the script should be included only on the pages you want the popup to show up. if you can’t do it server side you could check window.localtion.href
Hi Matteo, could you elaborate on the use of the window.localtion.href command to do this. I have WordPress sites and have placed the code in to the header.php file however I am getting the pop-up on every page and would like to just have it appear on the home screen or just appear the once when you visit the site no on every subsequent page clicked after landing. I tried adding the code however this does not appear to work in the WordPress environment. Thanks for you support and Awesome code! 🙂
Danny
It seems like a great plugin except that I experience this strange behaviour.
On my iphone or ipad it drops down and is only visible for like 50% of the opacity and then it dissapears again. I did use the example code from the download.
Do you have any idea?
hi, im jsut starting html and css.. but ive been using ipod touch for almost a year.. i found your tweak to be very useful… im fond of making html based shortcut for my apps / tools on my work.. ive got tons of tools, so i decided to create a html page and link all .exe files + my notes + spiel + email updates + notepad on a single page.. if its posible, you could make / teach me/us to create a shortcut for toggles on the settings app..
Ok, so I have a wordpress site. I went into my ftp and added a folder named iDevices into my wp-content folder. I then added your add2home.sss and add2home.js files into the folder. I then went to appearance/editor, header. php and entered the code:
I then tried to open my website on iPad and iPhone, but there is absolutely no add to home screen button appearing. Is there another step that I’m missing? Any help would be greatly appreciated!
Thanks for the tutorial!!!
Everything works great!
So, you mentioned a different way of preventing the balloon from showing. I don’t have the “web app capability”, I include the script to the home page of my website. My problem is that I’m new in the matter and I don’t really know how to check for a special url hash. Could you please show me an example? or a different option?
In advance,
Thanks very much.
Very nice but it seems like once I am using this if I add my web app to home screen and then open my web app from that home screen icon it no longer has the address bar in safari. Also in my page I added to homescreen I have redirects with rel=”external” and new instances of safari are then opened. Anyway to keep the default behavior when I added to home screen before using your plug in?
Thank you so much for this script! I do have one problem though.. When I scan a QR code the link will not open directly in Safari, but inside the QR application – and then you don’t get this popup message..
Is there a way to solve this?
(I also tried scanning your QR code, but this is also opening inside the QR app, and there is no popup..)
thanks, I’ll check it out
I had to change the event listener to touchstart – the click event did not work on my iphone or ipad to close the balloon.
if ( options.closeButton ) balloon.addEventListener(‘touchstart’, clicked, false);
do you use any framework? such as jquery mobile?
We are using Sencha Touch SDK.
Hello!
This is an AWESOME article. Thanks!!!
The only problem I have is that when I set touchIcon:true, it shows “null” in place of the icon.
The head tag has
Am I doing something wrong?
would you please post a demo page? does it do the same with the included examples?
You should ALWAYS set the icon size in the apple-touch-icon link tag. Eg:
<link rel="apple-touch-icon" href="path/to/img.png" sizes="144x144" />Where does the script reside? In the root? or? Am I missing something? I can open the read-me.
Thanks
gs
I use Rapidweaver and have added the Standard Usage code to the head and the addtohome.css and add2home.js to my htdocs folder, but nothing happens, any idea what I am doing wrong?
Hi,
I miss something like a developer-Mode to test and style the bubble in desktop-browser. Something like Desktop=true as a parameter. Mayer there is a Otter solution i dont recognize!?
Thanks for this Great Script.
Gereinigt from Germany
Ruben
yes, that has been already asked I believe. I may add something like that in a future release.
Thanks for the fast answer. Iam Looking forward for that Feature!
By the Way i hate autocorrect 😉
First of all as everybody else, I want to thank you and congratulate you for your great code.
I added the meta code you provided above for “apple-mobile-web-app-capable” but it keeps showing the popup. Have you any suggestion ?
Thanks a lot !
Hi,
This works great when I go directly to my mobile website URL. However when I visit my regular homepage URL and then is being forwarded to the mobile website url, then this script is not showing up.
Any ideas?
Thanks for the plugin!
Is great, but I found that it doesn’t work when private browsing is on, I added this bit of code to bypass the sessionStorage part. It could explain why the last commenter’s 2 phones are different..
function clicked () {
var canstore = true;
var testKey = ‘qeTest’, storage = window.sessionStorage;
try {
// Try and catch quota exceeded errors
storage.setItem(testKey, ‘1’);
storage.removeItem(testKey);
} catch (error) {
if (error.code === DOMException.QUOTA_EXCEEDED_ERR && storage.length === 0)
//alert(‘Hello, private browser.’);
canstore = true;
else throw error;
}
if (canstore = false){
isSessionActive = true;
sessionStorage.setItem(‘addToHomeSession’, ‘1’);
}
close();
}
That was taken from here:
http://m.cg/post/13095478393/detect-private-browsing-mode-in-mobile-safari-on-ios5
Thanks again
Hi
Do you have set instructions on how to add this or a tutorial? Is it suited for wordpress?
Thank you
After adding to home screen and then opening the status bar on the bottom is missing. Is there a possibility to publish this again?
Hi , thank you for the great plugin.
I had a small question:
Can you somehow trace how many people added the app to their home screen?
Track how many click throughout Google analitics or something?
Thank you
One more question:
Opening the site from the installed home screen there is on iphone 5 devices free space at the top and the bottom. Is there a solution to show it over the whole screen?
Good job!
Why don’t expand it to Android and Blackberry platforms?
Very nice!! And working on the iPad but not on the iphone (4). Like many others I am not able to close the message box (tested it on the demo site, before installing on my own site)
Can make a movie if you want to.
For the rest; great work!
need more info about the iphone (OS version). post a video if you can.
Hi, the iphone is an iphone 4 with IOS 6.1 installed.
The video of the iphone behaviour is on youtube:
http://youtu.be/U072ES4tOBE
With an ipad I visited the same demo page and it works there:
http://youtu.be/RNincYO5osU
It’s the same some of the others are saying in previous comments. Doesn’t matter where you tab the message will not close. Doing this on the iPad it works like expected. If you need me to test anything just let me know.
could you try to shutdown the iphone and retry?
Now it works!
I’m having the same problem but restarting my iPhone did not fix it. I tap the Close Button but the balloon will not close.
iPhone 4s
iOS 6.1.3 (10B329)
Thanks.
would you try to hard reboot your iPhone?
Sorry. Forgot some info. A co-worker has an iPhone 5 with the same version of iOS. The Close Button works correctly on it.
I tried the hard reboot. It didn’t work. I went to your demo and the Close Button does not work their either. The only things I changed in the script were the normally editable “settings”. I didn’t change any code outside of those.
I can’t remember what line this was on but there is a event handler for the Close Button. Someone said to change it from ‘click’ to ‘touchstart’. That didn’t work either. I changed it back to ‘click’.
I also removed the other script from the page to see if there was a conflict. The Close Button still didn’t work.
“remember to add the apple-mobile-web-app-capable meta to your page head”
How can I know when to add this tag?
Will this script behave the same on the Blackberry or Android OS? If Not are there codes or modifications that will do the same thing?
Ive installed the .js file, and the .css file into the site, added the script in my wordpress website and its not working, can someone post a tutorial on how it works in wordpress???
I figured out, the script that i install on my header needs to have the path to where the url is at needs to be set. so it can find where the .css and .js file is at. and now that i did that it works great!
Its a pity you cant test the Android styling through Chrome emulation.
Does this ath suppoprts iPAD chrome and android chrome?
In my iPAD chrome , the message is not getting displayed.
Let me know if I need to configure something?
When I run my application on iphone 6 safari, it shows the message, but once it showed it will never display again until I clear safari cache from Settings. Can I force safari to always show this message?
I have added add to home screen as you recommended but I can’t get it to work.
My application is rails based . following is the code that I added to my index file, which is a haml file
= stylesheet_link_tag 'addtohomescreen', media: 'all', 'data-turbolinks-track' => true
= javascript_include_tag 'addtohomescreen', 'data-turbolinks-track' => true
:javascript
addToHomescreen();
Hi there,
Have you made a Windows Phone addition/version yet?
Thanks – helped a lot,
Mike
not yet, sorry
Has anyone tested this on Android recently? Or the Chrome browser using the Android emulation? Neither seem to work. Chrome browser’s iOS emulation is fine, but my Galaxy S5 and Chrome simulations of Android both produce nothing — no guides and no feedback in the console.
can you help with I can’t get this plugin to work I try using the wordpress plugin and the script.
When i try to open the pop up programmatically like this:
var addtohome = addToHomescreen({
autostart: false
});
addtohome.show();
I get the following error: “Uncaught TypeError: Cannot read property ‘lastDisplayTime’ of undefined”
Could you tell me what the problem could be ?
HI
I was just wondering if you sorted this out as I’m getting the same thing
I have same error, did you fix it yet? thanks for any infomation !
Hi , iam also getting the same error, have you figured this out?????
You have to specify empty options:
addToHomescreen({});
or, in your example:
var addtohome = addToHomescreen({ autostart: false });
addtohome.show({});
Hi Thanks for good js, i am facing one issue not able to load the image icon in the popup can you help me how can i do this. also in js file i show its support the multi language but how is there any demo for that ??
Has this widget just stopped working on Mobile Safari on IOS 8?
Hi,
i want to add add to home screen button on my web site like google chrome does.Thanks.
Hi,
Can we add “Add to Home Screen” button on my we site like Google chrome does.
Great plugin, but missing checkbox “never show again” for user in tooltip.
looks great
1) doesnt seem to work for me on iOS7 and Chrome
2) would also love to see a ‘dont show again’ option
Hi, very useful, very attractive, so many thanks.
I just create a copy to train myself with your code … and I have 2 problems : (www.francealpestaxi.com/indexc.php)
1/ Going to the end (after creation of the icon on my Iphone screen), I close Safari, I tap on the new Icon … and my website appears without the navigation bar.
I didn’t find the code to have it.
2/ Trying my test page on my macbook pro and/or my Imac (www.francealpestaxi.com/indexc.php), the bubble appears on these devices. What do I have to change just to have them on mobile phones?
Thanks for your help, Francois.
Hi François
Did you find a solution for this issue? I see a few people asked this question. Not sure whether we missed something in the documentation or not.
Thanks
The apple-mobile-web-app-capable tag is what is causing the site to display without the status or address bars.
Hi – great script. Got it working BUT I am finding that when I click the icon that has been added to homescreen, it doesn’t show any updates made on the mobile site it is linked to. Those updates do show when the site is accessed from an icon that was added to the Ho,eScreen without using this script.So, i am guessing that something in the script is stopping users seeing updates to the mobile site in real time.
[HELP] Is theres anyone could help me to implement this script to blogger?
Thanks before
Great plugin.
2 things though:
* I’m building a Swedish site and in Sweden a lot of people have the browser language set to English so they get the English message even if its a Swedish site, it would be great if you could set a language parameter
* The image in the notice is using the 60*60 logo instead of the biggest (144*144) so it looks kind of crappy
Hi! I can only get the debug and or stock android versions to work on my Samsung Avant. It was released last year, 2014. I setup a page using the debug and it fails when I turn off displayPace but all other functions seem to be fine if I disable them.
Also, If I were to run the site using the stock android version, how do I get it to no longer appear on revisits via the web app when saved to home?
Hi
I’ve set this up on my site and am tracking the User agent of the people that add the site to their homescreen via the onAdd function.
The thing is I’m getting a lot of desktop browsers reporting that they have added the site to their homescreen, here are a couple of user agent examples
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_5_8) AppleWebKit/534.50.2 (KHTML, like Gecko) Version/5.0.6 Safari/533.22.3
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:42.0) Gecko/20100101 Firefox/42.0
I’m concerned that these people are being bugged on their desktops, is that likely?
may i know, which script you have
add hello as you leave the main url of the web and not the other urls?
and how I can change the title of the main web links and not others?
I feel bad translation yet.
Hi, my site is a joomla and I canot managed to put the files no local Right. Any tutorial or suggestion . Many thanks
Last weekend Firefox launched its Browser for iOS.
The add2home arrow points to the refresh-button.
Since it is not possible to add webclips to the homescreen via firefox it would make sense to check if browser is firefox on ios then not to show the add2home box.
Opera for iOS is showing it also and should be not displayed too.
Chrome Browser for iOS is not showing the add2homebox..which is good.
Sorry to bug you… but could you tell me why the “ATH” button doesn’t seem to appear on these URLs:
http://textline.io/app/sonnyboysbbq
http://textline.io/app/thankutext
It does appear if I add the “debug” attribute, but I haven’t been able to get it to show up otherwise.
Thanks for any help you can give me on this.
Really appreciate it.
– Hugh
This isn’t working for me. It’s the second iPhone bubble JS I’ve tried today – the other only seems to only have Japanese and French translations in the Zip off github (which do load). So I tried this one, as it looked pretty straight forward. However it doesn’t load.
I’m on IOS 9.2.1. on an iPhone6
Anyone having similar issues?
Hi! Will not be original and first of all I want to thank you for the script. My doughnut in the form of $$!
Question on script: I need to block the page on a smartphone (the app is installed or not – no difference), what would the content be viewed via the web application. But the script that I use, works once: once locks the screen, second time not, and so on. In addition, such a script does not want to work on android. Here’s the script itself:
addToHomescreen({
mandatory: true,
lifespan: 512000
});
var addtohome = addToHomescreen({
autostart: false
});
addtohome.show();
addToHomescreen.removeSession();
The page with the script:
http://myapp.hostenko.com/myapp/
The FIX for google Chrome: window.navigator.standalone issue. This was copied from so I cannot take credit.
http://stackoverflow.com/questions/21125337/how-to-detect-if-web-app-running-standalone-on-chrome-mobile
Recently Google has implemented the CSS conditional display-mode: standalone, so there are two possible ways to detect if an app is running standalone:
Using CSS:
@media all and (display-mode: standalone) {
/* Here goes the CSS rules that will only apply if app is running standalone */
}
Using both CSS and Javascript:
function isRunningStandalone() {
return (window.matchMedia(‘(display-mode: standalone)’).matches);
}
…
if (isRunningStandalone()) {
/* This code will be executed if app is running standalone */
}
Hi,
the Bower component with version 3.2.2 contains the correct .js file, but the .css file is still old without the ios9 support.
Where i can download the correct js file and css file for support IOS 9?
Thanks
Hi, just use the current version on GitHub. You only get problems if you install it with bower and try to use the tagged 3.2.2 version.
Hello Matteo, is there a way that I can use Addtohomescreen pop up on different pages? Particularly page people land on?
made mine a button to show
function showdownload(){
addToHomescreen({
mandatory: true,
lifespan: 512500
});
addToHomescreen.removeSession();
}
Save To HomeScreen
Hi,
Firstly thanks a lot for this valuable information. I want know to know that i am having a website. So i want when people will visit or open my website, my website should automatically get saved as a home page of that visitor browser. Is there any way or solutions. Please help me out. Thanks
Jack
First of all thanks! It’s working great on all devices I’ve tried so far except on the iPhone 6. Does anyone have a solution or a workaround?
Thanks
Max
Having the same issue. Perhaps this is due to ios9 compatibility problems? I get no console errors, and no add to homescreen notification on iphone6s.
Update: managed to get it working by turning on logging and finding out why it wouldn’t display. It appears to have hit the lifetime max number of displays before it displayed once. I turned that limitation off and now it works. Thanks for the code library! That’s a big help.
When calling show(true) there is a small delay that causes a little user confusion. Looks like that is due to show calling _delayedShow which is also used to show the dialog the first time using an appropriate delay.
Would be good if show() could be told to show immediately – perhaps with an additional arg.
not working for IOS 9.3
works great but it wants to put it on the last screen of the phone instead of the home screen. Is there a way to force it to be on the home screen?
Thank you so much for this! If you can provide some specific details on how to get it working with iOS 9.3, that would be great.
I just donated 10 bucks if that helps you to update this very useful tool.
Thanks and hope you find the time!
thanks, really appreciated. I’ll do my best to update the plugin!
Hey, is there any way to enforce that the “X” button is the only way to close the pop-up? Right now, clicking anywhere on the popup closes it. Thanks in advance!
I am a bit confused, what does visit mean? If I am just going through the site or just refreshing, does that mean second visit?
it’s any “hit” to the webpage. it doesn’t take into account sessions
Hi there,
first of all a big big thank you for developing this script.
I added this to a site and it works fine everywhere: Android/Chrome, an old iPod touch/Safari, an iPad/Safari and even in debug mode on every desktop browser – except iPhone. Neither in iPhone 6 nor in v5 or v4 there is any appearance of the overlay.
I loaded the newest version from GitHub, but no change – maybe you have still an idea wht’s wrong?
Thank you and best wishes,
Bine
Well, I found out what was wrong: all iPhones I tested this private mode was activated. If you deactivate private mode, the script works perfectly 🙂
Anyone able to help with google analytics event tracking? I’d like to measure if a user got “add to home screen dialog”, that is all.
I’m on an iphone 5 with iOS 9.3.2 and when I loaded the live demo link
http://lab.cubiq.org/addtohome/demos/simple/
it worked fine and the add to homescreen icon/message was displayed. However, when I reloaded the page, could not get the icon/message to display again. Tried a few more times but the icon/message was only displayed once. Is the icon/message supposed to reload/display each time you reload the page or is it only supposed to display once?
Also copied the demos/simple/index.html code and customized it on our domain as follows:
addToHomescreen({
maxDisplayCount: 10
});
When I loaded the page, it would not even display the icon/message. Changed it to “maxDisplayCount: 0” (as the default for index.html), but same thing – could never get the icon/message to display.
I feel like I’m doing something wrong but cannot figure out why the install icon/message never displays again.
David, you need to change the number “1” below to the maximum number of times you want to display the icon in the same device:
addToHomescreen({
skipFirstVisit: true,
maxDisplayCount: 1 (INCREASE THIS NUMBER)
});
Also, change:
skipFirstVisit: true
to
skipFirstVisit: False
to display the icon since the first time.
Hi. Thank for your script.
But I have a question. I added this script to my site and it work fine on iOS. However on other mobile device (exam Android) I get the message (only text non-styled). In Chrome emulator I can’t reproduce this, only on real devices.
Oh, sorry… Script works great. The problem is only my own error…
But I have another question:) Can I running it only for iOS, not Android?
Hi Matteo,
I noticed there is a difference between the .js and .min.js files. In the .js file the ios message for nl_nl starts with ‘Om deze webapp aan je startscherm toe te voegen’. In the .min.js file this message starts with ‘Om deze webapp op je telefoon te installeren’. The .min.js file should probably be regenerated?
Rob
yes, the min version is not up to date. thanks for the heads-up!
Hey Matteo
Thanks a lot for this. I have a question is there anyway to make it so that the bookmark saves a different link. I’m not a master JS guy so it maybe a silly question.
Thanks
Thanks for this utility. This is also used in webapps created with http://www.socialcreator.com
Hello,
My users don’t ever go thru the HOME page, instead they are directed to specific pages on my website that they want to look at. Where do I need to place each of the scripts so that they will run when someone links directly to an internal page on my website?
Thanks for the help,
MJ
When I poen the site in mobile, the pop up appeers in some overlay over the screen, so I don’t see any content until the popup time is over. What can I do to fix it? I want the popup to apeer over the cotent of the page.
This part of the code is incorrect:
// try to get the highest resolution application icon
if ( !this.applicationIcon ) {
this.applicationIcon = document.querySelector(‘head link[rel^=apple-touch-icon][sizes=”192×192″],head link[rel^=apple-touch-icon][sizes=”152×152″],head link[rel^=apple-touch-icon][sizes=”120×120″],head link[rel^=apple-touch-icon][sizes=”76×76″],head link[rel^=apple-touch-icon][sizes=”60×60″],head link[rel^=apple-touch-icon]’);
}
This will obtain the first node in the DOM that matches ANY of the listed selectors, instead of attempting the listed selectors in order. Thus, there is no guarantee that the highest-resolution icon will be selected. This could resolve this issue:
// try to get the highest resolution application icon
if ( !this.applicationIcon ) {
this.applicationIcon = document.querySelector(‘head link[rel^=apple-touch-icon][sizes=”192×192″]’);
}
if ( !this.applicationIcon ) {
this.applicationIcon = document.querySelector(‘head link[rel^=apple-touch-icon][sizes=”152×152″]’);
}
if ( !this.applicationIcon ) {
this.applicationIcon = document.querySelector(‘head link[rel^=apple-touch-icon][sizes=”120×120″]’);
}
if ( !this.applicationIcon ) {
this.applicationIcon = document.querySelector(‘head link[rel^=apple-touch-icon][sizes=”76×76″]’);
}
if ( !this.applicationIcon ) {
this.applicationIcon = document.querySelector(‘head link[rel^=apple-touch-icon][sizes=”60×60″]’);
}
if ( !this.applicationIcon ) {
this.applicationIcon = document.querySelector(‘head link[rel^=apple-touch-icon]’);
}
please send code suggestions to github
I looked through the source but had a hard time finding out all the animation types. From the comments I saw:
– animationIn: ‘bubble’
– animationIn: ‘drop’
Are there others? What’s the full list?
one bubbles up from bottom. the other drops from top.
Hello Matteo! Great script!!
Could you give me one usage example of message custom option?
addToHomescreen({
message: ‘some text message here’;
});
How can I change specific language and OS message? (without changing the defaults)
Example: Customizing the message for iOS (portuguese) and another for Android (portuguese)
Thanks
Hi dude, i have also find out one good example
Create Notification Alert – Android
Really struggling to get this working for some reason! I’ve copied the src, style and imgs folders into my home folder along with the ‘simple’ demo index.html. I’ve altered the references in the index.html so they point to the right places, but can’t get it to work on my iPhone 6S. The live demo link at the top of this page works fine. Can anyone suggest what I might be missing?
Once the pop up has been dismissed by clicking the “X”, will it still show again after 1440 minutes?
Hi guys,
our website is a WordPress website, i’ve placed the ATH folder somewhere and call the .js function in the header file with giving the full path of the files. the ATH didn’t work.
wondering where to locate the .js file? how to pass the .js and .css path in the header file? (I mean a full path like public_html/wp-content/themes/jupiter/ATH/style/addtohomescreen.css or not)
thanks for your help
Is there a way to customize the URL that is added on the home screen. I would like to set it to the home page. However, when I use this to add the icon, the default URL shown is the page on which the user is.
HI could you please provide the demo / sample code for the language display based on the language setting ?
The reason why i need is because I did switched my phone language to chinese but still display in english.
Does it support Bahasa Malaysia language ? May i know the code of it ?
i have 2 different pages within the same site that i would like to have this run on, each page having its own settings and session cookie. so that either page can be independently placed on the homescreen. How do i have seperate session instances of this within the same site?
nevermind, i found the answer. looked right past it so many times.
home screen icon is not created. Please help me?