3

当我为网站启用 HTTPS 时，我很难让 Apple Touch 图标显示 Safari 中的“添加书签”功能。我可以使用“添加到主页”选项让它工作，所以我不确定是否正在为“添加书签”进行不同的调用。

我遵循了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">，同时带有http和https
  4. 这已经在 nginx 代理后面运行以提供 ssl，我已经尝试让 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"

好的，所以它找到了我设置的众多苹果触摸图标之一，它在单击“添加到主屏幕”时出现，非常棒。然后，当我单击“添加书签”按钮时，我会看到下一个访问日志：

"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

0

我的问题是，在我的本地开发环境中，我使用了无效的自签名证书。Safari 不会从具有无效证书的站点下载苹果触摸图标。

于 2021-02-03T18:57:38.140 回答