PWA启动图标

Question

1. 是否可以创建并提交一个 PWA 启动图标到网站市场？
2. 启动图标应该像“添加到主屏幕”PWA 功能一样工作。

我尝试创建一个 PWA 商店，让用户可以轻松地将图标添加到主屏幕以启动一个 PWA 网站。请给予建议。

- user10425302

---

很难说，但这似乎不是本站的主题。如果您可以将其限制为有关 [mcve] 的单个问题，则属于主题。 - user1531971

Answer 1

如果您的网上市场需要获取提交的 PWA 图标，则可以从以下链接标签中获取 PWA 启动图标：

<link rel="icon" sizes="192x192" href="nice-highres.png"> (recommended)
<link rel="icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="niceicon.png">

或者从 manifest.json 的图标部分：

{
  "short_name": "Maps",
  "name": "Google Maps",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/maps/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/maps/",
  "theme_color": "#3367D6"
}

- Arshad Mehmood

Answer 2

您可以在manifest.json文件中根据主屏幕上的尺寸设置要显示的图标。

https://developers.google.com/web/fundamentals/web-app-manifest/

"icons": [
{
  "src": "/images/icons-192.png",
  "type": "image/png",
  "sizes": "192x192"
},
{
  "src": "/images/icons-512.png",
  "type": "image/png",
  "sizes": "512x512"
}
]

- Sid

Answer 3

这在iOS和Android中都不可能：

关于图标

1. Android 依赖于位于您域的根目录下的 manifest.json 文件来处理有关 PWA 的信息。
2. iOS: 您可以尝试更改链接到 PWA 的页面顶部的图标和启动屏幕，但这对您没有任何帮助，因为 Safari iOS 不允许您以编程方式生成书签。

关于保存到桌面的实际链接

1. Android Chrome 在弹出将 PWA 保存到主屏幕的选项之前，会检查站点中清单和证书的状态。如果弹出窗口出现在您的站点中，则是针对您的 PWA 而不是链接的 PWA。
2. iOS 没有一种以编程方式添加书签的方法。这似乎是有意为之的安全措施。将书签添加到桌面的唯一方法是使用 Safari 共享按钮。Safari 在下载自定义图标之前会验证您的证书。

我知道Android现在可以从Play商店安装PWA应用程序, 但是将它们发布到那里的过程很复杂。

你可以做什么

1. 为用户提供有关如何安装您网站中列出的PWAs的详细信息。
2. 为在您的商店发布的开发人员提供用于生成iOS安装弹出窗口系统的代码，带品牌标识。 我们不得不为这个网站制作这个屏幕，花了相当长的时间才做对。

- ganar