PWA 启动图标答案

【问题标题】：PWA launch iconPWA 启动图标
【发布时间】：2018-09-27 16:32:45
【问题描述】：

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

我想要实现的是一个 PWA 商店，让用户可以轻松地将图标添加到他们的主屏幕以启动 PWA 网站。请指教。

【问题讨论】：

很难说，但这看起来与本网站无关。如果您可以将其限制为关于 minimal reproducible example 的单个问题，那么它就是主题。

【解决方案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"
}

【讨论】：

【解决方案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"
}
]

【讨论】：

【解决方案3】：

这在 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 花了很长时间才把它弄好。

【讨论】：