3

サイトで 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

ファビコン - ベスト プラクティス

次のようなリンク参照の複数の異なる組み合わせを試しました。

  1. <link>要素を提供せずapple-touch-icon.png、ルート ディレクトリに名前の付いた画像のみを残します。
  2. 次のような相対 URL を持つ要素を提供します。<link rel="apple-touch-icon" href="example.com/apple-touch-icon.png">
  3. のような絶対 URL を持つ要素を提供し<link rel="apple-touch-icon" href="http://example.com/apple-touch-icon.png">ますhttphttps
  4. これは、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 から来ているにもかかわらず、ユーザー エージェントが異なります - 非常に奇妙です。

4

1 に答える 1