如何为网站快捷方式（主屏幕）配置应用程序名称？

Question

我有一个网站，我的客户想在 android 上添加到他的主屏幕，所以当我这样做（使用 chrome）时，chrome/android 要求提供/更改显示的名称。就我而言，它预先填充了“App”。

翻译成英文的弹出窗口的标签是“Add to Homesceen”

但是当我对例如 stackoverflow 做同样的事情时，我得到了 它预填了一个“名称”，可能是网站标题。

所以我尝试了：

• 我有一个标题标签并试图缩短它，但即使标题非常小，默认情况下仍然存在“应用程序”
• 我加了一个<meta name="application-name" content="name-X">没有效果，也试过<meta name="apple-mobile-web-app-title" content="name-X">
• 检查了没有错误/警告验证的标记 (w3c-validator)
• 适用于不同设备和尺寸的应用图标按预期工作
• 我尝试在网上搜索但没有成功：/
• 我什至无法弄清楚“应用程序”可能来自哪里，因为它没有出现在源代码中

在此先感谢您的帮助:)

Answer 1

您正在寻找PWA JSON manifest。它会告诉您的浏览器您的应用。

正如您在上面的链接中看到的，您应提供 short_name 和/或 name 属性。不要忘记链接您的清单：

<link rel="manifest" href="/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"
}