当我为网站启用 HTTPS 时,我很难在 Safari 中的“添加书签”功能中显示 Apple Touch 图标。我可以使用“添加到主页”选项来使其工作,所以我不确定是否对“添加书签”进行了不同的调用。
我已经按照苹果文档 https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html,其中不包含太多信息。我还发现以下链接有些帮助:
http://www.jonathantneal.com/blog/understand-the-favicon/ http://www.jonathantneal.com/blog/understand-the-favicon/
https://github.com/audreyr/favicon-cheat-sheet https://github.com/audreyr/favicon-cheat-sheet
https://mathiasbynens.be/notes/touch-icons https://mathiasbynens.be/notes/touch-icons
网站图标 - 最佳实践 https://stackoverflow.com/questions/19029342/favicons-best-practices
我尝试了多种不同的链接引用组合,例如:
- 提供无
<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
and https
- 它在 nginx 代理后面运行以提供 ssl,我尝试过让 nginx 从单独的位置检索图像作为静态资源,或者只是让 web 应用程序处理图像请求。
我不确定问题是什么 - 这些选项适用于“添加到主页”,但不适用于“添加书签”,有什么想法吗?
注意:虽然我真正希望它运行的网站在身份验证后具有 HTTPS,但即使我在没有身份验证的测试网站上运行它,它仍然存在问题。
Update 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"
好的,它找到了我设置的众多苹果触摸图标之一,并且在单击“添加到主屏幕”时出现,太棒了。然后,当我单击“添加书签”按钮时,我会看到下一个访问日志:
"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 重定向。进行此调用是为了确定页面的主要颜色,以便默认罗盘图标可以具有与页面匹配的背景颜色。奇怪的是:为什么这会被称为,它不应该首先尝试调用苹果触摸图标吗?
此外,即使两个请求都来自同一台 iPad,用户代理也是不同的 - 非常奇怪。