logo标签列表

iOS设备没有使用PWA图标

iosangulariconsprogressive-web-apps
3
这是我在index.html的头部所拥有的内容：

这是我在index.html的头部所拥有的内容：

<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>

如果我想通过苹果设备将网页添加到主屏幕，iPhone会将截图作为图标，即使我已经按照苹果在https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html上所描述的在index.html中添加了图标。那么我错过了什么，或者这不适用于将href指向assets而不是主文件夹的情况？
你在测试中使用HTTPS了吗？这对于iOS是必要的。 - Hannes
@Hannes 不，iOS不使用来自清单的图标，因为我之前已经阅读过了。如果我错了，请告诉我。 - flyingAlemannian
@Hannes 我正在使用 HTTPS，是的。 - flyingAlemannian
你是在 iOS 设备上使用 Safari 而不是其他浏览器吗？ - Hannes
@Hannes，由于其他浏览器无法将PWA添加到主屏幕，是的 - 它不适用于Safari。 - flyingAlemannian
显示剩余3条评论
3个回答
3
PWA与图标在iOS上与Web服务器身份验证不兼容。解决方法是删除身份验证。
这是什么意思？如果我的应用程序使用登录屏幕进行服务器身份验证，那么不会显示任何图标吗？ - salah Alhaddabi
我认为当你为自己的网站创建自己的身份验证时，它应该能够工作。使用基本身份验证或摘要身份验证会产生所描述的问题。 - Hannes
2

iOS 11.3支持Web应用程序清单，但尚不支持以此方式指定图标。您需要将其包含在清单中以供其他设备使用，但目前至少对于iOS，您需要使用以下方法：

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

请指定图标大小，并包含一个URL链接。

详细了解请查看苹果文档

也可访问此网站自动化处理该过程。

0

扩展Hannes的答案

PWA与身份验证的Web服务器上的图标在iOS上无法使用

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

Azure Easy Auth示例：

  1. 在public/wwwroot中创建规则文件：

注意：此功能URL授权规则是预览功能，可能不受支持/已弃用（>=2021-04）。目前不清楚是否有替代品。

authorization.json

{
  "routes": [
    {
      "path_prefix": "/",
      "policies": {
        "unauthenticated_action": "RedirectToLoginPage"
      }
    },
    {
      "path_prefix": "/img/icons",
      "policies": {
        "unauthenticated_action": "AllowAnonymous"
      }
    }
  ]
}
  1. 将Azure身份验证设置切换到："Allow Anonymous Requests (no action)" 允许匿名请求（无操作）

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

小提示: 由于所有请求现在默认为“允许匿名请求（无操作）”，因此重要的是您具有 "path_prefix": "/" 的捕获所有规则 - 没有它，您的整个应用程序将成为公开。由于此功能（至少在Azure Web Auth中）使用最长前缀匹配，因此顺序不应该有影响，您应该能够使用白名单或黑名单方法来制定规则。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接