複数のブランド サイトに 1 つのコード ソースを使用する HTML モバイル Web アプリがあります。各「サイト」には、サイトをホーム画面にブックマークするときに使用する独自の「apple-touch-icon.png」が必要です。これを iOS で動作させることはできますが、Android では動作させません。
プロジェクトに Angular.JS を使用しているため、index.html ファイルに動的パスを直接指定してみました。次に例を示します。
<link rel="apple-touch-icon" sizes="144x144" ng-href="/icons/144/{{bankId | lowercase}}-apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" ng-href="/icons/144/{{bankId | lowercase}}-apple-touch-icon.png">
これは iOS では機能しますが、Android では機能しません。
また、jQuery を介してタグを追加しようとしました。たとえば、次のようになります。
$('head').append('<link rel="apple-touch-icon" sizes="144x144" href="/icons/144/'+bankId+'-apple-touch-icon.png">' +
'<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/icons/144/'+bankId+'apple-touch-icon.png">');
これは iOS でも機能しますが、アイコンが表示されるまでにかなりの遅延があります。繰り返しますが、これは Android では機能しません。
ルート フォルダーに apple-touch-icon.png を残したままにしておくと、Android はそれを見つけますが、これは機能しません。
他にこれを行う方法を誰かが提案できますか?