PWA发射图标

Question

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

我试图实现的是一个PWA商店，使用户很容易添加一个图标到他们的主页启动一个PWA网站。请指点。

Answer 1

如果您的意思是在您的web市场中，您希望获得提交的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"
}

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"
}
]

Answer 3

无论是在iOS中还是在安卓系统中，这都是不可忽视的：

关于图标

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

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

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

我理解Android现在允许您从Play Store安装PWAs，但是在那里发布它们的过程是复杂的。

你能做什么

1. 为用户提供有关如何安装站点中列出的PWAs的重要信息。
2. 提供代码以生成iOS中的安装弹出系统，供在您的商店中发布的开发人员使用。我们必须为这个网站做那个屏幕，它花了相当一段时间才使它正确。