Android Browser after hash change no apple-touch-icon-precomposed

Question

I have encountered a weird thing (bug?) on Android Stock Browser and Mobile Chrome, both installed on Android ICS 4.0.3/4 (I've tested both). From reliable sources I have heard the same issue appears on Android 2.3.

What I want to achieve: I recently added the apple-touch-icon-precomposed icon link, which can be used to make my mobile website look like an app if saved to the Home screen. I also added a bookmark bubble to inform users that they can now save my mobile website as an "app". Of course, I don't want to show the bubble to anyone who opened up my website from their app-like bookmark on their Home screen, so I add a special hash on load for anyone who doesn't already have the hash. That way, when they save my website, they'll save it with the hash and thus I can check whether they opened up my website through the normal link my.website.com/ or through their bookmark my.website.com/#specialhash. I simplified this whole process by using an awesome library for it: https://github.com/okamototk/jqm-mobile-bookmark-bubble

The issue: However, on Android, whenever I through JS change the hash, the browser/the OS won't recognize the apple-touch-icon-precomposed icon links and only save the regular favicon.ico (which looks horrible and not at all like an app).

Is their anything I can do?

PS. In Mobile Chrome the proper apple-touch-icon-precomposed gets saved into the bookmark library, but not whenever I try to save it to the Home screen.

Answer 1

This is an issue with Mobile Chrome. See this bug. Experimenting, it appears that using apple-touch-icon saves it in the bookmarks library and renders it as a small icon on a page when added to the homescreen, but using apple-touch-icon-precomposed doesn't render it on the homescreen at all - I get a globe on a page icon. There's not really anything you can do right now, except to add the bookmark through the stock browser, and use the stock bookmark widget to add it to the homescreen. The Chrome bookmark and widget is broken for these icons.

Answer 2

This solution is for the Android default browser.

It seems that after a hash change, the android default browser gets confused about the bookmark link, maybe because it doesn't recognize the url anymore. I found that if the bookmark image link tag is inserted into the DOM right after the hash change, via JavaScript, and in this case, jQuery, the problem is fixed. This is the workaround I used to address this problem:

// create the bookmark link 
MyObject.prototype.getBookmarkLink = function(imageName)
{
   var html = '';
   if (imageName) {
   html = '<link rel="apple-touch-icon-precomposed" href="' + PathToImages + '/' + imageName + '" />';
   }
   return html; 
};

MyObject.prototype.insertBookmarkImage = function(imageName)
{
   if (imageName) {
     // try to get the link that may already be there
     var existingBookmark = jQuery("link[rel='applfe-touch-icon-precomposed']");
     // if able to find it...
     if (existingBookmark.length) {
        // remove it...
        existingBookmark.remove(); 
        // ... then, put it back 
        jQuery('head').append(existingBookmark);
     } else {
        // we were not able to find it, so add a new one
        jQuery('head').append(this.getBookmarkLink(imageName)); 
     }
   }
};