cubiq / add-to-homescreen Goto Github PK

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.

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

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

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

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

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
});

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

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!)

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

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

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.

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.

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

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

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

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?

Do I add in the CSS file, too? Or just the JS file?

1. Create the object using the "OPEN THE POP UP PROGRAMMATICALLY" method with the debug option false or not specified
2. Use the .show method with the 'true' flag to make sure the pop-up comes up for testing.
   In Chrome on Windows, you get a JavaScript error from line 361:
   Uncaught TypeError: Cannot set property 'lastDisplayTime' of null
   The relevant code:
   // increment the display count
   this.session.lastDisplayTime = now;

This may be kind of an odd combination of steps, but seems like it should be handled more gracefully.

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.

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.

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;

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

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.)

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:

Is it possible to change the red closing icon on Android to a dark grey with transparant background?

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.

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.

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>';
    }

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.

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 options icon has been shifted right on iOS6 on the iPad when you have iCloud Tabs enabled.
Screenshot: http://imgur.com/9Qtuo

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.

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

It was supported on 2.0.4, it's on purpose or a bug?

Thank you!

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

Great job on version 3!

The only issue I have found is that the message is displayed in Chrome on iOS.

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.

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

Is it possible to have like say -1 value make the message show only once, no time duraction

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

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."

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 ?

add ios7 compatibility

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?

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)

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 :)

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?

Hey, maintainer(s) of cubiq/add-to-homescreen!

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!