Apple Web Clips(Apple Touch图标)不适用于使用HTTPS的网站 [英] Apple Web Clips (Apple Touch Icons) not working for site with HTTPS
问题描述
当我为网站启用HTTPS时，很难在Safari中为添加书签"功能显示Apple Touch图标.我可以使用添加到家庭"选项来使它工作，所以我不确定是否正在对添加书签"进行其他调用.
I'm having difficulty getting the Apple Touch Icon to show up for the "Add Bookmark" feature in Safari when I have HTTPS enabled for the site. I can get it working with the "Add to Home" option, so I'm not sure if a different call is being made for "Add Bookmark".
我遵循了 Apple文档，其中不包含太多信息.我还发现以下链接会有所帮助:
I've followed the Apple Documentation, which does not contain very much info. I also found the following links to be somewhat helpful:
http://www.jonathantneal.com/blog/understand-the- favicon/
https://github.com/audreyr/favicon-cheat-sheet
https://mathiasbynens.be/notes/touch-icons
我尝试了链接引用的多种不同组合，例如:
I have tried multiple different combinations of link references, such as:
- 不提供任何
<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 - 这已经在nginx代理后面运行以提供ssl，我已经尝试过让nginx从单独的位置检索图像作为静态资源，或者只是让webapp处理图像请求.
- Providing no
<link>elements and instead only leaving an image with the nameapple-touch-icon.pngin the root directory. - Providing an element with a relative URL, such as:
<link rel="apple-touch-icon" href="example.com/apple-touch-icon.png"> - Providing an element with an absolute URL, such as:
<link rel="apple-touch-icon" href="http://example.com/apple-touch-icon.png">, both withhttpandhttps - This has been run behind an nginx proxy to provide ssl, I have tried it with having nginx retrieve the images as static resources from a separate location, or just letting the webapp handle the image request.
我不确定问题出在哪里-这些选项是否适用于添加到家庭"，但不适用于添加书签"，有什么想法吗?
I'm not sure what the issue is - these options work for "Add to Home" but do not work for "Add Bookmark", any ideas?
注意:尽管我真正希望其运行的网站具有HTTPS身份验证，但是即使我在没有身份验证的测试站点上运行它，仍然存在问题.
Note: Although the site I really want this to work on has HTTPS behind authentication, even when I run this on a test site without authentication, it still has an issue.
更新1
我已打开nginx访问日志，并且看到了一些奇怪的东西.我加载了该站点，然后单击带有箭头的小框，该箭头向上并指向该框.这样做后，我立即看到以下访问日志:
I have nginx access logs turned on, and I see something strange. I load the site, and then click the little box with an arrow pointing up and out of it. As soon as I do that I see the following access log:
"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"
好的，所以它找到了我设置的许多苹果触摸图标之一，当单击添加到主屏幕"时，它会显示出来，很好.然后，当我单击添加书签"按钮时，我会看到下一个访问日志:
Okay, so it found one of the many apple-touch-icons I setup, and it appears when clicking "Add to Home Screen", great. Then when I click the "Add Bookmark" button I see the next access log:
"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吗?
This is a 302 redirect because of authentication. This call is being made to determine the primary color of the page, so that the default compass icon can have a background color that matches the page. The strange thing is: why does this even get called, shouldn't it try to call for an apple-touch-icon first?
而且，即使两个请求都来自同一iPad，用户代理也不同-非常奇怪.
Also, the user agents are different, even though both requests come from the same iPad - very strange.
推荐答案
我的问题是，在本地开发环境中，我使用的是无效的自签名证书. Safari不会从证书无效的网站上下载Apple Touch图标.
My issue was that in my local dev environment I was using a self signed cert that was invalid. Safari wouldn't download the apple touch icon from a site with an invalid cert.
这篇关于Apple Web Clips(Apple Touch图标)不适用于使用HTTPS的网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
