安卓浏览器哈希更改后没有苹果触摸图标预编译

Question

我在安卓股票浏览器和移动Chrome上遇到了一个奇怪的事情（bug？），这两个浏览器都安装在安卓ICS 4.0.3/4上（我都测试过了）。从可靠的消息来源，我听说同样的问题出现在Android 2.3上。

我想要实现的目标：我最近添加了apple touch图标预合成的图标链接，如果保存到主屏幕，它可以用来让我的移动网站看起来像一个应用程序。我还添加了一个书签气泡，通知用户他们现在可以将我的移动网站保存为"应用程序"。当然，我不想向任何在主屏幕上通过类似书签的应用程序打开我网站的人显示这个气泡，所以我在加载时为那些还没有散列的人添加了一个特殊的散列。这样，当他们保存我的网站时，他们会用哈希来保存它，因此我可以检查他们是通过正常链接my.website.com/还是通过他们的书签my.webite.com/#specialhash打开我的网站。我使用了一个很棒的库来简化整个过程：https://github.com/okamototk/jqm-mobile-bookmark-bubble

问题：然而，在安卓系统上，每当我通过JS更改哈希时，浏览器/操作系统都不会识别apple touch图标预先组合的图标链接，只保存常规的favicon.ico（看起来很可怕，一点也不像应用程序）。

他们有什么我能做的吗？

PS。在Mobile Chrome中，预先编译好的apple touch图标会保存到书签库中，但每次我试图将其保存到主屏幕时都不会。

Answer 1

这是移动Chrome的一个问题。查看此错误。经过实验，使用apple-touch-icon可以将其保存在书签库中，并在添加到主屏幕时将其渲染为页面上的一个小图标，但使用apple-touch-icon-precomposed根本不会在主屏幕上渲染它——我在页面图标上得到了一个地球仪。除了通过股票浏览器添加书签，并使用股票书签小部件将其添加到主屏幕之外，你现在真的什么都做不了。这些图标的Chrome书签和小部件已损坏。

Answer 2

此解决方案适用于Android默认浏览器。

似乎在哈希更改后，android默认浏览器会对书签链接感到困惑，可能是因为它不再识别url了。我发现，如果书签图像链接标签在哈希更改后立即通过JavaScript插入DOM，在本例中是jQuery，那么问题就解决了。这是我用来解决这个问题的解决方法：

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