サイトで HTTPS を有効にしている場合、Safari の「ブックマークの追加」機能に Apple Touch アイコンを表示するのに苦労しています。「ホームに追加」オプションで動作させることができるので、「ブックマークの追加」に対して別の呼び出しが行われているかどうかはわかりません。
私はApple Documentationに従いましたが、これにはあまり情報が含まれていません。また、次のリンクも多少役立つことがわかりました。
http://www.jonathantneal.com/blog/understand-the-favicon/
https://github.com/audreyr/favicon-cheat-sheet
https://mathiasbynens.be/notes/touch-icons
次のようなリンク参照の複数の異なる組み合わせを試しました。
<link>要素を提供せずapple-touch-icon.png、ルート ディレクトリに名前の付いた画像のみを残します。- 次のような相対 URL を持つ要素を提供します。
<link rel="apple-touch-icon" href="example.com/apple-touch-icon.png"> - のような絶対 URL を持つ要素を提供し
<link rel="apple-touch-icon" href="http://example.com/apple-touch-icon.png">ますhttp。https - これは、sslを提供するためにnginxプロキシの背後で実行されました.nginxに別の場所から静的リソースとして画像を取得させるか、単にwebappに画像リクエストを処理させることで試しました.
問題が何であるかわかりません。これらのオプションは「ホームに追加」では機能しますが、「ブックマークの追加」では機能しません。何かアイデアはありますか?
注: これを実際に機能させたいサイトでは認証の背後に HTTPS がありますが、認証なしでテスト サイトでこれを実行しても、まだ問題があります。
更新 1
nginx のアクセス ログを有効にしていますが、奇妙なことがわかります。サイトをロードし、上向きの矢印が付いた小さなボックスをクリックして外に出ます。これを行うとすぐに、次のアクセス ログが表示されます。
"GET /apple-touch-icon-152x152-precomposed.png HTTP/1.1" 200 17758 0.000 "-" "MobileSafari/600.1.4 CFNetwork/711.1.12 Darwin/14.0.0"
さて、私がセットアップした多くのアップルタッチアイコンの1つを見つけて、「ホーム画面に追加」をクリックすると表示されました。次に、[ブックマークの追加] ボタンをクリックすると、次のアクセス ログが表示されます。
"GET /news/ HTTP/1.1" 302 0 0.001 "-" "Mozilla/5.0 (iPad; CPU OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12B410"
これは、認証による 302 リダイレクトです。この呼び出しは、ページの原色を決定するために行われるため、デフォルトのコンパス アイコンの背景色をページに一致させることができます。奇妙なことは、なぜこれが呼び出されるのですか?最初にapple-touch-iconを呼び出そうとしないのですか?
また、両方のリクエストが同じ iPad から来ているにもかかわらず、ユーザー エージェントが異なります - 非常に奇妙です。