cubiq / add-to-homescreen Goto Github PK
View Code? Open in Web Editor NEWAdd to home screen call-out for mobile devices
Home Page: http://cubiq.org/add-to-home-screen
Add to home screen call-out for mobile devices
Home Page: http://cubiq.org/add-to-home-screen
If multiple touch icons, all with different sizes, are supplied in the document but the iDevice is not retina then no touchIcon is displayed. I believe the following section of code is the culprit.
if ( icons.length ) {
for ( i = 0, l = icons.length; i < l; i++ ) {
sizes = icons[i].getAttribute('sizes');
if ( sizes ) {
if ( isRetina && sizes == '114x114' ) {
touchIcon = icons[i].href;
break;
}
} else {
touchIcon = icons[i].href;
}
}
touchIcon = '<span style="background-image:url(' + touchIcon + ')" class="addToHomeTouchIcon"></span>';
}
I totally respect that this is an important feature in most applications. I have built offline apps that need to be saved to the home screen in order to run correctly. Therefore - I need to make "adding to homescreen" required.
How do you recommend I remove the close button - without breaking anything else.
Great job on version 3!
The only issue I have found is that the message is displayed in Chrome on iOS.
Hi,
The Turkish (tr_tr) translation is so wrong . The translation says that " After installing this app to %device, touch %icon to Add Home Screen. "
It should be:
"Bu uygulamayı %device'a eklemek için %icon simgesine sonrasında 'Ana Ekrana Ekle' düğmesine basın."
returningVisitoreturningVisitor / expire setting for if user has added as shortcut don't show messager / expire setting for if user has added as shortcut don't show message.
Case: User adds shorcut, don't prompt again
Polish [pl_pl] translation contains orthographic and interpunction errors and is not up to date with iOS 7 label for "Add to home screen" button. So it should be as following:
Aby zainstalować tę aplikację na %device dotknij %icon a następnie 'Dodaj do ekranu początkowego'.
(Although I would personally drop the "%device" part I see that you keep it in all the translations so I do not suggest that.)
Czech (cs_cz) localisation is included in the source file but misses in the readme file.
Localized string is not translated correctly, please update it to the:
'Pro instalaci aplikace na Váš %device stiskněte %icon a v nabídce vyberte Přidat na plochu.'
The close button doesn't work on iPhone5 with ios6 (tested with two devices).
It would be nice if a click on the hole balloon would close the balloon.
Hi,
I don't really understand why, but when i create a new page and add add2home it works. If I refresh the browser it doesn't appear again. No matter what I do -clear the cache or even restart the iphone, it won't appear again. Here's how I implemented the code:
<script type="text/javascript"> if ('standalone' in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion)) { var addToHomeConfig = { animationIn:'bubble', // Animation In animationOut:'drop', // Animation Out lifespan:10000, // The popup lives 10 seconds expire:2, // The popup is shown only once every 2 minutes touchIcon:true, message:'Install this book on your %device: Tap on the`%icon`and then Add to Home Screen.' }; document.write(''); document.write('<script type="application\/javascript" src="http://www.sangayoga.org/add2home/src/add2home.js" charset="utf-8"><\/s' + 'cript>'); } </script>Is it possible to have like say -1 value make the message show only once, no time duraction
It would be great if we can see how many or when they are adding the website to their homescreen. For google analytics it should be possible with Event Tracking: https://developers.google.com/analytics/devguides/collection/analyticsjs/events?hl=nl
I have no idea how to implement this in addtohomescreen, but maybe its a great feature when this could work?
Whit Ios 6.1.3 and Iphone 5 after create a icons on device and click it.. open the site not in full screen but in Iphone 4/4s resolution mode... on ipad 4 whit same ios e iphone 4/4s same ios the site is open in full screen resolution..
any fix?
When combined with a hide URL bar script, the add to home screen popup appears halfway above the fold, rather than right at the bottom.
Specifically it has problems Scott Jehl's normalized address bar hiding: https://github.com/scottjehl/Hide-Address-Bar
Not necessarily something that should be your responsibility to support, but it would be nice if it did.
Some Android devices (like the Samsung Note) have a hardware menu key. If this is the case, Chrome hides the "three vertical dots" menu button in its interface so the ATH message ends up pointing the 'open tabs' button.
I didn't find a way to detect if the existence of a hardware menu button for a web app (although it looks like you can on a native app). A potential workaround could be to hide the arrow and change the message to say "menu" button instead of the image?
(BTW, thanks for this plugin!)
https://twitter.com/#!/JmacDotOrg/status/183935190995976192/photo/1
We might want to verify if the user is running the browser, is in a WebView or a standalone Web app before we show the bubble because the '+' sign might not be where we think
Is it possible to add support for the normal Android Browser, too? I'm not very familiar with all the Android stuff, but it's possible to a homescreen-icon through the star button in the browser and switch the option "Add to" , to "Homescreen".
It's not very different to the normal Chrome Action, just one step more.
PS: I already saw the old and closed issue ticket, but maybe you think about it again :)
This may be kind of an odd combination of steps, but seems like it should be handled more gracefully.
From the tutorial:
'If the user intentionally closes the balloon, it won’t show up again for all the duration of that session. This feature overrides all your configurations, even if you set the balloon to show up every single time, if the user taps the close button the message won’t be shown until the browser is closed and reopened.'
For me, this is not working. Even if the user closes the balloon it shows up again. Not always, but a lot of the times. What could be causing this? I'm just using the standard settings. Tested with Safari on an iPhone 3GS iOS 6.1.6.
Anyone having the same issue?
The apple-touch-icon that is displayed is small, so it is zoomed-in and gets pixelated.
If a larger apple-touch-icon is available, that one should be used instead.
I am testing on iPhone 4 with iOS 6.
Hi,
I really liked the concept for isReturningVisitor to maximize the change of the user to add your webapp to home screen.
I having issue with isReturningVisitor settings
Scenario :
1 - Reset iOS simulator (that will clear the localStorage, sessionStorage, the lot) --> simulate first visit
2 - I ran the suggest-config example from master
3 - Got the add to home screen bubble on the first visit (should be only on the second)
config : addToHomeConfig = {
returningVisitor: true, // Show the message only to returning visitors (ie: don't show it the first time)
expire: 720 // Show the message only once every 12 hours
};
is that a known issue ?
The options icon has been shifted right on iOS6 on the iPad when you have iCloud Tabs enabled.
Screenshot: http://imgur.com/9Qtuo
The code used to determine the touchIcon
URL takes account of the ordering of icon definitions. It always returns the first icon found in DOM. If this is the icon with the lowest resolution. That's the one that will be displayed. Even on a retina device.
> document.querySelector('head link[rel^=apple-touch-icon][sizes="114x114"],head link[rel^=apple-touch-icon][sizes="144x144"],head link[rel^=apple-touch-icon]')
always returns: <link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png" />
According to https://developer.mozilla.org/en-US/docs/Web/API/Element.querySelector
Summary
Returns the first element that is a descendent of the element on which it is invoked that matches the specified group of selectors.
Syntax
In this example, the first style element which either has no type or has type text/css in the HTML document body is returned:
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
Therefore to currently get a retina icon on a retina device the icon definition in the HTML header has to be in descending order
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png" />
Maybe you should mention this in the documentation
On iPhone4S/iOS5.1, when screen is landscape, the bubble isn't centered.
I suggest that the orientationCheck() function be like this:
balloon.style.marginLeft = -Math.round(balloon.offsetWidth / 2) - ( w.orientation%180 && OSVersion >= 6 ? 40 : 0 ) + 'px';
thanks
Using modal: false still covers my DOM with the div .ath-viewport so I can't click on elements visible behind the modal that comes down.
My code during testing:
addToHomescreen({
startDelay: 2,
modal: false,
displayPace: 0,
icon: false
});
Hi,
Is there any setting available to have the popup only appear one time, even after they reopen their browser? That way they're not pestered by it everytime they visit the page within safari, even if they've already added the app to their homescreen.
I'd be willing to add this feature in if it's not currently available and it's something that would be desired.
Thanks
Is there anyway with this code to bookmark a different page than the page on which the popup is shown? For example, I'd like to display the popup on example.com/getourapp but bookmark example.com/app.
Thanks!
Oh man am I glad to have found this library was the cause for my issues. All JS execution was stopping because of the following JS error:
Unable to get property 'length' of undefined or null reference
I managed to get a remote debugger working since this crappy Nokia Lumina phone doesn't have anything to help.
ANYWAY. It was failing on a line from this library's code. I can't tell exactly where as it only gives me a line number, but it's one of the following:
ath.language=ath.language.length==2
var isValidLocation=!this.options.validLocation.length
for(var i=this.options.validLocation.length;
I'll keep digging to find out exactly which one.
For the first time I am getting a popup and I am adding that link to bookmarks and after clearing cache of iPhone browser(Safari) again it is showing popup. It should never come back if I have already Bookmarked the site.
Hey, just letting you know that when the user has Safari on private browsing, the user can't close the bubble.
I think the issue is because of sessionStorage when in private browsing, I worked around this in a way by reordering the clicked function to have close() get run first, so that at least the user can close the bubble.
add ios7 compatibility
The line #99 :
ath.language = ath.language.length == 2 && ath.language + '_' + ath.language;
Should be something like this because actually it set the language to false
ath.language = ath.language.length == 2 ? ath.language + '_' + ath.language : ath.language;
I want to count the action times that popup show , click and reset, so I add three other options to the addToHomeConfig
:
initCallback: function() {},
clickCallback: function() {},
resetCallback: function() {}
then add function call in every action, in init(), for example:
if ( options.initCallback ) setTimeout(function() { try {options.initCallback();} catch(e) {console.log(e);} }, 0);
This may make the code unsafe, but really useful.
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library cubiq/add-to-homescreen
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "cubiq/add-to-homescreen",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
The popup is appearing on Google Chrome, both normal and incognito mode.
See attached or https://www.dropbox.com/s/1p9kznt9rnoxjs4/chrome-add-to-homescreen-bug.png, which shows it occurring in incognito mode. (Disregard the appearance of the web app... it's still a work in progress.)
Using script as-is; no modifications have been made.
Chrome: Version 26.0.1410.50
iPhone 4S: Version 6.1.2 (10B146)
Do I add in the CSS file, too? Or just the JS file?
The popup is popping up too far from the share button on my iPhone 4s device and in simulator as well.
I've tried changing:
bottomOffset: 14
to
bottomOffset: 0
on both the addtohome.js and a custom script on the index.html page like so:
var addToHomeConfig = {
animationIn: 'fade',
animationOut:'bubble',
lifespan:10000,
expire: 720, // Show the message only once every 12 hours
bottomOffset: 0,
touchIcon:true
};
Anyone else has this issue?
BTW, works perfectly on the iPad 2 iOS 6 and in the simulator.
Here's a pic from the iPhone 5 simulator: http://syntheticmedia.net/popup.png
hi there,
when you have a look at your live demo at http://cubiq.org/dropbox/a2h/examples/simple/, you´ll see, that on orientation change back from landscape to portrait, the content is slightly moved to the left due to your script. when you i close the overlay or wait for it to close itself the problem is gone. that is exactly the problem that i have at the moment with the code. i tried to play around with your setPosition function and indeed that code causes this problem. it seems that the animation is causing this. any ideas on this topic? i also would be happy if the bubble is not moving from its previous position than rather reposition itself from the center of the screen or whatever from the beginning maybe.
thanks for any help
Hello, I know that this script currently does not work on Windows Phone,
I saw the code and I know that this request is in TODO ..
As a developer I be able to test on my Windows Phone Nokia Lumia 820 possible release. (I have preview developer release Win 8.1 Phone) and IE browser have a possibility to ADD to Start Web Page...
greetings
Paul
Hi,
I upgraded from v2.0.8 to v3.0.7.
Version 3.0.7 line 339 returns null for this.session
so this line fails:
var lastDisplayTime = this.session.lastDisplayTime;
this error occurs:
[Error] TypeError: 'null' is not an object (evaluating 'this.session.lastDisplayTime')
show (addtohomescreen.min.js, line 2)
I had to patch it with:
if (this.session !== null && typeof this.session === 'object') {
var lastDisplayTime = this.session.lastDisplayTime;
} else {
var lastDisplayTime = 0;
}
Best,
Philipp
Maybe add some information that the plugin doesnt work in incognitomode on iOS. Took me an hour to figure out why it didnt work hehe...
I have tested this plugin with the iOS7 beta and since the sign for adding to homescreen has changed it is not showing the proper icon.
I really appreciate if this can/will be updated sooner then later, since there will be coming a lot of request for this soon i guess ;-)
http://www.mobilexweb.com/wp-content/uploads/2013/06/share.png
I get this error in safari when running on my iPad 2 (iOS 5.0.1):
security_err dom exception 18: An attempt was made to break through the security policy of the user agent
I am doing research and will post anything I find.
Thanks,
Dan
It was supported on 2.0.4, it's on purpose or a bug?
Thank you!
Hi,
Just wondering if you are still maintaining this repo. There seems to be a fare few legitimate pull requests pending.
I'd be have to help if you don't have the time.
nl_nl: {
message: 'Om deze webapp op je telefoon te installeren, klik op %icon en dan %action.',
action: { ios: 'Voeg toe aan beginscherm', android: 'Toevoegen aan startscherm', windows: 'pin to start' }
}
PS. i don't know the correct translation which is used on windows phone.
Hi,
I found yesterday that we can now add our web app to home screen for Chrome Android.
https://developers.google.com/chrome/mobile/docs/installtohomescreen
Some help and javascript hack to make it possible to prompt user to save to home screen.
http://www.mobilexweb.com/blog/home-screen-web-apps-android-chrome-31
Are you interested in implementing support for these devices among others?
Here is an example implementation: https://github.com/niftylettuce/jqm-mobile-bookmark-bubble/blob/master/bookmark_bubble.js#L291
Set Settings -> Safari -> Private Browsing -> on
Visit Official Demopage http://cubiq.org/dropbox/a2h/examples/simple/
On iOS 6 and iOS 7 you cannot close the Layer via click on the X.
After 10 Seconds the Layer will close as you expect.
Greetings
Florian
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.