Question

是否可以创建PWA启动器图标并将其提交到网站市场？
启动器图标应类似于“添加到主屏幕” PWA功能。

我想要实现的是PWA商店，使用户可以轻松地在其主屏幕上添加图标以启动PWA网站。请指教。

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

Answer 2

在iOS和Android中都无法实现：

关于图标

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

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

Android Chrome 会先检查清单和证书的状态，然后弹出将PWA保存到主屏幕的选项。如果弹出式窗口出现在您的站点中，将用于您的PWA，而不是链接的PWA。
iOS does not have a way to programmatically add bookmarks。作为安全措施，这似乎是有目的的。将书签添加到桌面的唯一方法是使用Safari共享按钮。 Safari会在下载自定义图标之前确认您的证书。

我了解Android now lets you install PWAs from the Play Store，但是在那发布它们的过程却很复杂。

你能做什么

为用户提供有关如何安装站点中列出的PWA的重要信息。
提供代码以在iOS中为品牌发布在您商店中的开发人员生成安装弹出系统。我们had to do that screen for this website花费了很多时间才能解决问题。

Answer 3

您可以在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"
}
]

PWA启动图标

3 个答案:

关于图标

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

你能做什么