iOS 设备不使用 PWA-Icon答案

【问题标题】：PWA-Icon not used by iOS DevicesiOS 设备不使用 PWA-Icon
【发布时间】：2018-12-11 09:29:10
【问题描述】：

这就是我在 index.html 的 head 部分中的内容：

<head>
  <meta charset="utf-8">
  <title>MeasurementProtocols</title>
  <base href="/index.html">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="./assets/icons/apple/touch-icon-ipad.png">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="manifest"  crossOrigin="use-credentials" href="manifest.json">
  <link rel="apple-touch-icon" href="./assets/icons/apple/touch-icon-iphone.png">
  <link rel="apple-touch-icon" sizes="120x120" href="./assets/icons/apple/touch-icon-ipad.png">
  <link rel="apple-touch-icon" sizes="152x152" href="./assets/icons/apple/touch-icon-iphone-retina.png">
  <link rel="apple-touch-icon" sizes="180x180" href="./assets/icons/apple/touch-icon-ipad-retina.png">
  <meta name="theme-color" content="#1976d2">
</head>

如果我想通过 Apple 设备将网页添加到主屏幕，iPhone 会截取屏幕截图作为图标，尽管我将图标添加到 index.html 中，正如苹果描述的那样：https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

那么我错过了什么，或者它不适用于将 href 指向资产而不是主文件夹？

【问题讨论】：

您是否使用 HTTPS 进行测试？它是 iOS 的必需品。
@Hannes 不，iOS 不使用清单中的图标，正如我之前读过的那样。如果我错了，请告诉我
我知道，但是要使您的标题中的链接正常工作，您的页面必须通过 https 而不是通过 http 传输。你在用 https 吗？
@Hannes 我正在使用 https，是的
您在 iOS 设备上使用的是 safari 而没有其他浏览器？

标签： ios angular icons progressive-web-apps

【解决方案1】：

带有图标的 PWA 不适用于 iOS 上的 Web 服务器上的身份验证。解决方案是删除身份验证。

【讨论】：

这是什么意思？？？？如果我的应用程序正在使用通过服务器进行身份验证的登录屏幕，则不会显示任何图标????
我认为当您为您的网站创建自己的身份验证时，它应该可以工作。使用 BASIC 或 Digest Authentication，您将遇到上述问题。

【解决方案2】：

虽然 iOS 11.3 确实支持 Web 应用程序清单，但它还不支持以这种方式指定图标。您可能希望将其包含在其他设备的清单中，但至少现在您必须在 iOS 上使用以下内容：

<link rel="apple-touch-icon" sizes="180x180" href="icon.png">

指定图标大小，并包含 URL。

通过Apple's documentation here了解更多信息

还有一个网站可以自动化这个过程linked here

【讨论】：

【解决方案3】：

扩展 Hannes answer

带有图标的 PWA 不适用于 iOS 上的 Web 服务器上的身份验证

一种可能的解决方法是允许匿名访问 JUST 图标。

Azure Easy Auth 示例：

在您的公共/wwwroot 中创建rule file：

注意：此功能（网址授权规则）是一项预览功能，今后可能会不受支持/弃用 (>=2021-04)。不清楚替换是什么，如果有的话。

authorization.json

{
  "routes": [
    {
      "path_prefix": "/",
      "policies": {
        "unauthenticated_action": "RedirectToLoginPage"
      }
    },
    {
      "path_prefix": "/img/icons",
      "policies": {
        "unauthenticated_action": "AllowAnonymous"
      }
    }
  ]
}

将您的 Azure 身份验证设置切换为：“允许匿名请求（无操作）”

这应该允许在将页面保存到 iOS 设备上的主屏幕时显示您的图标，但不允许在登录之前访问应用程序的其余部分。

次要注意：由于现在所有请求都默认为“允许匿名请求（无操作）”，因此您必须遵守 "path_prefix": "/" 的全部规则 - 没有它，您的整个应用程序将是公开的.由于此功能（至少在 Azure Web Auth 中）使用最长前缀匹配，因此顺序无关紧要，您应该能够使用白名单或黑名单方法制定规则。

【讨论】：